ListViewでスライドすると削除できて並び替えもできるようにしたい|flutter
flutter doctor
まずリストの並び替えとしてReorderableListViewクラスを使用。
リスト内の項目をドラッグ&ドロップ(ロングタップ移動)で並び替えることができます。
onReorderコールバックを使って、リスト内の項目の順番が変更されたときにリストを更新します。
flutter_slidableというパッケージを使用します
右スライドして削除ボタンを表示する為のもの。
「削除」ボタンをタップすると、対応する項目がリストから削除されます。
古いバージョンと記述方法が違うので、いちおう要チェック。
import 'package:flutter/material.dart'; import 'package:flutter_slidable/flutter_slidable.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return const MaterialApp( home: DragAndDropList(), ); } } class DragAndDropList extends StatefulWidget { const DragAndDropList({super.key}); @override State<DragAndDropList> createState() => _DragAndDropListState(); } class _DragAndDropListState extends State<DragAndDropList> { final List<int> _items = List.generate(50, (index) => index + 1); //50個のリストを作成 @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Drag & Drop List'), ), body: ReorderableListView.builder( itemCount: _items.length, onReorder: _onReorder, //リストを長押しして上下に移動できる、下部に記載 itemBuilder: (context, index) { final item = _items[index]; //上記50個のリストを並べる return _buildSlidable(item); //横スライドで削除できるウィジェット }, ), ); } //横スライドで削除できるウィジェット Widget _buildSlidable(int item) { return Slidable( key: ValueKey(item), startActionPane: ActionPane( motion: const DrawerMotion(), extentRatio: 0.25, children: [ SlidableAction( label: '削除', backgroundColor: Colors.red, icon: Icons.delete, onPressed: (context) { _removeItem(item); }, ), ], ), child: Container( decoration: BoxDecoration( color: Colors.white, boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.5), spreadRadius: 2, blurRadius: 5, offset: const Offset(0, 3), ), ], borderRadius: BorderRadius.circular(10), ), margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 8), padding: const EdgeInsets.all(16), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( '$item', style: const TextStyle(fontSize: 18), ), const Icon( Icons.drag_handle, color: Colors.grey, ), ], ), ), ); } //タップ長押しで上下に移動できる void _onReorder(int oldIndex, int newIndex) { setState(() { if (newIndex > oldIndex) { newIndex -= 1; } final int item = _items.removeAt(oldIndex); _items.insert(newIndex, item); }); } //右スライドした時に削除する void _removeItem(int item) { setState(() { _items.remove(item); }); } }
※ChatGPTで作成して適宜補正したコードです