作成したリストをスワイプで削除したい

前提

flutterで入力内容を登録するとリストを作成し、
そのリストをスワイプで削除するようなプログラムを勉強しています

実現したいこと

作成したリストをスワイプで消したい

発生している問題・エラーメッセージ

リストをスワイプで削除したいができない

該当のソースコード

dart
1import 'package:flutter/material.dart';
2import 'package:shared_preferences/shared_preferences.dart';
3
4void main() {
5  runApp(const MyApp());
6}
7
8class MyApp extends StatelessWidget {
9  const MyApp({Key? key}) : super(key: key);
10
11  @override
12  Widget build(BuildContext context) {
13    return MaterialApp(
14      title: 'Flutter Demo',
15      theme: ThemeData(
16        primarySwatch: Colors.blue,
17      ),
18      home: const MyHomePage(),
19    );
20  }
21}
22
23class MyHomePage extends StatefulWidget {
24  const MyHomePage({Key? key}) : super(key: key);
25
26  @override
27  State<MyHomePage> createState() => _MyHomePageState();
28}
29
30class _MyHomePageState extends State<MyHomePage> {
31
32  List<String> todolist=[];
33  late String? tmp;
34
35  late TextEditingController _todoInputController;
36
37  @override
38  void initState() {
39    // TODO: implement initState
40    super.initState();
41    _todoInputController = TextEditingController();
42  }
43
44  @override
45  void dispose() {
46    // TODO: implement dispose
47    super.dispose();
48    _todoInputController.dispose();
49  }
50
51
52  @override
53  Widget build(BuildContext context) {
54
55    return Scaffold(
56      appBar: AppBar(
57        title: Text('ToDo'),
58      ),
59      body: Column(
60        children: [
61          Padding(
62              padding: EdgeInsets.all(20),
63            child: TextField(
64              controller: _todoInputController,
65              decoration: InputDecoration(hintText: '入力してください'),
66            ),
67          ),
68          Padding(
69              padding: EdgeInsets.all(20),
70            child: RaisedButton(
71              onPressed: ()async{
72                var prefs = await SharedPreferences.getInstance();
73                await prefs.setString('code', _todoInputController.text);
74
75                tmp = await prefs.getString('code');
76
77                setState(() {
78                  print(tmp);
79
80                  if(tmp!.length>0){
81                    todolist.add(tmp!);
82                    _todoInputController.clear();
83                  };
84
85                });
86              },
87            ),
88          ),
89          Expanded(
90              child:ListView.builder(
91                itemCount: todolist.length,
92                itemBuilder: (BuildContext context,int index){
93                  return Container(
94                    child: ListTile(
95                      leading: Icon(Icons.circle),
96                      title: Text(
97                          ("$index : ${todolist[index]}")
98                      ),
99                      trailing: Dismissible(
100                         onDismissed: (direction){
101                            setState((){todolist.removeAt(index);});
102                         },
103                         key: UniqueKey(),
104                         child: ListTile(
105                           title: Text(todolist[index]),
106                         ),
107                      ),
108                    ),
109                  );
110                },
111              ),
112          ),
113        ],
114      ),
115    );
116  }
117}

試したこと

RowでDismissibleを追加したが、RenderBox was not laid out:でできない

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

回答1件

ベストアンサー

私の環境とエラーメッセージが異なりますが、itemBuilderを次のようにすると、うまくいきませんか。

dart
1              itemBuilder: (BuildContext context, int index) {
2                return Dismissible(
3                  onDismissed: (direction) {
4                    setState(() {
5                      todolist.removeAt(index);
6                    });
7                  },
8                  key: UniqueKey(),
9                  child: ListTile(
10                    leading: Icon(Icons.circle),
11                    title: Text(("$index : ${todolist[index]}")),
12                  ),
13                );
14              },

直接のエラーはListTileのtrailingに可変長Widgetを置いたんで、幅計算がうまくいかなかったというものだと思います。

次にDismissibleの使い方。
悪いというわけではないんだけど、FlutterのAPIでもDismissibleの子供としてListTileを配置してます。Dismissibleは消したいウィジェットを子供として登録するといった用途だと思います。
元実装ではtrailing部分を消すという意図を持ったものに見えてしまいます。

投稿2022/08/31 04:52

ta.fu

総合スコア1417

回答へのコメント

zisinnasi

2022/08/31 05:43

できました、ありがとうございます！＞FlutterのAPIでもDismissibleの子供としてListTileを配置してます。Dismissibleは消したいウィジェットを子供として登録するといった用途だと思います。なるほどそういうことだったんですね… Dismissibleの子供としてListTileということを覚えておきます勉強になりました