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

Question

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

デモページ

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

// 表示されたエラー
Error: Getter not found: 'context'.

import 'package:flutter/material.dart';

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

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

// 状態
class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);
  @override
  // 更新
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static List<Widget> _widgetOptions = <Widget>[
    // 画面

    // ページ1の画面
    Center(
      child: RaisedButton(
        child: Text('新しいページへ'),
        color: Colors.orange,
        textColor: Colors.white,
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => NewPage(),
            ),
          );
        },
      ),
    ),
    
    // ページ2の画面
    Text(
      'ページ2',
    ),
    
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DEMO'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),

      // 下のナビゲーションボタン
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.directions_walk),
            title: Text('Health'),
          ),
        ],

        // 選択
        currentIndex: _selectedIndex,
        // 選択したときはオレンジ色にする
        selectedItemColor: Colors.amber[800],
        // タップできるように
        onTap: _onItemTapped,
      ),
    );
  }
}

// 新しいページ（遷移するページ）
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

エラーメッセージに記載のとおり、ページ1の画面にcontextがありませんね。

_MyStatefulWidgetStateクラス内のページ1、ページ2の画面Widgetを別クラスに切り出して、BuildContextを含むWidgetを生成してあげれば解決しそうです。

例えば_widgetOptions部分を、以下のように修正すると想定する挙動になるのではないかと思います。

  static List<Widget> _widgetOptions = <Widget>[
    // ページ1の画面
    PageContents1(),
    // ページ2の画面
    PageContents2(),
  ];

class PageContents1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: Text('新しいページへ'),
        color: Colors.orange,
        textColor: Colors.white,
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => NewPage(),
            ),
          );
        },
      ),
    );
  }
}

class PageContents2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      'ページ2',
    );
  }
}

Comments

[masa_mf3]

@unsoluble_sugarさんありがとうございます！
なるほど、そのように切り出せば上手くいくんですね( ;∀;)
GIF画像まで提示していただき、本当にありがとうございます！