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

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

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

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

Dart

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

解決済

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

matsumotokazuma
matsumotokazuma

総合スコア0

Flutter

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

Dart

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

1回答

0評価

0クリップ

42閲覧

投稿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

@override Widget build(BuildContext context) => Scaffold( key: _scaffoldKey, appBar: AppBar( title: Text('Todoリスト'), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: () { // Todo入力画面への遷移 _navigateAndInputTodo(context); }, ), body: ListView.builder( itemCount: _todos.length, //ここで表示可能なリスト数を制限しないと、表示できなくなった時にエラーになる。 itemBuilder: (BuildContext context, int index) { return Dismissible( //**ここでエラー発生** // KeyはFlutterが要素を一意に特定できるようにするための値を設定する。 key: Key(index.toString()), // onDismissedの中にスワイプされた時の動作を記述する。 // directionにはスワイプの方向が入るため、方向によって処理を分けることができる。 onDismissed: (direction) { setState(() { // スワイプされた要素をデータから削除する _todos.removeAt(index); }); // スワイプ方向がendToStart(画面左から右)の場合の処理 if (direction == DismissDirection.endToStart) { Scaffold.of(context).removeCurrentSnackBar(); Scaffold.of(context) .showSnackBar(SnackBar(content: Text("削除しました"))); // スワイプ方向がstartToEnd(画面右から左)の場合の処理 } else { Scaffold.of(context).removeCurrentSnackBar(); Scaffold.of(context) .showSnackBar(SnackBar(content: Text("削除しました"))); } }, // スワイプ方向がendToStart(画面左から右)の場合のバックグラウンドの設定 background: Container( alignment: Alignment.centerLeft, color: Colors.redAccent[700], child: Padding( padding: EdgeInsets.fromLTRB(20.0, 0.0, 0.0, 0.0), child: Icon(Icons.delete_forever, color: Colors.white)), ), // スワイプ方向がstartToEnd(画面右から左)の場合のバックグラウンドの設定 secondaryBackground: Container(color: Colors.blue), child: Card( child: ListTile( title: Text(_todos[index].title), onTap: () { Navigator.push( context, MaterialPageRoute( builder: (context) => DetailScreen(todo: _todos[index])), ); }), ), ); }, ), );

ソース全量
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$

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Flutter

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

Dart

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