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を叩けば画面遷移できます。

Tamappe Life Log

13. Flutterで画面遷移に使うNavigatorについて学習する

🕒️February 4, 2020

本日は複数画面の切り替え機能である「ナビゲーション機能」について学習します。ナビゲーション機能はNavigatorというクラスが用意されているようです。iOSでいうところのUINavigationControllerみたいなものだと推測しています。Navigator クラスについて端的に説明するとNavigatorクラスは次の2つのメソッドを覚えればいいそうです。画面切替先にプッシュする時Navigator.push(, );前の画面に戻る時Navigator.pop();サンプルコードについてでは早速サンプルコードを書いていきます。main.dartimport 'package:flutter/material...

Tamappe Life Log

14. Flutterでパラメータ付き画面遷移の方法について学習する

🕒️February 6, 2020

前回はFlutter での画面遷移の方法について学習しました。本日はそれをもとにして画面遷移時に遷移先の画面に値を渡す方法について学習します。といってもそれほど難しくはなく発想はiOSやAndroidと同じです。それでは見ていきます。画面間の値渡しの方法簡単にいえば、遷移先のウィジェットに値が渡される変数を予めプロパティとして用意しておき、遷移元はNavigatorのpushの際に遷移先のウィジェットを引数指定して呼び出せばいいのです。とりあえず、Navigatorのプッシュのメソッドの基本形を記載します。Navigator.push(context, ...

今日はこれだけです。

それでは、バイバイ。

Tamappe

モバイルアプリエンジニア

XContact

都内の会社で働いているモバイルアプリエンジニアのTamappeです。今はiOSとAndroidの両OSを開発しています。使用言語はSwift/Objective-C/Java/Kotlin/Dartです。趣味はポーカーとスプラトゥーン2。最近は、シミュレーションゲームもやっています。