【Flutter】Slidable|リストの要素をスワイプして削除

今回はSlidableの基本的な使い方を紹介します。

Slidableを使えばListViewなどのリスト要素をスワイプして別のWidgetを表示させたり、削除したりなどのイベントを実行できます。

\ 世界最大級のオンライン学習サービス /

目次

事前準備|flutter_slidableの導入

flutter pub add flutter_slidable
import 'package:flutter_slidable/flutter_slidable.dart';

flutter_slidableを導入します。

Slidableの使い方

デフォルト

右方向にスワイプ

左方向にスワイプ

SlidableでスワイプさせるWidgetをラップしたらstartActionPane(右側にスワイプ)またはendActionPane(左側にスワイプ)でスワイプ時に表示させるWidgetとスワイプモーションを指定します。

スワイプ時に表示させるWidgetはchildrenで指定し、スワイプモーションはmotionで指定します。(スワイプの動きはpub.devの「Motions」から確認できます)

Slidable(
  startActionPane: ActionPane(
    motion: DrawerMotion(),
    children: [
      SlidableAction(
        autoClose: true,
        onPressed: (value) {
          print('Calling Alex');
        },
        backgroundColor: Colors.lightGreen,
        foregroundColor: Colors.white,
        icon: Icons.phone,
        label: 'Call',
      ),
    ],
  ),
  endActionPane: ActionPane(
    motion: DrawerMotion(),
    children: [
      SlidableAction(
        onPressed: (value) => setState(() {}),
        backgroundColor: Colors.red,
        foregroundColor: Colors.white,
        icon: Icons.delete,
        label: 'Delete',
      ),
      SlidableAction(
        onPressed: (value) => setState(() {}),
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
        icon: Icons.edit,
        label: 'edit',
      ),
    ],
  ),
  child: ListTile(
    leading: Icon(Icons.person),
    subtitle: Text('0123456789'),
    tileColor: Colors.grey[300],
    title: Text(
      'Alex',
      style: TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: 20,
      ),
    ),
  ),
),

リストの要素をスワイプさせて削除

SlidableListViewなどの要素をスワイプしたい場合も先ほどと同様です。

サンプルコードではListViewの要素ListTileSlidableでラップしています。

サンプルコード

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List names = ["Alex", "Brian", "Charlie"];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("FlutterZero"),
        ),
        body: ListView.builder(
          key: const ValueKey(0),
          itemCount: names.length,
          itemBuilder: (context, index) {
            return Slidable(
              startActionPane: ActionPane(
                motion: DrawerMotion(),
                children: [
                  SlidableAction(
                    autoClose: true,
                    onPressed: (value) {
                      print('Calling ${names[index]}');
                    },
                    backgroundColor: Colors.lightGreen,
                    foregroundColor: Colors.white,
                    icon: Icons.phone,
                    label: 'Call',
                  ),
                ],
              ),
              endActionPane: ActionPane(
                motion: DrawerMotion(),
                children: [
                  SlidableAction(
                    onPressed: (value) => setState(() {
                      names.removeAt(index);
                    }),
                    backgroundColor: Colors.red,
                    foregroundColor: Colors.white,
                    icon: Icons.delete,
                    label: 'Delete',
                  ),
                ],
              ),
              child: ListTile(
                leading: Icon(Icons.person),
                title: Text(
                  names[index],
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 20,
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次