[flutter] 플러터에서의 Swipeable 터치 영역 설정 방법

08 Dec 2023

flutter

모바일 앱을 만들 때 사용자가 터치해서 스와이프하는 기능을 추가하는 것은 중요합니다. 플러터에서는 Swipeable한 터치 영역을 설정하기 위해 Dismissible 위젯을 사용합니다.

Dismissible 위젯

Dismissible 위젯은 화면을 swipe할 수 있게 해주는 위젯입니다. 아래의 예제 코드를 통해 Dismissible 위젯을 사용하는 방법을 확인할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Swipeable 터치 영역 설정'),
        ),
        body: ListView.builder(
          itemCount: 5,
          itemBuilder: (BuildContext context, int index) {
            return Dismissible(
              key: Key(index.toString()),
              background: Container(color: Colors.red),
              onDismissed: (direction) {
                // 원하는 동작 수행
              },
              child: ListTile(
                title: Text('아이템 $index'),
              ),
            );
          },
        ),
      ),
    );
  }
}

위 코드에서 Dismissible 위젯은 ListView의 각 아이템에 적용되어 있습니다. 사용자가 아이템을 swipe하면 해당 아이템이 삭제되는 효과를 볼 수 있습니다.

Swipeable 터치 영역 커스터마이징

Dismissible 위젯을 사용하면 swipe하는 동작을 트리거로 다양한 동작을 수행할 수 있습니다. 이를 통해 swipe하는 동작에 맞게 사용자 정의된 액션을 수행할 수 있습니다.

return Dismissible(
  key: Key(index.toString()),
  direction: DismissDirection.startToEnd, // swipe 방향 설정
  background: Container(
    color: Colors.red,
    child: Icon(Icons.delete),
    alignment: Alignment.centerLeft,
    padding: EdgeInsets.only(left: 16.0),
  ),
  secondaryBackground: Container(
    color: Colors.green,
    child: Icon(Icons.archive),
    alignment: Alignment.centerRight,
    padding: EdgeInsets.only(right: 16.0),
  ),
  onDismissed: (direction) {
    // 해당 방향에 따른 동작 수행
  },
  child: ListTile(
    title: Text('아이템 $index'),
  ),
);

위 코드에서 direction 속성을 사용하여 swipe하는 방향을 설정하고, background 및 secondaryBackground 속성을 사용하여 swipe 했을 때 보여줄 컨텐츠를 설정할 수 있습니다.

플러터에서 Dismissible 위젯을 이용하여 Swipeable한 터치 영역을 설정하는 방법을 확인할 수 있었습니다. 이를 활용하여 사용자가 직관적으로 앱을 사용할 수 있도록 도와줄 수 있습니다.

블로그 포스트 출처: Flutter - Dismissible class