onPressedの実装でエラーが発生してしまう

前提・実現したいこと

FlutterでonPressedをいくつか実装しようとしていたのですが、
上部のボタンは反応が無く、下部のボタンを押した時は以下のエラーメッセージが発生しました。
初学者なので根本的な間違いがあればご指摘いただけると嬉しいです。

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

Navigator operation requested with a context that does not include a Navigator.

Flutter
1import 'package:flutter/material.dart';
2
3import 'next_page.dart';
4
5void main() {
6  runApp(App());
7}
8
9class App extends StatelessWidget {
10  @override
11  Widget build(BuildContext context) {
12    return MaterialApp(
13      home: Scaffold(
14        appBar: AppBar(
15          backgroundColor: Colors.white.withOpacity(0.0),
16          elevation: 0.0,
17        ),
18        extendBodyBehindAppBar: true,
19        body: Container(
20          child: Column(
21            children: <Widget>[
22              RaisedButton.icon(
23                icon: Icon(
24                  Icons.add_box,
25                  color: Colors.white,
26                ),
27                label: Text("New"),
28                onPressed: () {
29                  Navigator.push(
30                    context,
31                    MaterialPageRoute(
32                      builder: (context) => NextPage(),
33                    ),
34                  );
35                },
36                color: Colors.orange,
37                textColor: Colors.white,
38                shape: RoundedRectangleBorder(
39                  borderRadius: BorderRadius.circular(10.0),
40                ),
41              ),
42              TextField(
43                decoration: InputDecoration(
44                    hintText: '入力してください'
45                ),
46              ),
47              RaisedButton.icon(
48                icon: Icon(
49                  Icons.check_box,
50                  color: Colors.white,
51                ),
52                label: Text("Next"),
53                onPressed: () {
54                  Navigator.push(
55                    context,
56                    MaterialPageRoute(
57                      builder: (context) => NextPage(),
58                    ),
59                  );
60                },
61                color: Colors.orange,
62                textColor: Colors.white,
63                shape: RoundedRectangleBorder(
64                  borderRadius: BorderRadius.circular(10.0),
65                ),
66              ),
67            ],
68          )
69        ),
70      ),
71    );
72  }
73}
74

行動規範の内容に同意します

回答2件

まず上のボタンが反応しない原因ですが、extendBodyBehindAppBar: trueが設定されているため、ボタンがAppBarの後ろに隠れてしまっているからだと思います。AppBarの背景色が透明に設定されているので視覚的に見えてはいますが、押すことはできません。

この解決策としては

AppBarを削除する
extendBodyBehindAppBar: trueをfalseに変える
ScaffoldのBody全体をSafeAreaウィジェットでラップする

などが考えられます。

次に、下のボタンを押した時に発生する

Navigator operation requested with a context that does not include a Navigator.

というエラーですが、これについては非常にややこしいので、詳細は自分で調べて欲しいです。

一応ざっくり原因を説明すると、
NavigatorにアクセスするためにはcontextがMaterialAppを含んでいる必要があるのですが、質問のコードでは、以下のようにNavigator.pushに**MaterialAppを含んでいないcontext**が渡されているためです。

