53. FlutterのinitialRouteで画面遷移をさせてみる
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
を叩けば画面遷移できます。
今日はこれだけです。
それでは、バイバイ。