【Flutter】flutter_slidableでListTileにイベントを

flutter_slidableとは
使い方

flutter_slidableとは

flutter_slidableは、Flutterアプリケーションにおいて、スライド可能なリストアイテムを実装するためのパッケージです。リストアイテムを左右または上下にスライドさせ、アクションボタンを表示することができます。

flutter_slidable | Flutter package

A Flutter implementation of slidable list item with directional slide actions that can be dismissed.

使い方

インストール

pubspec.yamlファイルに依存関係を追加します。

dependencies:
  flutter_slidable: ^3.1.0

基本的な使用例

以下は、Slidableウィジェットを使った基本的な実装例です。

Slidable(
  // Slidableを削除可能にする場合はキーを指定します。
  key: const ValueKey(0),

  // 左側（または上側）のアクションペインを指定します。
  startActionPane: ActionPane(
    // モーションはペインのアニメーションを制御するためのウィジェットです。
    motion: const ScrollMotion(),

    // ペインをスライドで削除可能にします。
    dismissible: DismissiblePane(onDismissed: () {}),

    // アクションボタンを定義します。
    children: const [
      SlidableAction(
        onPressed: doNothing,
        backgroundColor: Color(0xFFFE4A49),
        foregroundColor: Colors.white,
        icon: Icons.delete,
        label: 'Delete',
      ),
      SlidableAction(
        onPressed: doNothing,
        backgroundColor: Color(0xFF21B7CA),
        foregroundColor: Colors.white,
        icon: Icons.share,
        label: 'Share',
      ),
    ],
  ),

  // 右側（または下側）のアクションペインを指定します。
  endActionPane: const ActionPane(
    motion: ScrollMotion(),
    children: [
      SlidableAction(
        flex: 2,
        onPressed: doNothing,
        backgroundColor: Color(0xFF7BC043),
        foregroundColor: Colors.white,
        icon: Icons.archive,
        label: 'Archive',
      ),
      SlidableAction(
        onPressed: doNothing,
        backgroundColor: Color(0xFF0392CF),
        foregroundColor: Colors.white,
        icon: Icons.save,
        label: 'Save',
      ),
    ],
  ),

  // Slidableの子ウィジェットは、ユーザーがドラッグしていないときに表示されます。
  child: const ListTile(title: Text('Slide me')),
);

モーションの種類

ActionPaneには、ペインがスライドする際のアニメーションを制御するために、以下のようなモーションを指定できます。

Behind Motion: アクションがSlidableの背後にあるように表示されます。
Drawer Motion: アクションが引き出しのようにアニメーションします。
Scroll Motion: アクションがSlidableと一緒に動きます。
Stretch Motion: アクションが引き伸ばされるようにアニメーションします。

コントローラー

SlidableControllerを使用して、プログラム的にアクションを開閉することができます。

final controller = SlidableController();

// Slidableウィジェットにコントローラーを設定します。
Slidable(
  controller: controller,
  // その他のパラメータ
);

// アクションを開く
void _handleOpen() {
  controller.openEndActionPane();
  // または
  // controller.openStartActionPane();
}

// アクションを閉じる
void _handleClose() {
  controller.close();
}