목록 표시된 항목을 스 와이프하여 삭제하는 방법을 보여줍니다.

Dismissible 래핑

List 항목을 구성하는 Widget에 Dismissible을 래핑합니다.

인수 정보

키

고유한 키를 지정해야 합니다.
이 키가 중복되어 버리면 애니메이션이 이상해지는 것 같습니다.

배경

항목을 스 와이프 할 때 배경을 지정할 수 있습니다.
스 와이프하여 빨간색 배경이되는 녀석을 구현할 수 있습니다.

background: Container(
              padding: EdgeInsets.only(
                right: 10,
              ),
              alignment: AlignmentDirectional.centerEnd,
              color: Colors.red,
              child: Icon(
                Icons.delete,
                color: Colors.white,
              ),
            ),

direction

스와이프할 수 있는 방향을 지정할 수 있습니다.

direction: DismissDirection.endToStart,

방향


DismissDirection.endToStart
오른쪽에서 왼쪽

DismissDirection.startToEnd
왼쪽에서 오른쪽

DismissDirection.horizontal
오른쪽에서 왼쪽, 왼쪽에서 오른쪽

DismissDirection.vertical
아래에서 위, 위에서 아래

DismissDirection.up
아래에서 위

DismissDirection.down
위에서 아래

confirmDismiss

스와이프 애니메이션이 끝난 시점에 호출됩니다.
아직 Widget이 파기되어 있지 않기 때문에, 정말로 처리를 실행해 좋은지 등의 확인을 실시하거나 할 수 있습니다.

onDismissed

스와이프하면 Widget이 삭제되고 애니메이션이 끝난 시점에 호출됩니다.
실제 데이터의 삭제 처리 등은 여기에서 실시하게 됩니다.

또한 어떤 방향으로 스와이프했는지 얻을 수 있으므로 스와이프 방향에 따라 처리를 나눌 수 있습니다.

onDismissed: (direction) {
              if (direction == DismissDirection.endToStart) {
                // 右から左にスワイプされた時
              } else {
                // それ以外
              }
            },

샘플 코드

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter App',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List<String> _item = [
    '111',
    '222',
    '333',
    '444',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('リスト'),
      ),
      body: ListView.separated(
        separatorBuilder: (context, index) => Divider(
          height: 0.0,
        ),
        itemCount: _item.length,
        itemBuilder: (BuildContext context, int index) {
          final text = _item[index];
          return Dismissible(
            key: Key(text),
            background: Container(
              padding: EdgeInsets.only(
                right: 10,
              ),
              alignment: AlignmentDirectional.centerEnd,
              color: Colors.red,
              child: Icon(
                Icons.delete,
                color: Colors.white,
              ),
            ),
            direction: DismissDirection.endToStart,
            onDismissed: (direction) {
              // スワイプ後に実行される（削除処理などを書く）
              print('onDismissed');
            },
            child: ListTile(
              title: Text(
                text,
              ),
              onTap: () {},
            ),
          );
        },
      ),
    );
  }
}

실행 결과