【Flutter】エラー対処法：Navigator operation requested with a context that does not include a Navigator.

未経験から最短3カ月でプログラマーへ！！【０円スクール】

この記事はで読むことができます。

この記事でわかること

「Navigator operation requested with a context that does not include a Navigator」エラーの原因
画面遷移を正しく実装する方法

アプリ開発に必須なキャッチコピーやテキストをAI（人工知能）が自動作成

目次閉じる

はじめに
まとめ

はじめに

Flutterで画面遷移を実装しようとした際に、エラーが発生することがあります。その中でも「Navigator operation requested with a context that does not include a Navigator」というエラーは初心者がよく遭遇する問題です。この記事では、このエラーの原因とその解決方法を解説します。

ポイント1：エラーの原因と基本的な対処法

このエラーが発生する主な原因は、MaterialAppの中でNavigator（画面遷移）が設定されていないためです。MaterialAppはFlutterアプリのルート構造を提供し、Navigatorはその中で管理される必要があります。

Dart

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Navigator Error',
      home: HomeScreen(), // Navigatorを設定する
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('次の画面へ'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text('2番目の画面です'),
      ),
    );
  }
}

画面遷移コードはMaterialAppのhomeやroutesに設定されたウィジェットの中で使用する必要があります。

ポイント2：画面遷移コードを別クラスで管理する

もう一つのよくある原因は、MaterialAppの構成が適切でないことです。画面遷移コードは、MaterialAppを返すメインのクラスから分離して定義する必要があります。

Dart

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Navigator Solution',
      home: HomeScreen(), // 別クラスで定義した画面遷移コードを指定
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('次の画面へ'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text('ここは2番目の画面です'),
      ),
    );
  }
}

画面遷移コードをMaterialAppから分離することで、エラーを防ぎ、コードが整理されます。

まとめ

Flutterでの画面遷移時に発生する「Navigator operation requested with a context that does not include a Navigator」エラーの原因と解決方法について解説しました。このエラーは、画面遷移コードの場所やMaterialAppの構成に起因することが多いため、適切にクラスを分けることで解決できます。

【この記事のポイント】

MaterialApp内でのNavigatorの設定が必要
画面遷移コードはMaterialAppから分離して管理する

ご質問があれば、どうぞお気軽にお尋ねください。
それでは、Happy Fluttering！

Post Views: 403