2020.05.13 2020.08.12

53. FlutterのinitialRouteで画面遷移をさせてみる

tamappe

Flutterでの画面遷移の実装方法について。

MaterialAppにinitialRouteとroutesのプロパティがあるのでそれらを使うと画面遷移を作れます。

initialRoute
routes

まるでWebでいうところのルーティング処理ですね。

initialRouteには初期表示時の画面のパスを指定します。
routesには画面ごとにパスを指定します。

例えば

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/start',
      routes: <String, WidgetBuilder> {
        '/start': (BuildContext context) => Sample1Page(),
        '/play': (BuildContext context) => Sample2Page(),
      },
      title: '画面遷移のサンプル',
    );
  }
}

class Sample1Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

class Sample2Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

とします。

こうすると
/start ではSample1Page
/play ではSample2Page

のウィジェットに画面遷移することを宣言します。

実際にボタンをタップして画面遷移させたいときには

Navigator.push(
                context,
                new MaterialPageRoute<Null>(
                  settings: const RouteSettings(name: "/play"),
                  builder: (BuildContext context) => Sample2Page(),
                ),
              );

という感じに Navigator.pushを叩けば画面遷移できます。