Flutter アニメーション入門　-slidable-

#ウィジェットをスワイプ可能になるようにする
flutterの基本を押さえたら次はアニメーションウィジェットについて学んでいきましょう！
この回ではFlutterでtodo Listを作ってみた　－初心者必見－をすでに行ったという前提で進めていきます。今回は前回に作ったTodoListに使われているListTileにアニメーションを加えていきたいと思います。

-[Flutterでtodo Listを作ってみた　－初心者必見－](https://qiita.com/Renkon117/items/30175c2a4e6ebd835ca1)


#完成形
##コンプリートの処理をスライドのウィジェットで追加する
![Screenshot_1567598040.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373270/db2201cf-398b-175a-6c5f-fb1e81b64ada.png)
##リストの削除用
![Screenshot_1567598032.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373270/0704de68-144e-9095-1852-fb6fa15e21c1.png)
##コンプリートの取り消し用
![Screenshot_1567598028.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373270/0dff3eed-c797-39ff-43d7-1c58239e96ed.png)

#準備
```pubspec.yaml
flutter_slidable: ^0.5.3
```
```home_page.dart
import 'package:flutter_slidable/flutter_slidable.dart';
```

#実際にコードを書いてみる！
##スライドさせたいリストタイルをSlidable widgetで囲むだけ！！
Dismissibleの意味は分からないですが追加するとうまく動きました。
```home_page.dart
Dismissible(
                      key: ObjectKey(listItems[index]),
//ListTileを含んだコンテイナーをスライド可能にしました！
                      child: Slidable(
                        actionPane: SlidableDrawerActionPane(),
                        actionExtentRatio: 0.25,
                        child: Container(
                          margin: const EdgeInsets.all(2.00),
                          decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: const BorderRadius.all(
                                  const Radius.circular(5.0))),
                          child: ListTile(...
...
```

##slidableの下にactionを追加して追加されたボタンのアクションの処理を指定する
今回はlistTileのアイコンにある処理と同じなのでそのままコピーします。actionは右スワイプsecondary actionは左スワイプに対応しています。

```home_page.dart
child: Slidable(
actions: <Widget>[
//completeを完了するか未完了にするかで分岐させています。
                          (completedItems[index] == 'false')
                              ? IconSlideAction(
                                  caption: 'Complete',
                                  color: Colors.greenAccent,
                                  icon: IconData(58826,
                                      fontFamily: 'MaterialIcons'),
                                  onTap: () {
//ListTileにあるアイコンの中身と全く同じ処理です。
                                    if (completedItems[index] == 'false') {
                                      completedItems[index] = 'true';
                                    } else {
                                      completedItems[index] = 'false';
                                    }
                                    setState(() {});
                                  },
                                )
                              : IconSlideAction(
                                  caption: 'Undo',
                                  color: Colors.grey,
                                  icon: IconData(58826,
                                      fontFamily: 'MaterialIcons'),
                                  onTap: () {
                                    if (completedItems[index] == 'false') {
                                      completedItems[index] = 'true';
                                    } else {
                                      completedItems[index] = 'false';
                                    }
                                    setState(() {});
                                  },
                                )
                        ],),
```

```home_page.dart
secondaryActions: <Widget>[
                          IconSlideAction(
                            caption: 'Delete',
                            color: Colors.red,
                            icon: Icons.delete,
                            onTap: () {
                              listItems.removeAt(index);
                              completedItems.removeAt(index);

                              SharePrefs.setListItems(listItems).then((_) {
                                setState(() {});
                              });
                              SharePrefs.setCompletedItems(completedItems)
                                  .then((_) {
                                setState(() {});
                              });
                            },
                          ),
                        ],
```

#まとめ
Flutterはアニメーションが豊富なうえに、導入するのが簡単なのでガンガン利用していったほうがいいです。私ももっとリサーチを行って紹介させていただきたいと思います。

#ソースコード
[ソースコードはこちら](https://github.com/Renkon117/flutter_todo_list/tree/feature/5)

#参照元
[Flutter dismissible](https://flutter.dev/docs/cookbook/gestures/dismissible)

#Flutter関連記事
[flutterでQRコードリーダーを作ってみた
](https://qiita.com/Renkon117/items/39c031c7123ecc193294)
[Flutter 入門　-textFieldを開いたときにkeyboardを表示しない-
](https://qiita.com/Renkon117/items/1e6f972b4a60c25718d4)
[Flutterでtodo Listを作ってみた　－初心者必見－](https://qiita.com/Renkon117/items/30175c2a4e6ebd835ca1)