Zenn
Closed2

Flutterで開発する際に押さえておく技術

ピン留めされたアイテム
まつもとまつもと

画面遷移やルート管理を行う仕組み（調査記録）

画面遷移を管理するためのウィジェット。Flutterでは、画面はスタックとして管理されており、Navigatorを使用してスタックを操作することで画面遷移を実現している。

画面をスタックにPush

スタックに新しい画面を追加して遷移する

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

スタックから画面をPopする

現在の画面をスタックから削除して、前の画面に戻る

Navigator.pop(context);

メモ

  • 低レベルのAPIなので、開発者が画面遷移の管理を全て行う必要がある
  • ディープリンクやURLベースのナビゲーションが必要な場合、複雑になってしまう
  • 小規模アプリレベルでは、非常にシンプルで効率的

GoRoute

Flutterで画面遷移を簡単に行ってくれるルーティングライブラリ。Navigator2.0を簡潔に使えるようにラップしており、ディープリンクやURLベースのルーティングをシンプルに行える。
https://pub.dev/packages/go_router

final GoRouter router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomePage(),
    ),
    GoRoute(
      path: '/details',
      builder: (context, state) => DetailsPage(),
    ),
  ],
);

context.go('/details'); // DetailsPageに遷移

ポイント

  • Flutter公式推奨
  • Web対応が必要な場合に利用
  • 規模が比較的大きめなアプリ

Beamer

AutoRoute

Flutterで画面遷移を効率化するためのルーティングパッケージ。大規模アプリや型安全なコードを重視する場合に適している。
https://pub.dev/packages/auto_route

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

part 'app_router.gr.dart'; // 自動生成されたファイルをインポート

@MaterialAutoRouter(
  replaceInRouteName: 'Page,Route', // "Page" を "Route" に置き換える命名規則
  routes: <AutoRoute>[
    AutoRoute(page: HomePage, initial: true), // 初期画面
    AutoRoute(page: DetailsPage), // 詳細画面
  ],
)
class $AppRouter {}

ルートコードを生成

# app_router.gr.dart
flutter pub run build_runner build

ポイント

  • build_runnerを利用してルート関連のコードを自動生成する
  • 大規模アプリ向き

宣言的ルーティングをサポートするパッケージ

メモ

  • Stack
まつもとまつもと

ログアウトした際に、Flutter標準の戻るボタンのせいでログイン時のデータが閲覧できてしまう問題

解決策

// ログアウト処理
Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (context) => LoginScreen()),
  (Route<dynamic> route) => false, // スタックをクリア
);

Navigator.pushAndRemoveUntilメソッドは「新しい画面に遷移しながら、それ以前の画面（スタック内の全ての画面）を削除」する。

MaterialPageRouteはページ遷移時のアニメーションを定義

このスクラップは3日前にクローズされました