【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part104 Interaction model widgets
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part104 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part103 Interaction model widgets
引き続き、Interaction model widgetsについて学びます。
Interaction model widgets
Dismissibleウィジェット
directionプロパティ
diretion
プロパティはスワイプの方向を設定できるようです。
DismissDirection.vertical
にすると上下スワイプでDismissibleウィジェットが動作するようになります。
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(),
direction: DismissDirection.vertical,
// 右スワイプして下に現れるウィジェット・・・下に?
background: Container(
color: Colors.amber,
child: const Text('上から下にスワイプ'),
),
// 左スワイプして下に現れるウィジェット・・・下・・・。
secondaryBackground: Container(
color: Colors.blue.shade400,
child: const Text('下から上にスワイプ'),
),
// スワイプして削除されたら呼び出される関数を定義します。
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;
}
}
最後に
左右のスワイプだけじゃなく上下のスワイプにも対応しているのですね。
驚きました。
だからスワイプ動作のプロパティ名がbackground
とsecondaryBackground
なんですね😯
今日はここまで!
ディスカッション
コメント一覧
まだ、コメントがありません