【Flutter】別のSlidableをクリックしてもスライドが元に戻らない時の対処法

2022 4/05

2022年3月6日 2022年4月5日

「Slidable」をListTileに実装してスライドできるようになったけど、別のSlidableをクリックしてもスライドが元に戻らない！って方のために対処法を紹介します。

問題点：スライドが元に戻らない

上画像ではListViewでListTileを並べており、ListTileにSlidbleを実装しています。ただし、SlidableでListTileをラップしただけではスライドさせた後に別のSlidableをクリックしても元に戻りません。

//別のSlidableをクリックしても閉じない
home: Scaffold(
  ...
  body: ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) {
      final item = items[index];
      return Slidable(
        ...

解決策：SlidableAutoCloseBehaviorでラップ

////別のSlidableをクリックすると自動で閉じる
home: Scaffold(
  ...
  body: SlidableAutoCloseBehavior( //ここ！
    child: ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        final item = items[index];
        return Slidable(
          ...

別のSlidableをクリックした際に自動的にスライドを閉じるようにするには、Slidableの親Widgetを「SlidableAutoCloseBehavior」でラップしてあげます。これでスライドさせたままのSlidableが自動で閉じるようになります。

今回の場合は「ListView」を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> {
  final items = List.generate(10, (index) => 'Hello World $index');

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: SlidableAutoCloseBehavior(
          child: ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index) {
              final item = items[index];
              return Slidable(
                endActionPane: ActionPane(
                  motion: ScrollMotion(),
                  children: [
                    SlidableAction(
                      onPressed: (context) {
                        print('「Hello World $index」を削除');
                        setState(() {
                          items.removeAt(index);
                        });
                      },
                      backgroundColor: Color(0xFFFE4A49),
                      foregroundColor: Colors.white,
                      icon: Icons.delete,
                      label: '削除',
                    ),
                  ],
                ),
                child: ListTile(
                  title: Text(item),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

以上です。