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

ウィジェットをスワイプ可能になるようにする

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

-Flutterでtodo Listを作ってみた　－初心者必見－

完成形

コンプリートの処理をスライドのウィジェットで追加する

リストの削除用

コンプリートの取り消し用

準備

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

ソースコード

ソースコードはこちら

参照元

Flutter dismissible

Flutter関連記事

flutterでQRコードリーダーを作ってみた

Flutter 入門　-textFieldを開いたときにkeyboardを表示しない-

Flutterでtodo Listを作ってみた　－初心者必見－