Flutterで画面遷移を実装したいが、エラーの表示が出てしまう

Question

実現したいこと

ここに実現したいことを箇条書きで書いてください。

• Drawerの設定をところを押すと設定ページへ画面が遷移するようにしたい

前提

ここに質問の内容を詳しく書いてください。
（例）
Flutterでマップアプリを作っています。
画面遷移ができるようにしたいのですが、うまくいきません。エラー内容を調べては見たのですが、改善策がわからないです。

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

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

該当のソースコード

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:footprint_system/achivement_page.dart';
import 'package:footprint_system/setting_page.dart';
import 'package:latlong2/latlong.dart';
import 'package:geolocator/geolocator.dart';
import 'package:geocoding/geocoding.dart';

void main() {
  runApp(MapApp());//引数として与えられたウィジェットツリーをレンダリングしてアプリを起動
}

class MapApp extends StatefulWidget {//Stateとともに記述、状態が変更可能なウィジェット
  @override
  _MapAppState createState() => new _MapAppState();
}

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    throw UnimplementedError();
  }
}


class _MapAppState extends State<MapApp> {
  final MapController _mapController = MapController();//マップの状態を取得したり、変更することができる
  String _title = 'FootprintSystem';//アプリのタイトル
  TextEditingController _searchQueryController = TextEditingController();//TextFieldで入力されたテキストを制御
  List<Location> _searchResults = [];//検索結果の場所のリストを保持するためのリスト,検索結果を表示するためListView.builderで使用される
  double lat = 35.681;//地図上の位置:緯度
  double lng = 139.767;//地図上の位置:経度
  LatLng? tapLatLng;//ユーザが地図上でタップした場所の緯度と経度を保持する
  Position? _position;//デバイスの現在の位置を表す
  List<LatLng> _points = [];//通ってきた道を表現するための位置を格納したリスト
  var currentPosition;//デバイスの現在位置を表し、APIを使用して定期的に更新される
  List<Marker> markers = [];//クリックまたはタップした地点を記録するリスト
  List<CircleMarker> circleMarkers = [];//特定の範囲を示すのに使用するマーカーのリスト

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,//右上のdebugマークの表示を削除する
      title: 'map_app',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes:{//画面遷移するときのルートを指定しておく
        '/setting':(context) => SettingScreen(value: 100,),
        '/achievement':(context) => AchievementScreen(value:100),
      },
      home: Scaffold(
        appBar: AppBar(
          title: Text(_title),
        ),
        // flutter_map設定
        body: FlutterMap(
          mapController: _mapController,//FlutterMapにmapControllerを渡す
          options: MapOptions(//マップの表示に関する設定
              center:  _position != null
                  ? LatLng(lat, lng)
                  : LatLng(35.681167,139.767052),//初期表示される位置を指定
              zoom: 14.0,//ズームの初期値
              maxZoom: 18.0,//ズームの最大値(超えるとスマホだと表示されなくなる)
              interactiveFlags: InteractiveFlag.all,
              enableScrollWheel: true,
              scrollWheelVelocity: 0.005,
              //地図上でタップされた際に実行されるコールバック関数を指定
              onTap: (tapPosition, latLng) {//(ユーザーがタップした画面上の座標、タップされた地点の緯度経度)
                tapLatLng = latLng;
                cleatePin(tapLatLng!);//!はnullでないことを保証するために使用
              }),
          children: [//マップに追加される要素のリスト
            //背景地図読み込み (OSM)
            TileLayer(
              urlTemplate: "https://tile.openstreetmap.jp/{z}/{x}/{y}.png",
            ),
            // サークルマーカー設定
            CircleLayer(
              circles: circleMarkers,
            ),
            // ピンマーカー設定
            MarkerLayer(
              markers: markers,
            ),
            //通ってきた道の設定
            PolylineLayer(
              polylines: [
                Polyline(
                  points: _points,
                  strokeWidth: 4.0,
                  color: Colors.blue,
                ),
              ],
            ),
          ],
        ),
        endDrawer: Drawer(
          child: Column(
            children: [
              Expanded(
                child: ListView(
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(8.0),//周囲から8.0の余白で囲む
                      child: TextField(//テキスト入力を受け付けるためのウィジェット
                        controller: _searchQueryController,
                        decoration: InputDecoration(
                          hintText: "場所を入力してください",
                        ),
                        onSubmitted: (query) => _performSearch(query),//入力されたテキストを処理する
                      ),
                    ),
                    ListView.builder(
                      physics: NeverScrollableScrollPhysics(),
                      shrinkWrap: true,
                      itemCount: _searchResults.length,
                      itemBuilder: (context,index){
                        Location location = _searchResults[index];
                        return
                          ListTile(
                          title: Text(location.toString()),
                          subtitle: Text('${location.latitude}, ${location.longitude}'),
                          onTap: (){
                            Navigator.pop(context);
                          },
                        );
                      },
                    ),

                    ListTile(
                      leading: Icon(Icons.emoji_events),
                      title: Text('アチーブメント'),
                      onTap: () {
                        // アチーブメント画面に遷移する処理を記述する
                        Navigator.pushNamed(context, '/achievement');
                      },
                    ),
                    ListTile(
                      leading: Icon(Icons.settings),
                      title: Text('設定'),
                      onTap: () {
                        Navigator.pushNamed(context, '/setting');
                      },
                    ),
                  ],
                ),
              ),
            ],
          ),

        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();//StatefulWidgetの初期化
    initLocation();//現在の位置を取得するための非同期関数
  }

  Future<void> _performSearch(String query) async {
    try {
      List<Location> locations = await locationFromAddress(query);//住所に関する単一の場所についてのみ一つの要素を持つ
      setState(() {//状態の更新
        _searchResults = locations;
        //マップを検索された場所にズームする
        // マップを検索された場所にズームする
        if (_searchResults.isNotEmpty) {
          final location = _searchResults.first;
          final center = LatLng(location.latitude, location.longitude);
          _mapController.move(center, 18);
        }
      });
    } catch (e) {
      print('Error: $e');
    }
  }

  //現在の位置を取得する
  Future<void> initLocation() async {
    LocationPermission permission = await Geolocator.checkPermission();//現在の位置情報を取得できるか許可とる
    if (permission == LocationPermission.denied) {
      permission = await Geolocator.requestPermission();
      if (permission == LocationPermission.denied) {
        return Future.error('Location permissions are denied');
      }
    }
    Position position = await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);//現在位置を取得
    currentPosition = position;
    final latitude = position.latitude;
    final longitude = position.longitude;
    Geolocator.getPositionStream().listen((position) {
      setState(() {
        _position = position;
        _points.add(LatLng(position.latitude, position.longitude));
        initCircleMarker(latitude, longitude);//現在の位置情報に基づいて地図上に表示するマーカが初期化
      });
    });
  }
  /// 地図上でピンを作成し、タップすることでピンを選択
  void cleatePin(LatLng tapLatLng) {
    Marker marker = Marker(
      point: tapLatLng,
      width: 80,
      height: 80,
      builder: (context) => Container(
        child: IconButton(
          icon: Icon(
            Icons.location_on,
            size: 40,
            color: Colors.red,
          ),
          onPressed: () {//ピンをタップした場合に実行される、新しいマーカに置き換える
            onTapPinCallBack(tapLatLng);
          },
        ),
      ),
    );
    markers.add(marker);
    setState(() {});
  }

  Future<void> onTapPinCallBack(LatLng latLng) async {
    final tapMarker = pinReturn(latLng, pinReturn);
    markers.add(tapMarker);
    markers.removeAt(1);
    setState(() {});
  }

  Marker pinReturn(LatLng tapLatLng, void tapPin) {
    return Marker(
      point: tapLatLng,
      width: 80,
      height: 80,
      builder: (context) => Container(
        child: IconButton(
          icon: Icon(
            Icons.location_on,
            size: 20,
            color: Colors.red,
          ),
          onPressed: () {
            pinReturn(tapLatLng, tapPin);
          },
        ),
      ),
    );
  }

  void initCircleMarker(double latitude, double longitude) {
    CircleMarker circleMarler = CircleMarker(
      color: Colors.indigo.withOpacity(0.9),
      radius: 10,
      borderColor: Colors.white.withOpacity(0.9),
      borderStrokeWidth: 3,
      point: LatLng(latitude, longitude),
    );
    circleMarkers.add(circleMarler);
  }

  void pinSizeChange() {}
}

