[flutter] 플러터에서의 Swipeable 레이아웃 예제

08 Dec 2023

flutter

플러터(Flutter)로 모바일 애플리케이션을 개발할 때, Swipeable한 레이아웃을 구현할 수 있습니다. 이를 통해 사용자가 화면을 좌우로 스와이프하여 아이템을 삭제하거나 다양한 작업을 수행할 수 있습니다. 이제 Swipeable한 레이아웃을 구현하는 방법에 대해 알아보겠습니다.

필요한 패키지 설치

Swipeable한 레이아웃을 구현하려면 먼저 flutter_slidable 패키지를 설치해야 합니다. 다음과 같이 pubspec.yaml 파일에 패키지를 추가합니다.

dependencies:
  flutter_slidable: ^0.6.0

이후 패키지를 설치하기 위해 터미널에서 다음 명령어를 실행합니다.

flutter pub get

Swipeable 레이아웃 구현하기

아래는 flutter_slidable 패키지를 사용하여 Swipeable한 레이아웃을 구현하는 간단한 예제입니다.

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SwipeableLayout(),
    );
  }
}

class SwipeableLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Swipeable Layout Example'),
      ),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return Slidable(
            actionPane: SlidableDrawerActionPane(),
            actionExtentRatio: 0.25,
            child: ListTile(
              title: Text('Item $index'),
            ),
            actions: <Widget>[
              IconSlideAction(
                caption: 'Archive',
                color: Colors.blue,
                icon: Icons.archive,
                onTap: () => _archiveItem(context, index),
              ),
              IconSlideAction(
                caption: 'Delete',
                color: Colors.red,
                icon: Icons.delete,
                onTap: () => _deleteItem(context, index),
              ),
            ],
          );
        },
      ),
    );
  }

  void _archiveItem(BuildContext context, int index) {
    Scaffold.of(context).showSnackBar(SnackBar(content: Text('Archived item $index')));
  }

  void _deleteItem(BuildContext context, int index) {
    Scaffold.of(context).showSnackBar(SnackBar(content: Text('Deleted item $index')));
  }
}

위 예제에서는 flutter_slidable 패키지의 Slidable 위젯을 사용하여 Swipeable한 레이아웃을 구현했습니다. 각 아이템에 대해 스와이프 동작에 따른 작업을 수행할 수 있는데, 위 예제에서는 아이템을 아카이브하거나 삭제하는 동작을 구현했습니다.

이제 위 예제를 참고하여 플러터 애플리케이션에서 Swipeable한 레이아웃을 구현해 보세요.