Flutter/Dart

リストをスライドしてアクションを実行するボタンを表示する

pubspec.yamlに記載して、プラグインを追加する

version: 0.0.1+1

environment:
  sdk: ">=2.2.0 <3.0.0"

  dependencies:
    flutter:
      sdk: flutter
  flutter_slidable: ^0.5.4

Widgetを作成する

return ReorderableListView(
  children: List.generate(
    _list_.length,
    (index) {
      return Slidable(
        key: ValueKey('$index'),
        dismissal: SlidableDismissal(
          child: SlidableDrawerDismissal(),
          dismissThresholds: <SlideActionType, double>{
            // 右dismissal(スワイプ)をキャンセルする(1.0にセットする)
            SlideActionType.secondary: 1.0
          },
          onDismissed: (actionType) async {
            await _removeSiteContents(index);
          },
        ),
        actions: <Widget>[
          IconSlideAction(
            caption: 'Edit',
            color: Colors.blue,
            icon: Icons.edit,
            onTap: () {},
          ),
        ],
        secondaryActions: <Widget>[
          IconSlideAction(
            caption: 'Delete',
            color: Colors.red,
            icon: Icons.delete,
            onTap: () async => await _removeSiteContents(index),
          )
        ],
        child: Container(),
        actionPane: SlidableDrawerActionPane(),
      );
    },
  ),
);

備考

Dismissibleと似ているが、Dismissibleはスライドして要素削除

Dismissibleの場合

return ReorderableListView(
  children: List.generate(
    _list_.length,
    (index) {
      return Dismissible(
        key: ValueKey('$index'),
        background: Container(
          color: Theme.of(context).errorColor,
          alignment: Alignment.centerLeft,
          padding: const EdgeInsets.all(16.0),
          child: const Icon(
            Icons.restore_from_trash,
          ),
        ),
        secondaryBackground: Container(
          color: Theme.of(context).errorColor,
          alignment: Alignment.centerRight,
          padding: const EdgeInsets.all(16.0),
          child: Icon(Icons.restore_from_trash),
        ),
        onDismissed: (direction) {
          // directionに応じて処理を変える
          // 右スワイプか左スワイプ
        },
        child: Container(),
      );
    },
  ),
);

参考URL

https://webbibouroku.com/Blog/Article/flutter-list-item-delete