[Flutter]リストビュー(ListView)の要素にスワイプを追加するには？

どうも、ちょげ(@chogetarou)です。

リストビューの要素にスワイプを追加する方法を紹介します。

方法

リストビューの要素にスワイプを追加するには、「flutter_slidable」パッケージを使います。

まず、「pubspec.yaml」ファイルで、パッケージを追加します。

dependencies:
  flutter_slidable: ^0.6.0

そして、該当ファイルでパッケージをインポートします。

次に、リストビューの要素を「Slidable」の「child」に指定します。

ListView.builder(
  itemCount: /*count*/,
  itemBuilder: (context, index) {
    return Slidable(
      child: /*Item*/
    );
  },
),

次に、Slidableの引数「actionPane」に「SlidableScrollActionPane()」を指定します。

ListView.builder(
  itemCount: /*count*/,
  itemBuilder: (context, index) {
    return Slidable(
      child: /*Item*/,
      actionPane: SlidableScrollActionPane(),
    );
  },
),

最後に、引数「actions」に右にスワイプした時に表示するアイコン、引数「secondaryActions」に左にスワイプした時に表示するアイコンを指定します。

アイコンには、IconSlideActionウェジェットを使います。

ListView.builder(
  itemCount: /*count*/,
  itemBuilder: (context, index) {
    return Slidable(
      child: /*Item*/,
      actionPane: SlidableScrollActionPane(),
      actions: [
        //右にスワイプした時のアイコン
        IconSlideAction(
          caption: /*テキスト*/,
          color: /*色*/,
          icon: /*アイコン*/,
          onTap: () { /*タップ処理*/},
        )
      ],
      secondaryActions: [
        //左にスワイプした時のアイコン
        IconSlideAction(
          caption: /*Text*/,
          color: /*Color*/,
          icon: /*Icon*/,
          onTap: () { /*Tap function*/},
        )
      ],
    );
  },
),

これでリストビューの要素にスワイプを追加することが出来ます。

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return Slidable(
            child: Card(
              child: ListTile(
                title: Text('$index'),
              ),
            ),
            actionPane: SlidableScrollActionPane(),
            actions: [
              IconSlideAction(
                caption: 'Archive',
                color: Colors.blue,
                icon: Icons.archive,
                onTap: () {},
              )
            ],
            secondaryActions: [
              IconSlideAction(
                caption: 'Delete',
                color: Colors.red,
                icon: Icons.delete,
                onTap: () {},
              ),
            ],
          );
        },
      ),
    );
  }

まとめ

リストビューの要素にスワイプを追加するには、「flutter_slidable」パッケージを使います。