Flutter 画面遷移ができない

Question

前提・実現したいこと

Flutter初心者です。画面遷移を実現したいです。「Navigate with named routes」を参考にしましたが、実装することができませんでした。どこがおかしいのか、どのように修正したらよいのか教えていただきたいです。

画面のRaisedButtonを押し、PlayScrrenに遷移することを実現したいです。

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

エラーメッセージは出力されておらず、問題の原因を追求することが出来ませんでした。

該当のソースコード

main.dart（遷移前画面）

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app_2/play_screen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Image Demo",
      theme: ThemeData(fontFamily: 'Krona'),
      initialRoute: '/',
      routes: {
        '/play': (context) => PlayScreen(),
      },
中略

       SizedBox(
              width: 330,
              child: RaisedButton(
                child: Padding(
                    padding: EdgeInsets.only(top: 15, bottom: 15),
                    child: Text('PLAY!'
                         style: TextStyle(
                             fontSize: 25,
                             fontWeight: FontWeight.w400,
                             fontFamily: 'Krona'  
                             color: Colors.white)),
                         ),
                         color: Color.fromRGBO(220, 20, 60, 0.2),
                         shape: RoundedRectangleBorder(
                         side: BorderSide(
                         color: Color.fromRGBO(220, 20, 60, 0.6), width: 2),
                      ),
                      onPressed: () {
                        Navigator.pushNamed(context, '/play');
                      },
                    ),
                  ),

play_screen.dart（遷移後画面）

import 'package:flutter/material.dart';

class PlayScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

試したこと

「Navigate to a new screen and back」,「Navigate with named routes」を参考にし、2つの手法でそれぞれ実装を試みました。しかし、どちらも実現することはできまんでした。

補足説明

・両ファイルともにlibフォルダに作成されています。

・main.dartではStack を利用していますが、これは画面遷移が実現できていないことに関係ないと思うので省いています。

・Android StudioでのFlutter開発の際、エラーメッセージが出力されておらず、問題の原因が分からない場合、あなただったらどのようにするかも可能であれば、教えていただきたいです。

Answer 1

main.dart（遷移前画面）の（中略）のところが気になるのですが、
SizedBox()がもしかしてhomeプロパティの中に入ってたりしませんか？

MaterialApp()の中で、initialRouteプロパティとhomeプロパティは同時に使用することができないので注意が必要です。
もしかしたらそれが原因かもしれません。

自分が作成してみた範囲では画面遷移に問題なかったので、そちらも貼っておきます。

main.dart

import 'package:flutter/material.dart';
import 'package:transition_test_app/home_screen.dart';
import 'package:transition_test_app/play_screen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Image Demo",
      theme: ThemeData(fontFamily: 'Krona'),
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/play': (context) => PlayScreen(),
      },
    );
  }
}

home_screen.dart

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("遷移前"),
        backgroundColor: Colors.purple,
      ),
      body: Center(
        child: Column(
          children: [
            RaisedButton(
                color: Colors.purple,
                textColor: Colors.white,
                child: Text("Go To PlayScreen"),
                onPressed: () {
                  Navigator.pushNamed(context, "/play");
                },
            )
          ],
        ),
      ),
    );
  }
}

play_screen.dart

import 'package:flutter/material.dart';

class PlayScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("遷移後"),
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: Column(
          children: [
            RaisedButton(
              color: Colors.blue,
              textColor: Colors.white,
              child: Text("Go To HomeScreen"),
              onPressed: () {
                Navigator.pop(context);
              },
            )
          ],
        ),
      ),
    );
  }
}

Comments

[_kei]

ご回答ありがとうございます。

ご指摘の通り、initialRouteプロパティとhomeプロパティを同時に使用していたことが原因でした。自力でなんとか解決できてよかったです。

コードも併せて載せていただきありがとうございます。

（しかし、この2つプロパティを同時に使用できないことはドキュメントに記載されていないと思うのですが。　あとこれエラーメッセージでないの不便ですよね）

Answer 2

どうやらmain.dartのMyAppクラス内のMaterialApp()にてhomeプロパティを記述していたことが原因で発生した問題だったようです。