【Flutter】タブから画面遷移

Question

Flutterでタブから画面遷移をしたい

デモページ

Flutterで上部に2つのタブを作成しました。
そのうちの左のページのボタンを押して、画面遷移をさせたいと考えております。
しかし、結果は上手くいかず、以下のようなエラーが表示されました。

// 表示されたエラー
Navigator operation requested with a context that does not include a Navigator.

コードimport 'package:flutter/material.dart';

// 最初に呼び出される関数（MyApp関数）
void main() {
  runApp(TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  @override
  // StatelessWidget を継承する場合は build する
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),

      // home は最初に表示するページ
      // DefaultTabController を利用すると、自分で TabController を管理する必要がないので簡単にタブを作成できる
      home: DefaultTabController(
        length: 2,
        // Scaffold を使うことで、 appBar を利用できる
        child: Scaffold(
          appBar: AppBar(
            // appBar の bottomの部分 に作成
            bottom: TabBar(

              // 上のタブ
              tabs: [
                Tab(text: ('Hello')),
                Tab(icon: Icon(Icons.directions_run)),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(

            // タブの画面
            children: [
              // 1ページ目
              Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('このボタンを押して、画面遷移したい'),
                    RaisedButton(
                      child: Text('新しいページへ'),
                      color: Colors.orange,
                      textColor: Colors.white,
                      onPressed: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(builder: (context) => NewPage()),
                        );
                      },
                    ),
                  ],
                ),
              ),

              // 2ページ目
              Icon(Icons.directions_run),
            ],
          ),
        ),
      ),
    );
  }
}

// 左のタブのボタンから遷移するページ
class NewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("新しいページ"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('戻る'),
        ),
      ),
    );
  }
}

試したこと

公式サイトを参考にページ遷移を実装した.
エラーを確認し、ネットで調べた.

最後に

ご教示いただけたら幸いです。
どうぞよろしくお願い致します。

Answer 1

DefaultTabControllerをBuilderで囲んであげるか、
DefaultTabController全体を別Widgetに切り出してあげればよいです。

理由は、、、以下が参考になります。（字幕を翻訳すれば日本語で理解できます）
Builder (Flutter Widget of the Week) - YouTube

補足
エラーメッセージはNavigator.pushで、Navigatorが見つからないといっています。
NavigatorオブジェクトはMaterialApp内で生成されますが、
質問のコードだとMaterialAppのContextへ辿ることができないです。

---

Builderで囲む

      home: Builder(
        builder: (context) => DefaultTabController(

別Widgetに切り出す

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TabPage(),
    );
  }
}

class TabPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
    ～略～
  }
}

Comments

[masa_mf3]

ありがとうございます！
contextに対する理解をもっと深めていこうと思います。
@satokeiさんのご回答、とても助かりました。