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

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

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

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

Dart

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

Q&A

解決済

1回答

1400閲覧

Flutter(Dart)のDismissibleエラー回避方法

matsumotokazuma

総合スコア5

Flutter

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

Dart

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

0グッド

0クリップ

投稿2020/01/09 15:20

前提・実現したいこと

Flutter(Dart)を用いて簡易的なToDoアプリを作成しています。
ToDoタスクのリストの削除処理を構築している中で、下記のようなエラーが出ましたが、解決できず大変困っています。
初心者なので、ソースコードが汚いですが、どなたか力を貸していただけると助かります。。

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

削除したeidgetがまた構造の中にあるためエラー発生。

Performing hot reload... Reloaded 1 of 478 libraries in 396ms. flutter: ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ flutter: The following assertion was thrown building Dismissible-[<'0'>](dirty, dependencies: flutter: [Directionality], state: _DismissibleState#74b1e(tickers: tracking 2 tickers)): flutter: A dismissed Dismissible widget is still part of the tree. flutter: Make sure to implement the onDismissed handler and to immediately remove the Dismissible widget from flutter: the application once that handler has fired. flutter: flutter: The relevant error-causing widget was: flutter: Dismissible-[<'0'>] flutter: file:///Users/kazuma/Desktop/myproject/flutter-study/todo_app/lib/main.dart:53:20 flutter: flutter: When the exception was thrown, this was the stack: flutter: #0 _DismissibleState.build.<anonymous closure> (package:flutter/src/widgets/dismissible.dart:526:11) flutter: #1 _DismissibleState.build (package:flutter/src/widgets/dismissible.dart:535:8) flutter: #2 StatefulElement.build (package:flutter/src/widgets/framework.dart:4334:27) flutter: #3 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4223:15) flutter: #4 Element.rebuild (package:flutter/src/widgets/framework.dart:3947:5) flutter: #5 StatefulElement.update (package:flutter/src/widgets/framework.dart:4413:5) flutter: #6 Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15) flutter: #7 SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:545(ddd78475600b5492fc67889427724d06.png)════════════════════════════════════════════════════════════════════════════════════════════════════

エラー説明

上記のToDOリストを下から順にスワイプして削除するとエラーにならないです。
test3→test2→test1

一方、下から順に削除しないとエラーになります。
test3,test2をスワイプして削除する前にtest1 を削除した時点で上記のエラー。

該当のソースコード

エラー箇所抜粋
下記の return Dismissibleでエラーが発生。

Dart

1 2 Widget build(BuildContext context) => Scaffold( 3 key: _scaffoldKey, 4 appBar: AppBar( 5 title: Text('Todoリスト'), 6 ), 7 floatingActionButton: FloatingActionButton( 8 child: Icon(Icons.add), 9 onPressed: () { 10 // Todo入力画面への遷移 11 _navigateAndInputTodo(context); 12 }, 13 ), 14 body: ListView.builder( 15 itemCount: _todos.length, //ここで表示可能なリスト数を制限しないと、表示できなくなった時にエラーになる。 16 itemBuilder: (BuildContext context, int index) { 17 return Dismissible( //**ここでエラー発生** 18 // KeyはFlutterが要素を一意に特定できるようにするための値を設定する。 19 key: Key(index.toString()), 20 // onDismissedの中にスワイプされた時の動作を記述する。 21 // directionにはスワイプの方向が入るため、方向によって処理を分けることができる。 22 onDismissed: (direction) { 23 setState(() { 24 // スワイプされた要素をデータから削除する 25 _todos.removeAt(index); 26 }); 27 // スワイプ方向がendToStart(画面左から右)の場合の処理 28 if (direction == DismissDirection.endToStart) { 29 Scaffold.of(context).removeCurrentSnackBar(); 30 Scaffold.of(context) 31 .showSnackBar(SnackBar(content: Text("削除しました"))); 32 // スワイプ方向がstartToEnd(画面右から左)の場合の処理 33 } else { 34 Scaffold.of(context).removeCurrentSnackBar(); 35 Scaffold.of(context) 36 .showSnackBar(SnackBar(content: Text("削除しました"))); 37 } 38 }, 39 // スワイプ方向がendToStart(画面左から右)の場合のバックグラウンドの設定 40 background: Container( 41 alignment: Alignment.centerLeft, 42 color: Colors.redAccent[700], 43 child: Padding( 44 padding: EdgeInsets.fromLTRB(20.0, 0.0, 0.0, 0.0), 45 child: Icon(Icons.delete_forever, color: Colors.white)), 46 ), 47 48 // スワイプ方向がstartToEnd(画面右から左)の場合のバックグラウンドの設定 49 secondaryBackground: Container(color: Colors.blue), 50 51 child: Card( 52 child: ListTile( 53 title: Text(_todos[index].title), 54 onTap: () { 55 Navigator.push( 56 context, 57 MaterialPageRoute( 58 builder: (context) => 59 DetailScreen(todo: _todos[index])), 60 ); 61 }), 62 ), 63 ); 64 }, 65 ), 66 ); 67

ソース全量
https://github.com/kazumaz/flutter-study/blob/master/todo_app/lib/main.dart

試したこと

下記の記事などを参考に実装しているのですが、解決には至らず。。
https://tutorialmore.com/questions-273759.htm

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

(base) kazumanoMacBook-Air:todo_app kazuma$ flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, v1.12.13+hotfix.5, on Mac OS X 10.15.1 19B88, locale ja-JP) [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2) [✓] Xcode - develop for iOS and macOS (Xcode 11.3) [✓] Android Studio (version 3.5) [!] IntelliJ IDEA Community Edition (version 2019.2.4) ✗ Flutter plugin not installed; this adds Flutter specific functionality. ✗ Dart plugin not installed; this adds Dart specific functionality. [✓] VS Code (version 1.41.1) [✓] Connected device (1 available) ! Doctor found issues in 1 category. (base) kazumanoMacBook-Air:todo_app kazuma$

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

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

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

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

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

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

guest

回答1

0

ベストアンサー

DismissiblekeyKey(index.toString())を指定しているのが原因だと思います。
これだと、途中のTODOが削除された場合、削除したindexが他のTODOで使いまわされてしまい、不整合が起きるので、エラーになっているようです。

DismissiblekeyObjectKey(_todos[index])にするとTODOごとにユニークなキーになるので、エラーが発生しなくなりました。

投稿2020/01/10 23:15

編集2020/01/10 23:23
popobot

総合スコア6586

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

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

matsumotokazuma

2020/01/11 01:31

popobot様 ご回答ありがとうございます。私の方でも試したところ、無事解消されました。 心から感謝しております。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問