Flutter で画面遷移（push & pop）【Flutter入門】

今回はアプリケーションの基本である画面遷移について、iOS(UIKit) で言うところの pushViewController と popViewController を Flutter でやってみようと思います。

Flutter で画面遷移（push & pop）【Flutter入門】

遷移元ページ（MainPage）

先ずは遷移元ページのコードから確認しましょう。

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("画面遷移サンプル"),
      ),
      body: new Center(
        child: new Column(
          children: <Widget>[
            new Text("【 Main Page 】"),
            RaisedButton(
              onPressed: () => Navigator.of(context).pushNamed("/subpage"),
              child: new Text("次のページへ"),
            ),
          ],
        ),
      ),
    );
  }
}

ポイントはボタンを押下した時の以下の部分です。

Navigator.of(context).pushNamed("/subpage")

画面遷移には、Navigator を使います（Widget の一種です）。

pushNamed メソッドで遷移先ページの名称（オブジェクトではない）を指定します。

この名称（文字列）は、予め定義しておく文字列で、こうすることで簡略化することが出来ます（詳しくは後述）。

遷移先ページ（SubPage）

次に遷移先ページのコードを見ていきましょう。

class SubPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("画面遷移サンプル"),
      ),
      body: new Center(
        child: new Column(
          children: <Widget>[
            new Text("【 Sub Page 】"),
            RaisedButton(
              onPressed: () => Navigator.of(context).pop(),
              child: new Text("前のページに戻る"),
            )
          ] ,
        ),
      ),
    );
  }
}

大枠は、MainPage で変わりませんが、同じくポイントはボタンを押下した時の以下の部分です。

Navigator.of(context).pop()

戻る際も、Navigator を使って、pop メソッドを呼び出すことで前の画面へ戻ることが出来ます。

通常、アプリケーションバーに戻るボタンが表示されるので、そちらからも戻ることも出来ますが、プログラムによって、自動で前の画面へ戻したいときは pop を使うことになります。

MaterialApp にページを登録

先ほど、pushNamed メソッドでページの名称を指定していましたが、その名称は MaterialApp に予め登録しておくことで遷移することができるようになります。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainPage(),
      routes: <String, WidgetBuilder> {
        "/mainpage": (BuildContext context) => new MainPage(),
        "/subpage": (BuildContext context) => new SubPage()
      },
    );
  }
}

アプリケーションのエントリーポイント Widget である MyApp では通常 MaterialApp を生成します。

その引数の routes: に、Key&Value のセットの配列としてページ群を予めセットしておくことが出来ます。

Key にはページ名称を、Value にはその名称に応じたページ Widget を指定します。

上記の例では、

MainPage を “/mainpage” として、 SubPage を “/subpage” として紐づけています。

このように予めページを定義しておかない場合（本来）の遷移は以下のようになります。

Navigator.of(context).push(
  MaterialPageRoute<void>(
    builder: (BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: Text('Hello')),
        body: ...,
      );
    },
  ),
);

毎回 push の度に複雑な生成コードを書く必要が出てしまうためお薦めしません。

ちなみに、”/” をつけておく必要はありませんが、階層を示す意味合いがあり、一般的なようです。

以上

Flutter で画面遷移（push & pop）【Flutter入門】