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で囲むだけ!!
flutter_slidable: ^0.5.3
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は左スワイプに対応しています。
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(() {});
},
)
],),
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関連記事
flutterでQRコードリーダーを作ってみた
Flutter 入門 -textFieldを開いたときにkeyboardを表示しない-
Flutterでtodo Listを作ってみた -初心者必見-
Author And Source
この問題について(Flutter アニメーション入門 -slidable-), 我々は、より多くの情報をここで見つけました https://qiita.com/Renkon117/items/abc90ba3c5a7e1580421著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .