質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

1回答

2580閲覧

flutter_slidableのボタンを押すと、Listを削除するものを作りたいです

taigayamamoto

総合スコア0

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

0グッド

0クリップ

投稿2021/10/16 11:39

編集2022/01/12 10:55

前提・実現したいこと

flutter_slidableをスライドさせ、「Delecate」を押すと押したリストが消えるようにしたいです。

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

IconSlideAction( caption: 'Delete', color: Colors.red, icon: Icons.delete, onTap: () => setState(() { todoList.remove(String); })

Delecateを押したときの反応として、上記のようなコードにしました。
しかし、Delecateを押してもリストは削除されず困っています。

該当のソースコード

Flutte

1import 'package:flutter/material.dart'; 2import 'package:flutter_slidable/flutter_slidable.dart'; 3void main() { 4 // 最初に表示するWidget 5 runApp(MyTodoApp()); 6} 7 8class MyTodoApp extends StatelessWidget { 9 @override 10 Widget build(BuildContext context) { 11 return MaterialApp( 12 // 右上に表示される"debug"ラベルを消す 13 debugShowCheckedModeBanner: false, 14 // アプリ名 15 title: 'My Todo App', 16 theme: ThemeData( 17 // テーマカラー 18 primarySwatch: Colors.blue, 19 visualDensity: VisualDensity.adaptivePlatformDensity, 20 ), 21 // リスト一覧画面を表示 22 home: TodoListPage(), 23 ); 24 } 25} 26 27// リスト一覧画面用Widget 28class TodoListPage extends StatefulWidget { 29 @override 30 _TodoListPageState createState() => _TodoListPageState(); 31} 32 33class _TodoListPageState extends State<TodoListPage> { 34 // Todoリストのデータ 35 List<String> todoList = []; 36 37 @override 38 Widget build(BuildContext context) { 39 double _width = MediaQuery.of(context).size.width; 40 double _height = MediaQuery.of(context).size.height; 41 return Scaffold( 42 // AppBarを表示し、タイトルも設定 43 appBar: AppBar( 44 title: Text('リスト一覧'), 45 ), 46 // データを元にListViewを作成 47 body: Container( 48 // 背景色 49 height: _height, 50 width: _width, 51 decoration: BoxDecoration( 52 gradient: LinearGradient( 53 colors: [ 54 const Color(0xffe4a972).withOpacity(0.6), 55 const Color(0xff9941d8).withOpacity(0.6), const Color(0xff9941d8).withOpacity(0.6), 56 ], 57 begin: Alignment.topRight, 58 end: Alignment.bottomLeft, 59 ), 60 ), 61 62 63 64 child: 65 ListView.builder( 66 itemCount: todoList.length, 67 itemBuilder: (context, index) { 68 return Slidable( 69 70 actionPane: SlidableDrawerActionPane(), 71 actionExtentRatio: 0.25, 72 child: Container( 73 color: Colors.white, 74 child: ListTile( 75 leading: CircleAvatar( 76 backgroundColor: Colors.indigoAccent, 77 child: Text('s'), 78 foregroundColor: Colors.white, 79 ), 80 title: Text( todoList[index]), 81 82 ), 83 ), 84 actions: <Widget>[ 85 IconSlideAction( 86 caption: 'Archive', 87 color: Colors.blue, 88 icon: Icons.archive, 89 onTap: () => ('Archive'), 90 ), 91 IconSlideAction( 92 caption: 'Share', 93 color: Colors.indigo, 94 icon: Icons.share, 95 onTap: () => ('Share'), 96 ), 97 ], 98 secondaryActions: <Widget>[ 99 IconSlideAction( 100 caption: 'More', 101 color: Colors.black45, 102 icon: Icons.more_horiz, 103 onTap: () => ('More'), 104 ), 105 IconSlideAction( 106 caption: 'Delete', 107 color: Colors.red, 108 icon: Icons.delete, 109 onTap: () => setState(() { 110 todoList.remove(String); 111 }) 112 113 ), 114 ], 115 ); 116 117 118 119 }, 120 ), 121 ), 122 floatingActionButton:FloatingActionButton( 123 onPressed: () async { 124 // "push"で新規画面に遷移 125 // リスト追加画面から渡される値を受け取る 126 final newListText = await Navigator.of(context).push( 127 MaterialPageRoute(builder: (context) { 128 // 遷移先の画面としてリスト追加画面を指定 129 return TodoAddPage(); 130 }), 131 ); 132 if (newListText != null) { 133 // キャンセルした場合は newListText が null となるので注意 134 setState(() { 135 // リスト追加 136 todoList.add(newListText); 137 }); 138 } 139 }, 140 child: Icon(Icons.add), 141 ), 142 143 ); 144 145 146 } 147} 148 149class TodoAddPage extends StatefulWidget { 150 @override 151 _TodoAddPageState createState() => _TodoAddPageState(); 152} 153 154class _TodoAddPageState extends State<TodoAddPage> { 155 // 入力されたテキストをデータとして持つ 156 String _text = ''; 157 158 // データを元に表示するWidget 159 @override 160 Widget build(BuildContext context) { 161 return Scaffold( 162 appBar: AppBar( 163 title: Text('リスト追加'), 164 ), 165 body: Container( 166 // 余白を付ける 167 padding: EdgeInsets.all(64), 168 child: Column( 169 mainAxisAlignment: MainAxisAlignment.center, 170 children: <Widget>[ 171 // 入力されたテキストを表示 172 Text(_text, style: TextStyle(color: Colors.blue)), 173 const SizedBox(height: 8), 174 // テキスト入力 175 TextField( 176 // 入力されたテキストの値を受け取る(valueが入力されたテキスト) 177 onChanged: (String value) { 178 // データが変更したことを知らせる(画面を更新する) 179 setState(() { 180 // データを変更 181 _text = value; 182 }); 183 }, 184 ), 185 const SizedBox(height: 8), 186 Container( 187 // 横幅いっぱいに広げる 188 width: double.infinity, 189 // リスト追加ボタン 190 child: ElevatedButton( 191 onPressed: () { 192 // "pop"で前の画面に戻る 193 // "pop"の引数から前の画面にデータを渡す 194 Navigator.of(context).pop(_text); 195 }, 196 child: Text('リスト追加', style: TextStyle(color: Colors.white)), 197 ), 198 ), 199 const SizedBox(height: 8), 200 Container( 201 // 横幅いっぱいに広げる 202 width: double.infinity, 203 // キャンセルボタン 204 child: TextButton( 205 // ボタンをクリックした時の処理 206 onPressed: () { 207 // "pop"で前の画面に戻る 208 Navigator.of(context).pop(); 209 }, 210 child: Text('キャンセル'), 211 ), 212 ), 213 ], 214 ), 215 216 )); 217 } 218} 219 220

試したこと

主に以下のサイトを参考を参考にしました。
https://masamarun.com/flutter-slidable/
https://webbibouroku.com/Blog/Article/flutter-list-item-delete

おそらく、記事を見る限りremoveを使うはずなのは
理解しました。

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

このように書けばよいと思います。

flutter

1IconSlideAction( 2 caption: 'Delete', 3 color: Colors.red, 4 icon: Icons.delete, 5 onTap: () => setState(() { 6 todoList.remove(todoList[index]); 7 }));

投稿2021/10/29 08:21

flutter_labo

総合スコア110

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問