kakueki61's dev history

備忘録的に記録を残しています

Flutterで画面遷移

Flutterの公式ドキュメント
Navigate to a new screen and back
を元にFlutterで画面遷移をどう書くか紹介します。

Navigatorクラス

アプリの「画面」にあたるものは、AndroidではActivityであり、iOSではViewControllerです。
Flutterで画面にあたるものはrouteと呼ばれていて、NavigatorRouteオブジェクトのスタックを管理します。 Navigatorがスタックに対してRouteをプッシュしたり、ポップしたりすることで画面遷移を実現するというのが基本的な考え方です。

2つの画面間を遷移する

2つの画面を用意

最初の画面としてHomeScreenというクラスを用意します。
画面の中央に”Next”と表示されたボタンが置いてあるだけです。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Navigator Demo',
      theme: new ThemeData(primarySwatch: Colors.blue),
      home: new HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Navigator Demo Home Screen")
      ),
      body: new Center(
        child: new RaisedButton(
          child: new Text('Next'),
          textColor: Colors.white,
          color: Colors.lightBlue,
          onPressed: () {
            // ボタン押下時の処理
          }
        )
      )
    );
  }
}

次に遷移先のNextScreenです。こちらは”Back"と書かれたボタンが置かれているだけす。

import 'package:flutter/material.dart';

class NextScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Next Screen'),
      ),
      body: new Center(
        child: new RaisedButton(
          child: new Text('Back'),
          textColor: Colors.white,
          color: Colors.lightBlue,
          onPressed: () {}
        )
      )
    );
  }
}

Navigator.pushで次の画面へ遷移

HomeScreenのNextボタンを押した時にNavigator.pushメソッドを使ってNextScreenへ遷移させます。 onPressedの処理にNavigator.pushを追加します。

import 'package:flutter/material.dart';
import 'next_screen.dart';
...

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      ...
          onPressed: () {
            Navigator.push(
              context,
              new MaterialPageRoute(builder: (context) => new NextScreen())
            );
          }
        )
      )
    );
  }
}

Navigator.pushRouteオブジェクトをプッシュしてスタックに追加します。 RouteオブジェクトとしてMaterialPageRouteを利用しました。
Routeは遷移の見た目に関する情報も持っていますが、MaterialPageRouteはプラットフォームに応じた遷移アニメーションを行ってくれます。

Navigator.popで元の画面へ遷移

”Back"ボタンを押したら元の画面へ戻るようにします。Navigator.popメソッドで今のRouteオブジェクトをポップしてスタックから取り除きます。

class NextScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      ...
          onPressed: () {
            Navigator.pop(context);
          }
        )
      )
    );
  }
}

AndroidとiOSでビルドすると以下のような感じになります。

Android iOS
f:id:kakueki61:20180413013428g:plain f:id:kakueki61:20180413013436g:plain