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

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

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

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

Android Studio

Android Studioは、 Google社によって開発された、 Androidのネイティブアプリケーション開発に特化した統合開発ツールです。

Dart

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

Q&A

解決済

1回答

6506閲覧

【Flutter】画面遷移でのエラーについて

ckr

総合スコア23

Flutter

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

Android Studio

Android Studioは、 Google社によって開発された、 Androidのネイティブアプリケーション開発に特化した統合開発ツールです。

Dart

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

0グッド

0クリップ

投稿2020/09/27 14:14

■解決したいこと

Flutter(Dart)を用いて簡単なアプリ開発を行っています。
ボタンを押すと次の画面に画面遷移するようなコードを記載したいのですが、
下記の様なエラーが出ております。

何かヒントとなる様なことがございましたら教えていただけますと幸いです。

■エラー内容

iterm

1 2I/flutter (23646): ══╡ EXCEPTION CAUGHT BY GESTURE ╞═══════════════════════════════════════════════════════════════════ 3I/flutter (23646): The following assertion was thrown while handling a gesture: 4I/flutter (23646): Navigator operation requested with a context that does not include a Navigator. 5I/flutter (23646): The context used to push or pop routes from the Navigator must be that of a widget that is a 6I/flutter (23646): descendant of a Navigator widget. 7I/flutter (23646): 8I/flutter (23646): When the exception was thrown, this was the stack: 9I/flutter (23646): #0 Navigator.of.<anonymous closure> (package:flutter/src/widgets/navigator.dart:2190:9) 10I/flutter (23646): #1 Navigator.of (package:flutter/src/widgets/navigator.dart:2197:6) 11I/flutter (23646): #2 Navigator.push (package:flutter/src/widgets/navigator.dart:1801:22) 12I/flutter (23646): #3 CookApp.build.<anonymous closure> (package:mytodoapp/main.dart:27:29) 13I/flutter (23646): #4 _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:992:19) 14I/flutter (23646): #5 _InkResponseState.build.<anonymous closure> (package:flutter/src/material/ink_well.dart:1098:38) 15I/flutter (23646): #6 GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:184:24) 16I/flutter (23646): #7 TapGestureRecognizer.handleTapUp (package:flutter/src/gestures/tap.dart:524:11) 17I/flutter (23646): #8 BaseTapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:284:5) 18I/flutter (23646): #9 BaseTapGestureRecognizer.handlePrimaryPointer (package:flutter/src/gestures/tap.dart:219:7) 19I/flutter (23646): #10 PrimaryPointerGestureRecognizer.handleEvent (package:flutter/src/gestures/recognizer.dart:477:9) 20I/flutter (23646): #11 PointerRouter._dispatch (package:flutter/src/gestures/pointer_router.dart:78:12) 21I/flutter (23646): #12 PointerRouter._dispatchEventToRoutes.<anonymous closure> (package:flutter/src/gestures/pointer_router.dart:124:9) 22I/flutter (23646): #13 _LinkedHashMapMixin.forEach (dart:collection-patch/compact_hash.dart:377:8) 23I/flutter (23646): #14 PointerRouter._dispatchEventToRoutes (package:flutter/src/gestures/pointer_router.dart:122:18) 24I/flutter (23646): #15 PointerRouter.route (package:flutter/src/gestures/pointer_router.dart:108:7) 25I/flutter (23646): #16 GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:220:19) 26I/flutter (23646): #17 GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:200:22) 27I/flutter (23646): #18 GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:158:7) 28I/flutter (23646): #19 GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:104:7) 29I/flutter (23646): #20 GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:88:7) 30I/flutter (23646): #24 _invoke1 (dart:ui/hooks.dart:267:10) 31I/flutter (23646): #25 _dispatchPointerDataPacket (dart:ui/hooks.dart:176:5) 32I/flutter (23646): (elided 3 frames from dart:async) 33I/flutter (23646): 34I/flutter (23646): Handler: "onTap" 35I/flutter (23646): Recognizer: 36I/flutter (23646): TapGestureRecognizer#aaa22 37I/flutter (23646): ════════════════════════════════════════════════════════════════════════════════════════════════════ 38I/flutter (23646): Another exception was thrown: Navigator operation requested with a context that does not include a Navigator. 39I/flutter (23646): Another exception was thrown: Navigator operation requested with a context that does not include a Navigator. 40 41

main.dart

1import 'package:flutter/material.dart'; 2import 'package:mytodoapp/add_recipe_page.dart'; 3 4void main() => runApp(CookApp()); 5 6class CookApp extends StatelessWidget { 7 var titleText = 'cookapp'; 8 9 @override 10 Widget build(BuildContext context) { 11 return MaterialApp( 12 home: Scaffold( 13 appBar: AppBar( 14 leading: Icon(Icons.menu), 15 title: Text('レシピ一覧'), 16 ), 17 body: Container( 18 child: Center( 19 child: Column(children: <Widget>[ 20 Text(titleText), 21 22 RaisedButton( 23 child: Text("Button"), 24 color: Colors.orange, 25 textColor: Colors.white, 26 onPressed: () { 27 Navigator.push( 28 context, 29 MaterialPageRoute(builder: (context) => AddRecipe()), 30 ); 31 }, 32 ), 33 ]), 34 ), 35 ), 36 ), 37 ); 38 } 39} 40

