flutter_slidableを導入する【v1.1.0】

flutter_slidableを実装時に得た手順と知見を書いていきたいと思います。

# 公式Document
https://pub.dev/packages/flutter_slidable

# flutter_slidableとは
公式Documentによると
> A Flutter implementation of slidable list item with directional slide actions that can be dismissed.  

flutter_slidableを実装することで、スワイプでメニューを表示することができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256345/2a5f894e-bca7-6180-a85f-82dc08a3edfe.gif" width = 50%>

# 実装バージョン
- 1.1.0
    - 2021年12月21日現在、最新バージョン

# flutter_slidableを導入する
公式ドキュメント > readmeに沿って導入していきます。

### インストール
`pubspec.yaml`に以下の記述を追記します

```yaml:pubspec.yaml
dependencies:
  flutter_slidable: <1.1.0>
```

slidableを実装したい画面のソースファイルに、flutter_slidableパッケージをインポートします

```dart:import.dart
import 'package:flutter_slidable/flutter_slidable.dart';
```

# サンプルファイルから使い方を読み取る
[サンプルコードへのリンク](https://pub.dev/packages/flutter_slidable#getting-started)

```dart:sample.dart
Slidable(
  // Specify a key if the Slidable is dismissible.
  key: const ValueKey(0),

  // The start action pane is the one at the left or the top side.
  startActionPane: ActionPane(
    // A motion is a widget used to control how the pane animates.
    motion: const ScrollMotion(),

    // A pane can dismiss the Slidable.
    dismissible: DismissiblePane(onDismissed: () {}),

    // All actions are defined in the children parameter.
    children: const [
      // A SlidableAction can have an icon and/or a label.
      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',
      ),
    ],
  ),

  // The end action pane is the one at the right or the bottom side.
  endActionPane: const ActionPane(
    motion: ScrollMotion(),
    children: [
      SlidableAction(
        // An action can be bigger than the others.
        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',
      ),
    ],
  ),

  // The child of the Slidable is what the user sees when the
  // component is not dragged.
  child: const ListTile(title: Text('Slide me')),
),
```

#### 説明
- `startActionPane`: 右へスワイプした時に表示する内容に関するウィジェット
    - <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256345/6ab3fdb6-805e-452e-b755-e849a3d5dde4.png" width = 50%>
- `endActionPane`: 左へスワイプした時に表示する内容に関するウィジェット
    - <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256345/9fdee237-947a-9d55-600c-90d217b2c491.png" width = 50%> 

- `onPressed`: タップした時の挙動を記述する

```dart:onPressed-sample.dart
onPressed: (BuildContext context) async {
  //例：別の画面に遷移させる
  final String? title = await Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => EditPage(),
    ),
  );
},
```

- `ListTile`: 画面に表示する情報を記述する

```dart:ListTile-sample.dart
child: ListTile(
  title: Text("テストタイトル"),
  subtitle: Text("テスト著者"),
)
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256345/bfe4aade-da38-c7e0-1ec7-6f4a419e5a8a.png" width = 50%>


# おわりに
v1.0.0前後で記述の方法が大きく変わったようです。
誰かの参考となれば幸いです。