Zenn
📄

Flutterの画面遷移方法まとめ

2024/09/26に公開
Flutter
tech

Flutterの画面遷移実装方法まとめ

Flutterでは、画面遷移を様々な方法で実装することができます。この記事では、代表的な画面遷移の方法を紹介し、それぞれの特徴や使い方を簡単に解説します。

Navigator.pushとNavigator.popは、最も基本的な画面遷移の方法です。新しい画面をスタックに追加し、前の画面に戻る際にスタックから取り除くという動作です。

使い方

// 画面遷移（新しい画面に移動）
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => NewScreen()),
);

// 前の画面に戻る
Navigator.pop(context);

長所: 簡単で理解しやすい。単純なアプリケーションには十分。

短所: 複雑な画面構成になると管理が難しくなる。

Navigator.pushReplacementは、現在の画面を置き換える形で新しい画面を表示します。スタックに追加されず、置き換えられた画面には戻れません。

使い方

Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => NewScreen()),
);

長所: メモリ効率が良い。履歴が残らないので、戻る操作が不要な場面に適している。

短所: 戻れないため、誤って実装するとユーザー体験が悪くなる可能性がある。

Navigator.pushNamedは、ルート（画面）を名前で管理する方法です。FlutterのMaterialAppやCupertinoAppでルートを事前に定義し、名前で画面遷移を制御します。

使い方

// ルート定義
MaterialApp(
  routes: {
    '/home': (context) => HomeScreen(),
    '/details': (context) => DetailsScreen(),
  },
);

// 画面遷移
Navigator.pushNamed(context, '/details');

// 前の画面に戻る
Navigator.pop(context);

長所: 画面遷移が整理され、アプリが大きくなった時に管理しやすい。

短所: 動的なパラメータの渡し方がやや複雑。

PageRouteBuilderを使ったカスタム遷移

PageRouteBuilderを使うことで、画面遷移時のアニメーションをカスタマイズできます。標準の遷移アニメーションに満足できない場合に利用します。

基本の使い方

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => NewScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = Offset(1.0, 0.0);
      var end = Offset.zero;
      var tween = Tween(begin: begin, end: end);
      var offsetAnimation = animation.drive(tween);

      return SlideTransition(position: offsetAnimation, child: child);
    },
  ),
);

長所: 遷移アニメーションを自由にカスタマイズできる。

短所: 実装がやや複雑。

まとめ

Navigator.push,popでの画面遷移でもなんとかなりそうだが、画面数が増えてくるとpushNamedでの実装のほうが画面管理がしやすそう。

Discussion