dart
1class App extends StatelessWidget {
2  @override
3  Widget build(BuildContext context) { // ←このcontext
4    return MaterialApp(
5      home: Scaffold(
6        appBar: AppBar(
7          backgroundColor: Colors.white.withOpacity(0.0),
8          elevation: 0.0,
9        ),
10        extendBodyBehindAppBar: true,
11        body: Container(
12          child: Column(
13            children: <Widget>[
14              RaisedButton.icon(
15                icon: Icon(
16                  Icons.add_box,
17                  color: Colors.white,
18                ),
19                label: Text("New"),
20                onPressed: () {
21                  Navigator.push(
22                    context, 　// ←このcontext
23                    MaterialPageRoute(
24                      builder: (context) => NextPage(),
25                    ),
26                  );
27                },

このエラーの解決策ですが、以下のようにHomeというようなウィジェットを作って、ページ部分の実装をそちらに移してしまうのが良いと思います。

これでNavigator.pushには**MaterialAppを含んだcontext**が渡されるので、Navigatorにアクセスできるようになり、エラーが消えるはずです。

dart
1class App extends StatelessWidget {
2  @override
3  Widget build(BuildContext context) {
4    return MaterialApp(
5      home: Home(),
6    );
7  }
8}
9
10class Home extends StatelessWidget {
11  @override
12  // ここのcontextは上位ツリーで提供されたMaterialAppを含んでいる。
13  Widget build(BuildContext context) {
14    return Scaffold(
15      appBar: AppBar(
16        backgroundColor: Colors.white.withOpacity(0.0),
17        elevation: 0.0,
18      ),
19      body: Container(
20        child: Column(
21          children: <Widget>[
22            RaisedButton.icon(
23              icon: Icon(
24                Icons.add_box,
25                color: Colors.white,
26              ),
27              label: Text("New"),
28              onPressed: () {
29                Navigator.push(
30                  context,
31                  MaterialPageRoute(
32                    builder: (context) => NextPage(),
33                  ),
34                );
35              },
36              color: Colors.orange,
37              textColor: Colors.white,
38              shape: RoundedRectangleBorder(
39                borderRadius: BorderRadius.circular(10.0),
40              ),
41            ),
42            TextField(
43              decoration: InputDecoration(hintText: '入力してください'),
44            ),
45            RaisedButton.icon(
46              icon: Icon(
47                Icons.check_box,
48                color: Colors.white,
49              ),
50              label: Text("Next"),
51              onPressed: () {
52                Navigator.push(
53                  context,
54                  MaterialPageRoute(
55                    builder: (context) => NextPage(),
56                  ),
57                );
58              },
59              color: Colors.orange,
60              textColor: Colors.white,
61              shape: RoundedRectangleBorder(
62                borderRadius: BorderRadius.circular(10.0),
63              ),
64            ),
65          ],
66        ),
67      ),
68    );
69  }
70}
71

投稿2020/09/10 12:10

nskhei

総合スコア704

ixei

2020/09/10 13:25

両方について解決致しました！ありがとうございます。勝手にAppbarは残さなければならないものと勘違いしていました。下部についてはワンクッション挟んでcontextとMaterialAppを紐付ける必要があるということですね！難全く気づけませんでした、、

行動規範の内容に同意します

ベストアンサー

上のボタンが押せなかったのは、AppBarが見えない状態ではあったものの、Widgetとして存在していたからだと思います。
エラーメッセージが出る箇所に関しては、Scaffoldの前にBuilderを挟んで対処しています。

dart
1import 'package:flutter/material.dart';
2
3import 'next_page.dart';
4
5void main() {
6  runApp(MyApp());
7}
8
9class MyApp extends StatelessWidget {
10  @override
11  Widget build(BuildContext context) {
12    return MaterialApp(
13      home: Builder(
14        builder: (context) => Scaffold(
15          // appBar: AppBar(
16          //   backgroundColor: Colors.white.withOpacity(0.0),
17          //   elevation: 0.0,
18          // ),
19          // extendBodyBehindAppBar: true,
20          body: Container(
21            child: Column(
22              children: <Widget>[
23                RaisedButton.icon(
24                  icon: Icon(
25                    Icons.add_box,
26                    color: Colors.white,
27                  ),
28                  label: Text("New"),
29                  onPressed: () {
30                    Navigator.push(
31                      context,
32                      MaterialPageRoute(
33                        builder: (context) => NextPage(),
34                      ),
35                    );
36                  },
37                  color: Colors.orange,
38                  textColor: Colors.white,
39                  shape: RoundedRectangleBorder(
40                    borderRadius: BorderRadius.circular(10.0),
41                  ),
42                ),
43                TextField(
44                  decoration: InputDecoration(
45                      hintText: '入力してください'
46                  ),
47                ),
48                RaisedButton.icon(
49                  icon: Icon(
50                    Icons.check_box,
51                    color: Colors.white,
52                  ),
53                  label: Text("Next"),
54                  onPressed: () {
55                    Navigator.push(
56                      context,
57                      MaterialPageRoute(
58                        builder: (context) => NextPage(),
59                      ),
60                    );
61                  },
62                  color: Colors.orange,
63                  textColor: Colors.white,
64                  shape: RoundedRectangleBorder(
65                    borderRadius: BorderRadius.circular(10.0),
66                  ),
67                ),
68              ],
69            )
70          ),
71        ),
72      ),
73    );
74  }
75}