Zenn
🐶

FlutterでStackの画面遷移を作る最小構成

2021/03/22に公開
Android
Flutter
iOS
Dart
tech

はじめに

Flutterでアプリを作る時に画面遷移を作る手順を毎回調べたり、
サンプルコードを見ることを繰り返していたので最小構成を自分用に残しておきます。

MaterialAppにRouteを登録する

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: <String, WidgetBuilder>{
        '/': (BuildContext context) => HomePage(),
        '/form': (BuildContext context) => (FormPage())
      },
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
    );
  }
}

Viewのアクションの中でNavigator.of(context).pushNamedを呼び出す

この例ではフローディングボタンのタップ時に画面遷移します。

floatingActionButton: FloatingActionButton(
  onPressed: () {
    Navigator.of(context).pushNamed('/form');
  },
  child: const Icon(Icons.add),
)

画面遷移時に引数を渡す(1つのみの場合)

Navigator.of(context).pushNamed('/form', arguments: 'hoge');

第2引数のargumentsプロパティに引数を渡すことができる。arguments以外のプロパティは指定不可。

final String name = ModalRoute.of(context).settings.arguments;

取得する時はModalRoute.ofのメソッドを使う。

画面遷移時に引数を渡す(複数の場合)

引数を複数使いたい場合は遷移元のローカルに引数用の構造体を用意する。

Navigator.of(context).pushNamed('/form',
  arguments: FormPageArguments(title: 'title', message: 'message'));

class FormPageArguments {
  final String title;
  final String message;

  const FormPageArguments({
    @required this.title,
    @required this.message,
  });
}

取得する時は以下のようにできる。

final FormPageArguments args = ModalRoute.of(context).settings.arguments;

Text(args.title);

遷移先から元の画面に戻れるようにする

遷移先の画面にAppBarを追加すると自動でヘッダーに前に戻るボタンが表示される

class FormPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final FormPageArguments args = ModalRoute.of(context).settings.arguments;

    return Scaffold(
      appBar: AppBar(
        title: Text(''),
      ),
      body: Center(
        child: Text(
          "${args.title}",
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

おわりに

これでStackの画面遷移が実装できるようになった。引数を取得する時のModalRouteという命名が初見だと違和感あるな〜と思ったので後で詳細を調べたい。

参考にした記事

FlutterのNavigationとRoutingを理解する https://itome.team/blog/2019/12/flutter-advent-calendar-day10/
画面遷移(Navigator) | Flutter Doc JP https://flutter.ctrnost.com/basic/routing/

Discussion