플러터에서 Dismissible 위젯 사용 방법과 옵션

 

Dismissible 위젯은 사용자가 드래그 제스처를 사용하여 위젯을 화면에서 제거할 수 있도록 하는 강력한 플러터 위젯입니다.

이 블로그 게시물에서는 Dismissible 위젯의 기본 사용 방법과 사용 가능한 다양한 옵션을 살펴봅니다.

Dismissible 위젯 사용 방법

Dismissible 위젯을 사용하려면 다음 단계를 따르세요.

1. Dismissible 위젯으로 감싸려는 위젯을 정의합니다.
2. Dismissible 위젯의 key 속성을 설정합니다. 이 키는 위젯을 고유하게 식별하는 데 사용됩니다.
3. Dismissible 위젯의 child 속성을 설정합니다. 이 속성은 Dismissible 위젯으로 감싸려는 위젯을 지정합니다.
4. (선택 사항) onDismissed 콜백을 정의합니다. 이 콜백은 사용자가 위젯을 화면에서 제거할 때 호출됩니다.

예를 들어 다음 코드는 ListTile 위젯을 Dismissible 위젯으로 감싸고 사용자가 위젯을 오른쪽으로 밀면 삭제하는 콜백을 정의합니다.

Dismissible(
  key: UniqueKey(),
  child: ListTile(
    title: Text('Item to dismiss'),
  ),
  onDismissed: (direction) {
    // 사용자가 위젯을 오른쪽으로 밀면 삭제합니다.
    if (direction == DismissDirection.endToStart) {
      // 여기서 아이템 삭제 로직을 작성합니다.
      // 예: 데이터 리스트에서 해당 아이템을 제거하고 상태를 갱신합니다.
      print('Item dismissed');
    }
  },
  background: Container(color: Colors.red),
)

 

Dismissible 위젯 옵션

Dismissible 위젯에는 다음과 같은 다양한 옵션이 있습니다.

• background: 사용자가 위젯을 드래그할 때 표시되는 위젯을 지정합니다.
• secondaryBackground: 사용자가 위젯을 반대 방향으로 드래그할 때 표시되는 위젯을 지정합니다.
• dismissThresholds: 사용자가 위젯을 화면에서 제거하기 위해 얼마나 멀리 드래그해야 하는지를 지정합니다.
• movementDuration: 위젯이 화면에서 사라지는 데 걸리는 시간을 지정합니다.
• direction: 사용자가 위젯을 제거할 수 있는 방향을 지정합니다.
• dragStartBehavior: 사용자가 위젯을 드래그하기 시작할 때 발생하는 동작을 지정합니다.
• dismissDirection: 위젯이 화면에서 사라지는 방향을 지정합니다.
• onDragStarted: 사용자가 위젯을 드래그하기 시작할 때 호출되는 콜백을 정의합니다.
• onDragCompleted: 사용자가 위젯 드래그를 완료할 때 호출되는 콜백을 정의합니다.

Dismissible 위젯 사용 예제

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dismissible Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 샘플 데이터 리스트
  List<String> items = List.generate(10, (index) => 'Item ${index + 1}');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dismissible Demo'),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return Dismissible(
            key: UniqueKey(), // 각 항목에 유일한 키 제공
            background: Container(color: Colors.red),
            onDismissed: (direction) {
              // 아이템 삭제 로직
              setState(() {
                items.removeAt(index);
              });

              // 삭제 확인 메시지 표시
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Item ${index + 1} dismissed')),
              );
            },
            child: ListTile(
              title: Text(items[index]),
            ),
          );
        },
      ),
    );
  }
}

다음은 Dismissible 위젯을 사용하는 몇 가지 예제입니다.

• 리스트 항목 삭제: 사용자가 리스트 항목을 오른쪽으로 밀면 삭제할 수 있도록 Dismissible 위젯을 사용할 수 있습니다.
• 위젯 숨기기: 사용자가 위젯을 위로 밀면 숨길 수 있도록 Dismissible 위젯을 사용할 수 있습니다.
• 위젯 재정렬: 사용자가 위젯을 위/아래로 드래그하여 재정렬할 수 있도록 Dismissible 위젯을 사용할 수 있습니다.

결론

Dismissible 위젯은 사용자가 제스처를 사용하여 위젯을 상호 작용하는 다양한 방법을 제공하는 강력한 플러터 위젯입니다.

위에서 설명한 옵션을 사용하여 다양한 종류의 드래그 가능한 기능을 구현할 수 있습니다.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