広告

Flutterラボの

プレミアム会員になる

【Flutter】Widgetをスワイプできるようにする(flutter_slidable)

2021.11.30

flutter_slidable』パッケージを使用して、スワイプ可能なWidgetを作成するときのコードを紹介したいと思います。

Flutterラボ|動画で学ぶFlutter学習サイト Flutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで flutterlabo.tech

このパッケージを使うとき(Slidableウィジェット)のコードを以下に載せておきます。
細かい説明はコメントアウトに記載してあるのでそれも併せてご覧ください。

このパッケージの使い方はYouTubeライブで解説したものなので、もっと詳しく知りたい方はYouTubeに公開しているアーカイブからご確認ください。

Flutterラボ 現役エンジニアが教えるFlutter学習! プログラミング初心者でもiOS・Android・WEBアプリ開発を学ぶことがで www.youtube.com
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
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ 広告のECサイトを開発(https://ec-ad.tech/)