add_recipe.dart(main.dartからの画面遷移先)

1 2import 'package:flutter/material.dart'; 3//import 'package:mytodoapp/main.dart'; 4 5//main関数は必ず記載する 6void main() => runApp(AddRecipe()); 7 8class AddRecipe extends StatelessWidget { 9 @override 10 Widget build(BuildContext context) { 11 return MaterialApp( 12 home: Scaffold( 13 //scaffoldの中でappBarを使用 14 appBar: AppBar( 15 title: Text('レシピ追加画面'), 16 leading: Icon(Icons.add_alert), 17 ), 18 body: Container( 19 child: Center( 20 child: Text('レシピ追加'), 21 ), 22 ), 23 ), 24 ); 25 } 26} 27

追記すべき情報があればご教示いただければと思います。
何卒宜しくお願い致します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

main.dartを以下のように書いて試してみてください。

dart

1// main.dart 2 3import 'package:flutter/material.dart'; 4import 'package:mytodoapp/add_recipe_page.dart'; 5 6void main() => runApp(CookApp()); 7 8class CookApp extends StatelessWidget { 9 var titleText = 'cookapp'; 10 11 12 Widget build(BuildContext context) { 13 return MaterialApp( 14 home: Home(titleText: titleText), 15 ); 16 } 17} 18 19class Home extends StatelessWidget { 20 final String titleText; 21 22 const Home({this.titleText}); 23 24 25 Widget build(BuildContext context) { 26 return Scaffold( 27 appBar: AppBar( 28 leading: Icon(Icons.menu), 29 title: Text('レシピ一覧'), 30 ), 31 body: Container( 32 child: Center( 33 child: Column(children: <Widget>[ 34 Text(titleText), 35 RaisedButton( 36 child: Text("Button"), 37 color: Colors.orange, 38 textColor: Colors.white, 39 onPressed: () { 40 Navigator.push( 41 context, 42 MaterialPageRoute(builder: (context) => AddRecipe()), 43 ); 44 }, 45 ), 46 ]), 47 ), 48 ), 49 ); 50 } 51}

あと、MaterialAppはアプリ内で1つで良いので、AddRecipe内には書かない方が良いです。
同様に、main関数もmain.dart内だけでOKです。

dart

1// add_recipe_page.dart 2 3import 'package:flutter/material.dart'; 4 5class AddRecipe extends StatelessWidget { 6 7 Widget build(BuildContext context) { 8 return Scaffold( 9 appBar: AppBar( 10 title: Text('レシピ追加画面'), 11 leading: Icon(Icons.add_alert), 12 ), 13 body: Container( 14 child: Center( 15 child: Text('レシピ追加'), 16 ), 17 ), 18 ); 19 } 20}

追記 :
ボタン部分をBuilderで囲むという方法もあります。

dart

1class CookApp extends StatelessWidget { 2 var titleText = 'cookapp'; 3 4 5 Widget build(BuildContext context) { 6 return MaterialApp( 7 home: Scaffold( 8 appBar: AppBar( 9 leading: Icon(Icons.menu), 10 title: Text('レシピ一覧'), 11 ), 12 body: Container( 13 child: Center( 14 child: Column( 15 children: <Widget>[ 16 Text(titleText), 17 // ここがポイント 18 Builder( 19 builder: (context) { 20 return RaisedButton( 21 child: Text("Button"), 22 color: Colors.orange, 23 textColor: Colors.white, 24 onPressed: () { 25 Navigator.push( 26 context, 27 MaterialPageRoute(builder: (context) => AddRecipe()), 28 ); 29 }, 30 ); 31 }, 32 ), 33 ], 34 ), 35 ), 36 ), 37 ), 38 ); 39 } 40} 41

投稿2020/09/27 14:44

編集2020/09/27 23:46
nskhei

総合スコア704

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

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

ckr

2020/09/27 17:30

ご返信いただきありがとうございます。コードを修正し、無事画面遷移の機能が実装できました! いただいたアドバイスも今後の実装に活かしていきます。 ちなみに今回のポイントとしては、classをHomeとCookAppの二つに分けたことが解決のポイントになったということでしょうか。 もしよろしければご教授いただけますと幸いです。 恐れ入りますが、何卒宜しくお願い致します。
nskhei

2020/09/27 23:51

> 今回のポイントとしては、classをHomeとCookAppの2つに分けたことが解決のポイントになったということでしょうか。 そうです、他にもBuilderを使う方法もあるので、回答内に追記させてもらいました。 いずれにしても、MaterialAppは、ThemeやNavigatorの管理を行う特別なWidgetなので、 ・アプリ内で1つだけにする ・Navigator.pushを呼び出す部分との間にはワンクッション置く というのがポイントです。
ckr

2020/09/28 01:53

>nskhei様 早速のご回答、誠にありがとうございます! 非常によく理解できました!次からはMaterialAppは一箇所のみに記載します。 また、MaterialAppの公式ドキュメントも読んでみます。 builderの使い方も非常に参考になりました。 本当にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.54%

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

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

質問する

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

Flutter

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

Android Studio

Android Studioは、 Google社によって開発された、 Androidのネイティブアプリケーション開発に特化した統合開発ツールです。

Dart

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