Flutter：画面遷移

はじめに
画面遷移の仕方
最後に

はじめに

学校の研究や他のバイトの傍、Flutterでアプリ開発の仕事をはじめてから3週間ほど経ちましたが着実にFlutterの使い方がわかってきた気がする今日この頃。

まだまだいろんな壁があって勉強しないといけないことがたくさんありますが、早く自分の考えたアプリを作ってリリースしたい！頑張ります！

今回は画面遷移について書こうと思います。

ボタンを押したら次のページに進んだり、前のページに戻ったりするあれです。

私が初めて画面遷移を実装したときは、急にアプリを作ってる感が出てめっちゃテンション上がったのを覚えています。笑

画面遷移の仕方

Route

画面遷移で切り替わる画面のことをFlutterでは”Route”と呼びます。

遷移する時にRouteを指定して遷移先を決める等で使用します。

Navigation

画面遷移はNavigationクラスを使って実装していきます。

Navigationクラスは画面遷移を簡単に実装するためのクラスで使い方もそれほど難しくありません。

大きく分けて進むメソッドと戻るメソッドがあります。

.push

画面遷移で次の画面に進むとき時に呼び出されるメソッド。

.pop

画面遷移で元の画面に戻る時に呼び出されるメソッド。

Route名を用いた画面遷移

画面遷移の方法として、Routeを新しく作り画面遷移する方法とRoute名をあらかじめ指定しておき、画面遷移したい時にそのRoute名でメソッドを呼びだす方法があります。基本的にどちらで行っても実装後はほとんど変わりません。

Route名を用いた遷移は”.pushNamedメソッド“を用います。

Route名をあらかじめ指定しておくとMaterialAppを作り変えない限りどこからでも呼びだすことができ、dartファイルを分けてコードを書いていてもインポートははじめのRoute指定するファイルにまとめて書いて置けます。

基本的にMaterialAppは作り変えないのでこの方法で主要となるページの遷移を扱うことでコードが少し単純化でき見やすくなる気がします。

Routeの名前はMaterialAppのプロパティの”route”で指定します。

また”initialRoute”プロパティで起動時最初に表示されるRouteを指定することができます。

Widget _buildMaterialApp(BuildContext context, theme) {
    return MaterialApp(
      title: 'MyApp',
      initialRoute: 'login',
      routes: {
        'login': (context) => LoginPage(),
        '/home': (context) => HomePage(),
      },
    );
  }

Widget _buildMaterialApp(BuildContext context, theme) {

return MaterialApp(

title: 'MyApp',

initialRoute: 'login',

routes: {

'login': (context) => LoginPage(),

'/home': (context) => HomePage(),

);

}

遷移メソッドはこのようになります。

Navigator.pushNamed(context, '/home');

1	Navigator.pushNamed(context, '/home');

新規Routeでの画面遷移

新しくRouteを指定する遷移は.pushメソッドで新しいRouteを指定します。

Navigator.push(context, MaterialPageRoute(builder: (context) => /*遷移先のWidget*/));

1	Navigator.push(context, MaterialPageRoute(builder: (context) => /遷移先のWidget/));

サンプルコード

実際にコードを書いて画面遷移を実装していきます。

//main.dart

import 'package:flutter/material.dart';
import './login_page.dart';
import './home_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: 'login',
      routes: {
        'login': (context) => LoginPage(),
        '/home': (context) => HomePage(),
      },
    );
  }
}

//main.dart

import 'package:flutter/material.dart';

import './login_page.dart';

import './home_page.dart';

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

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

initialRoute: 'login',

routes: {

'login': (context) => LoginPage(),

'/home': (context) => HomePage(),

);

}

//login_page.dart

import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('login'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('login'),
            RaisedButton(
              onPressed: (){
                Navigator.pushNamed(context, '/home');
              },
              child: Text('push'),
            ),
          ],
        ),
      ),
    );
  }
}

//login_page.dart

import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('login'),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

Text('login'),

RaisedButton(

onPressed: (){

Navigator.pushNamed(context, '/home');

child: Text('push'),

);

}

//home_page.dart

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('home'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('home'),
            RaisedButton(
              onPressed: (){
                Navigator.pop(context);
              },
              child: Text('pop'),
            ),
            RaisedButton(
              onPressed: (){
                Navigator.push(context, MaterialPageRoute(builder: (context) => NewRoutePage()));
              },
              child: Text('newRoute'),
            ),
          ],
        ),
      ),
    );
  }
}

//home_page.dart

import 'package:flutter/material.dart';

import './new_route_page.dart';

class HomePage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('home'),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

Text('home'),

RaisedButton(

onPressed: (){

Navigator.pop(context);

child: Text('pop'),

RaisedButton(

onPressed: (){

Navigator.push(context, MaterialPageRoute(builder: (context) => NewRoutePage()));

child: Text('newRoute'),

);

}

//new_route_page.dart

import 'package:flutter/material.dart';

class NewRoutePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('newRoute'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('newRoute'),
            RaisedButton(
              onPressed: (){
                Navigator.pop(context);
              },
              child: Text('pop'),
            )
          ],
        ),
      ),
    );
  }
}

//new_route_page.dart

import 'package:flutter/material.dart';

class NewRoutePage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('newRoute'),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

Text('newRoute'),

RaisedButton(

onPressed: (){

Navigator.pop(context);

child: Text('pop'),

)

);

}

サンプルの動画を見てもわかるとおり、この遷移方法ではデフォルトでAppBarの左側に戻るボタンが追加され、わざわざ.popメソッドを書かなくてもまえの画面に戻ることができます。

今回のサンプルではあえてファイルを細かく分けて見ました。

ファイルの分け方やインポートの仕方なども参考にして見てください。

最後に

実は画面遷移はまだまだ奥が深く今回紹介した内容はほんのNavigatorの遷移メソッドのほんの一部分のみです。

もう少し掘り進んだNavigatorの紹介をまた近々書こうと思います。