2021-07-25に更新

FlutterでpushNamedを使うメリット

Flutterでページ遷移をする場合、pushを使う方法とpushNamedを使う方法があります。pushは直接ページ用のウィジェットを指定して呼び出す方法で、pushNamedは予め定義したページパスの文字列を指定して呼び出す方法です。

push

Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) {
      return SomePage();
    },
  ),
);

pushNamed

Navigator.of(context).pushNamed('/some/page');

どっちが良いのか?

どっちが良いのか僕もよくわかりませんが、僕はpushNamedを知ってからはそちらだけ使っています。後々気づいたのですが、namedパターンの場合にはどうもFirebase Analyticsでアクセスされたパスを自動的に記録してくれるようで、解析が楽になります。下記のような値として保存されています。

そのため独自にどのページに行ったかというイベントを送る必要がなくなります。ファネルの設定などもこれを使えば簡単です。

使いづらい点

いくつか使いづらい点はあると思いますので下記のように解消はできます。

ページパスの誤り

ページパスは単なる文字列のため、間違える可能性もあります。そのため定数にしておけば実行しなくても誤りに気づけます。

const topPagePath = '/';
const contactPagePath = '/contact';

final routes = {
  topPagePath: (BuildContext context) => SplashPage(),
  contactPagePath: (BuildContext context) => ContactPage(),
Navigator.of(context).pushNamed(contactPagePath);

arguments の型がない

pushNamedを使う時にargumentsとしてパラメータを渡すことが出来ますが、dynamicなのでここも間違える可能性があります。この場合は各ページにpushNamedをラップしたstaticメソッドを作成しておくと間違えることなく書くことが出来ます。

class ContactPageArguments {
  ContactPageArguments({
    required this.contactCategoryId,
    required this.title,
  });

  final int contactCategoryId;
  final String title;
}

class ContactPage extends StatelessWidget {
  static Future push(BuildContext context, ContactPageArguments arguments) {
    return Navigator.of(context).pushNamed(contactPagePath, arguments: arguments);
  }

  @override
  Widget build(BuildContext context) {
    final arguments = ModalRoute.of(context)?.settings.arguments as ContactPageArguments;
ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, React, Flutter, Vue.js, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント