Slackコミュニティに
無料で参加する
Flutterラボの
プレミアム会員になる
【Flutter】Widgetをスワイプできるようにする(flutter_slidable)
2021.11.30
『flutter_slidable』パッケージを使用して、スワイプ可能なWidgetを作成するときのコードを紹介したいと思います。
このパッケージを使うとき(Slidableウィジェット)のコードを以下に載せておきます。
細かい説明はコメントアウトに記載してあるのでそれも併せてご覧ください。
このパッケージの使い方はYouTubeライブで解説したものなので、もっと詳しく知りたい方はYouTubeに公開しているアーカイブからご確認ください。
Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(widget.title),
),
body: Slidable(
// dismissibleを使う場合は必須
key: const ValueKey(0),
// 左から出てくる
startActionPane: ActionPane(
// ActionPaneの出現アニメーション(必須)
motion: const DrawerMotion(),
// 最後までスワイプしたときにこのSlidableを消す(keyが必須)
dismissible: DismissiblePane(onDismissed: () {}),
// 出てくるWidgetを指定(必須)
children: [
SlidableAction(
onPressed: (context) {},
backgroundColor: const Color(0xFFFE4A49),
foregroundColor: Colors.white,
icon: Icons.delete,
label: 'Delete',
),
],
),
// 右から出てくる
endActionPane: ActionPane(
motion: const DrawerMotion(),
children: [
SlidableAction(
autoClose: false,
onPressed: (context) {},
backgroundColor: const Color(0xFF21B7CA),
foregroundColor: Colors.white,
icon: Icons.push_pin,
label: 'Pin',
),
],
),
child: const ListTile(
title: Text('リスト'),
)
)
);
Flutterラボ
hatchoutschool

208min
プレミアム会員
見放題
3日でできるFlutterアプリ開発入門
2024.04.11
¥3,600
ソースコード ダウンロード可
180min
プレミアム会員
見放題
Flutter × FirebaseでTwitterみたいなSNSアプリを作成する【ログイン機能】【画像保存】
2021.08.28
¥7,500
147min
プレミアム会員
見放題
Flutter開発で最低限知っておきたいDartの基礎知識
2024.08.31
¥6,000
ソースコード ダウンロード可
Flutter Daily
Flutterに関する記事を日々更新しています (223本)

【Dart】Stringからint, double, DateTimeに変換する
2020.09.14

【Dart】【Flutter】List型(リスト)の使い方とよく使うメソッドまとめ
2020.09.18

【Dart】【Flutter】DateTime型についてのまとめ
2020.10.01

【Dart】Map型の使い方とよく使うメソッドまとめ
2020.09.13