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('リスト'),
)
)
);129min
プレミアム会員
見放題
【Flutter入門】3日でできるアプリ開発講座|環境構築からUI作成まで完全解説
2025.09.28
¥3,600
ソースコード ダウンロード可
509min
プレミアム会員
見放題
Flutter × FirebaseでX(旧Twitter)のようなSNSアプリを作成する【ログイン機能】【画像保存】
2025.08.31
¥7,500
ソースコード ダウンロード可
207min
プレミアム会員
見放題
Flutter開発で最低限知っておきたいプログラミングの基礎知識|Dart入門
2025.10.31
¥6,000

【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