📄
Flutterの画面遷移方法まとめ
Flutterの画面遷移実装方法まとめ
Flutterでは、画面遷移を様々な方法で実装することができます。この記事では、代表的な画面遷移の方法を紹介し、それぞれの特徴や使い方を簡単に解説します。
Navigator.pushとNavigator.pop
Navigator.pushとNavigator.popは、最も基本的な画面遷移の方法です。新しい画面をスタックに追加し、前の画面に戻る際にスタックから取り除くという動作です。
使い方
// 画面遷移(新しい画面に移動)
Navigator.push(
context,
MaterialPageRoute(builder: (context) => NewScreen()),
);
// 前の画面に戻る
Navigator.pop(context);
長所: 簡単で理解しやすい。単純なアプリケーションには十分。
短所: 複雑な画面構成になると管理が難しくなる。
Navigator.pushReplacement
Navigator.pushReplacementは、現在の画面を置き換える形で新しい画面を表示します。スタックに追加されず、置き換えられた画面には戻れません。
使い方
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => NewScreen()),
);
長所: メモリ効率が良い。履歴が残らないので、戻る操作が不要な場面に適している。
短所: 戻れないため、誤って実装するとユーザー体験が悪くなる可能性がある。
Navigator.pushNamedとNavigator.pop
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