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

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

ただいまの
回答率

88.78%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 189

chiaki-kjwr

score 19

■解決したいこと

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

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

■エラー内容

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

void main() => runApp(CookApp());

class CookApp extends StatelessWidget {
  var titleText = 'cookapp';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          leading: Icon(Icons.menu),
          title: Text('レシピ一覧'),
        ),
        body: Container(
          child: Center(
            child: Column(children: <Widget>[
              Text(titleText),

              RaisedButton(
                child: Text("Button"),
                color: Colors.orange,
                textColor: Colors.white,
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => AddRecipe()),
                  );
                },
              ),
            ]),
          ),
        ),
      ),
    );
  }
}
import 'package:flutter/material.dart';
//import 'package:mytodoapp/main.dart';

//main関数は必ず記載する
void main() => runApp(AddRecipe());

class AddRecipe extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //scaffoldの中でappBarを使用
        appBar: AppBar(
          title: Text('レシピ追加画面'),
          leading: Icon(Icons.add_alert),
        ),
        body: Container(
          child: Center(
            child: Text('レシピ追加'),
          ),
        ),
      ),
    );
  }
}

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

// main.dart

import 'package:flutter/material.dart';
import 'package:mytodoapp/add_recipe_page.dart';

void main() => runApp(CookApp());

class CookApp extends StatelessWidget {
  var titleText = 'cookapp';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(titleText: titleText),
    );
  }
}

class Home extends StatelessWidget {
  final String titleText;

  const Home({this.titleText});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(Icons.menu),
        title: Text('レシピ一覧'),
      ),
      body: Container(
        child: Center(
          child: Column(children: <Widget>[
            Text(titleText),
            RaisedButton(
              child: Text("Button"),
              color: Colors.orange,
              textColor: Colors.white,
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => AddRecipe()),
                );
              },
            ),
          ]),
        ),
      ),
    );
  }
}

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

// add_recipe_page.dart

import 'package:flutter/material.dart';

class AddRecipe extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('レシピ追加画面'),
        leading: Icon(Icons.add_alert),
      ),
      body: Container(
        child: Center(
          child: Text('レシピ追加'),
        ),
      ),
    );
  }
}

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

class CookApp extends StatelessWidget {
  var titleText = 'cookapp';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          leading: Icon(Icons.menu),
          title: Text('レシピ一覧'),
        ),
        body: Container(
          child: Center(
            child: Column(
              children: <Widget>[
                Text(titleText),
                // ここがポイント
                Builder(
                  builder: (context) {
                    return RaisedButton(
                      child: Text("Button"),
                      color: Colors.orange,
                      textColor: Colors.white,
                      onPressed: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(builder: (context) => AddRecipe()),
                        );
                      },
                    );
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/09/28 02:30

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

    キャンセル

  • 2020/09/28 08:51

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

    キャンセル

  • 2020/09/28 10:53

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

    キャンセル

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

  • ただいまの回答率 88.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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