試したこと

MaterialAppのHome部分を分離すればいいとネットで調べたのですが、どのように書けばいいのか初心者なのもあって実装がわかりません。

補足情報（FW/ツールのバージョンなど）

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

Answer 1

MaterialAppは単独で記述し、homeに書くものを別クラスにしておくやり方にするのが基本の書き方です。

一番簡単なのは、_MapAppStateのbuild内にあるMaterialAppの生成をmain側に持ってくるやり方。

main() {
  runApp(MaterialApp(
      debugShowCheckedModeBanner: false,//右上のdebugマークの表示を削除する
      title: 'map_app',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes:{//画面遷移するときのルートを指定しておく
        '/setting':(context) => SettingScreen(value: 100,),
        '/achievement':(context) => AchievementScreen(value:100),
      },
      home: (home: MapApp()));
}

エラーメッセージはcontext内にNavigatorがないよというものですが、これはMaterialApp内で作成しています。

提示されたコードだと_MapAppStateのbuildでMaterialAppを生成しているのでbuildの引数であるcontextにはそれが含まれないという状態になります。

分け方の参考になるのはこちらかな。
https://github.com/flutter/codelabs/blob/main/namer/step_03/lib/main.dart
Flutter codelabsのサンプルです。

お勧めではないですが、別の方法としてはScaffoldをBuilderでラップするという方法もあります。
こうすることでMaterialAppで作られたcontextをBuilder経由で渡すこともできます。

      home: Builder(
        builder: (context) {
          return Scaffold(