Flutterの画面遷移に関して

Question

flutterの学習を始めた初心者なのですが画面遷移の場面でつまづいております。
ボタンを押して次の画面へ遷移するというものなのですがドキュメント通りにしたつもりが遷移できません。

以下main.dartです。

import 'package:as_if_youtube/booklist.dart';
import 'package:as_if_youtube/test.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("pretend Yourtube",
            style: TextStyle(
              fontSize: 18,
            ),
          ),
          actions: <Widget>[
            FlatButton(
              child: Icon(Icons.search),
            ),
            FlatButton(
              child: Icon(Icons.favorite),
            ),
          ],
        ),
        body: Center(
            child: RaisedButton(
            child: Text(
                "今日のやることを！",
            ),
              color: Colors.orange,
              textColor: Colors.white,
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => test()),

                );
              },
          )

        ),

       // This trailing comma makes auto-formatting nicer for build methods.
      ),
    );
  }
}

こちらがtest.dartです。

import 'package:flutter/material.dart';

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

class test extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

main.dart内のボタンを押すとtest.dartに遷移するようなシステムを考えております。

申し訳ございませんがどなたかご回答いただけないでしょうか。
何卒よろしくお願い致します。

Answer 1

質問のコードを試してみましたが、以下のエラーが出ていませんか？
まずはエラーが発生していないか確認するようにしてみてください。
Navigator operation requested with a context that does not include a Navigator.

そしてこのエラーメッセージを teratail で検索すると、以下の質問が該当します。
https://teratail.com/questions/265504
私が回答していますが、同じ原因です。

Comments

[murosan]

ご回答いただきありがとうございます。
いただいたエラーに関してなのですが私のandroid studioでは発生してないですね。。。

https://webbibouroku.com/Blog/Article/flutter-nav
こちらを参考にしてルーティング情報を記述した場合遷移することが可能になりました！

Answer 2

onPressedの箇所を以下のように書き換えることで繊維可能です。が、
routingを使った方法をおすすめします。
参考記事
https://flutter.ctrnost.com/basic/routing/https://flutter.ctrnost.com/basic/routing/

onPressed: () => Navigator.of(context).push(MaterialPageRoute(builder: (context) {
    return test();
})

Comments

[murosan]

ご回答いただきありがとうございます。
https://webbibouroku.com/Blog/Article/flutter-nav

ご回答いただいたルーティングとこちらの記事を参考にすることで画面遷移可能になりました！

[Tetsukick]

お力になれて、良かったです。