【Flutter】Dismissible|スワイプさせてリスト要素を削除

今回はDismissibleの基本的な使い方を紹介します。

Dismissibleを使えばListViewなどのリスト要素をスワイプさせて削除できます。

\ 世界最大級のオンライン学習サービス /

目次

Dismissibleの使い方

//今回ListView.builderで使用するリスト
final items = List.generate(100, (int index) => index);
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    final item = items[index];

    return Dismissible(
      key: UniqueKey(),
      onDismissed: (DismissDirection direction) {
        setState() => items.removeAt(index);
      },
      child: ListTile(
        title: Text(
          'item $index',
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  },
);

DismissibleListViewなどリスト表示するWidgetの要素をラップして使用します。今回のコードではListViewの要素であるListTileをラップしています。

スワイプした要素を削除(イベント)するためにkeyに他の要素と区別がつくUniqueKeyを渡します。

背景・スワイプ向きを指定

Dismissible(
  direction: DismissDirection.endToStart,
  key: UniqueKey(),
  onDismissed: (DismissDirection direction) {
    setState() => items.removeAt(index);
  },
  background: Container(
    alignment: Alignment.centerRight,
    color: Colors.red,
    child: Icon(Icons.delete, color: Colors.white),
    padding: EdgeInsets.all(10),
  ),
  child: ListTile(
    title: Text(
      'item $index',
      style: TextStyle(fontSize: 20),
    ),
  ),
);

backgroundでスワイプする際の背景を指定できます。

背景色とアイコンを表示する場合はContainerを引数に渡し、colorで背景色、childでアイコンを渡します。アイコンの表示位置や余白はContainerで指定します。

スワイプ向きはdirectionDismissDirectionを渡して指定できます。

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FlutterZero')),
        body: const CustomApp(),
      ),
    );
  }
}

class CustomApp extends StatefulWidget {
  const CustomApp({Key? key}) : super(key: key);

  @override
  State<CustomApp> createState() => _CustomAppState();
}

class _CustomAppState extends State<CustomApp> {
  final items = List.generate(100, (int index) => index);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        final item = items[index];

        return Dismissible(
          direction: DismissDirection.endToStart,
          key: UniqueKey(),
          onDismissed: (DismissDirection direction) {
            setState() => items.removeAt(index);
          },
          background: Container(
            alignment: Alignment.centerRight,
            color: Colors.red,
            child: Icon(Icons.delete, color: Colors.white),
            padding: EdgeInsets.all(10),
          ),
          child: ListTile(
            title: Text(
              'item $index',
              style: TextStyle(fontSize: 20),
            ),
          ),
        );
      },
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次