【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part102 Interaction model widgets
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part102 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part101 Interaction model widgets
引き続き、Interaction model widgetsについて学びます。
Interaction model widgets
Dismissibleウィジェット
confirmDismissプロパティ
confirmDismiss
プロパティはリストのアイテムをスワイプした際に呼び出されるコールバック関数を指定します。
この関数でtrue
を返却するとリストからアイテムを削除する処理が進みます。
順番としてはconfirmDismiss
→onDismissed
となります。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
// runApp(new MaterialApp(home: new MyApp()));
runApp(new MaterialApp(home: new SamplePage()));
}
class SamplePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _SamplePageState();
}
}
class _SamplePageState extends State<SamplePage> {
List<String> _items = ['いち', 'に', 'さん'];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('テスト中!')),
body: ListView.builder(
itemCount: _items.length,
itemBuilder: (context, index) {
return Dismissible(
key: UniqueKey(),
background: Container(color: Colors.amber),
// スワイプして削除されたら呼び出される関数を定義します。
onDismissed: (DismissDirection direction) {
setState(() {
_items.removeAt(index);
});
},
confirmDismiss: (DismissDirection direction) async {
return deleteOK();
},
child: ListTile(title: Text('${_items[index]}')),
);
},
),
),
);
}
/// 削除確認メソッド
Future<bool> deleteOK() async {
bool result = false;
await showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("確認"),
content: Text("削除します。よろしいですか?"),
actions: [
ElevatedButton(
onPressed: () async {
Navigator.of(context).pop(true);
result = true;
},
child: const Text("削除")),
ElevatedButton(
onPressed: () => Navigator.of(context).pop(false),
child: const Text("キャンセル"),
),
],
);
},
);
return result;
}
}
確認ダイアログでキャンセルをタップすると削除されません。
削除をタップするとonDismissed
で設定したコールバック関数が呼び出されます。
最後に
スマートフォンのアプリケーションっぽくなってきましたね。
今日はここまで!
参考
Flutter Dismissible Widjet スワイプでのリスト項目の削除方法 (marketech.tokyo)
ディスカッション
コメント一覧
まだ、コメントがありません