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

Question

■解決したいこと

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('レシピ追加'),
          ),
        ),
      ),
    );
  }
}

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

Answer 1

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はアプリ内で１つで良いので、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()),
                        );
                      },
                    );
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Comments

[ckr]

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

[nskhei]

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

[ckr]

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