💬

【Flutter Widget of the Week #28】Dismissibleを使ってみた

2022/11/28に公開

Flutter

初心者

dismissible

tech

はじめに

Flutter Widget of the Week #28 Dismissible についてまとめましたので、紹介します。
https://youtu.be/iEMgjrfuc58

Dismissible

左または右方向にスライドしてリスト項目を消したいと思うときはないでしょうか？
そんな時に使えるのが今回紹介する Dismissible です。
シンプルだけど、取り入れるだけでアプリのUIも良くなるので、覚えておいて損はない widget かと思います。
では、さっそくサンプルを動かして使い方を見てみましょう。

Dismissible サンプルコード

Dismissible サンプル実行画面

基本のサンプルコード全体

class DismissibleSample extends StatefulWidget {
  const DismissibleSample({super.key});

  @override
  State<DismissibleSample> createState() => _DismissibleSampleState();
}

class _DismissibleSampleState extends State<DismissibleSample> {
  List<int> items = List<int>.generate(100, (int index) => index);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: items.length,
        padding: const EdgeInsets.symmetric(vertical: 16),
        itemBuilder: (BuildContext context, int index) {
          return Dismissible(
            background: Container(
              color: Colors.green,
            ),
            key: ValueKey<int>(items[index]),
            onDismissed: (DismissDirection direction) {
              setState(() {
                items.removeAt(index);
              });
            },
            child: ListTile(
              title: Text(
                'Item ${items[index]}',
              ),
            ),
          );
        },
      ),
    );
  }
}

使い方としては、
まず、ListTitle を Dismissible で囲みます。
次に Dismissible のプロパティの child, key, background に値を入れます。

ListView.builder(
  ・・・
  itemBuilder: (BuildContext context, int index) {
    return Dismissible(
      // リストをスライドしたときに見える背景の色
      background: Container(
        color: Colors.green,
      ),
      // リストの一部を指定するための key
      key: ValueKey<int>(items[index]),
      // リストをスライドして実行する処理
      onDismissed: (DismissDirection direction) {
        setState(() {
          items.removeAt(index);
        });
      },
      child: ListTile(
        title: Text(
          'Item ${items[index]}',
        ),
      ),
    );
  },
),

基本的にはこれだけでリストをスライドしたら削除されるUIが実現できます。

Dismissible のプロパティについて

Dismissible にはいくつかプロパティがあるので、一部紹介します。

(new) Dismissible Dismissible({
  required Key key,
  required Widget child,
  Widget? background,
  Widget? secondaryBackground,
  Future<bool?> Function(DismissDirection)? confirmDismiss,
  void Function()? onResize,
  void Function(DismissUpdateDetails)? onUpdate,
  void Function(DismissDirection)? onDismissed,
  DismissDirection direction = DismissDirection.horizontal,
  Duration? resizeDuration = const Duration(milliseconds: 300),
  Map<DismissDirection, double> dismissThresholds = const <DismissDirection, double>{},
  Duration movementDuration = const Duration(milliseconds: 200),
  double crossAxisEndOffset = 0.0,
  DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  HitTestBehavior behavior = HitTestBehavior.opaque,
})

①secondaryBackground

子の後ろにスタックされ、子が上または左にドラッグされたときに見れる widget を指定する
background が指定されている場合のみ指定可能
型は Widget 型

例として右にスライドすると background で指定した緑色の背景色が見え、左にスライドすると secondaryBackground で指定した赤色の背景色が見える（下図）
Dismissible サンプル実行画面

Dismissible(
  background: Container(
    color: Colors.green,
  ),
  // secondaryBackground を設定
  secondaryBackground: Container(
    color: Colors.red,
  ),
  ・・・
  child: ListTile(
    title: Text(
      'Item ${items[index]}',
    ),
  ),
);

②direction

widget を消す方向を指定する
デフォルトは DismissDirection.horizontal
型は DismissDirection 型
Dismissible サンプル実行画面
以下のように DismissDirection.vertical を指定すると、縦方向にスライドすると削除するUIになります

Dismissible(
  ・・・
  direction: DismissDirection.vertical,
  ・・・
);

③onUpdate

削除可能な widget がドラッグされたときに呼び出す処理を設定する
型は void Function(DismissUpdateDetails) 型

④onDismissed

widget を削除して状態の変更も終了したときに呼び出す処理を設定する
型は void Function(DismissDirection) 型

最後に

今回は Dismissible を紹介しました。Dismissible 一つ入れるだけでもUIが良く見えるので、UIをもっとリッチにしたい時には是非使ってみてください。
次は #29 SizedBox です。またお会いしましょう。