【Flutter】Slidableでスワイプした要素が自動で戻らない|1つだけスワイプ表示させる方法

ListViewの要素にSlidableを実装したけど複数の要素がスワイプされたままで自動で戻らない場合の対処法を紹介します。

SlidableAutoCloseBehaviorSlidableを使用しているListViewなどにラップすることで1つの要素のみスワイプ表示させることができます。

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

目次

Slidableで1つだけスライド表示させる方法

SlidableAutoCloseBehavior(
  closeWhenTapped: true,
  child: ListView.builder(
    key: const ValueKey(0),
    itemCount: ...,
    itemBuilder: (context, index) {
      return Slidable(...);
    },
  ),
),

ListViewの要素をSlidableでラップしている場合は、ListViewSlidableAutoCloseBehaviorでラップしcloseWhenTapped: trueにすることで1つの要素のみスライド表示できます。

closeWhenTappedtrueにすることで、ListViewをタップすると現在スワイプ表示されている要素が閉じます。

SlidableAutoCloseBehaviorあり

SlidableAutoCloseBehaviorなし

サンプルコード

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: SlidableAutoCloseBehavior(
          closeWhenTapped: true,
          child: 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をコピーしました!
目次