はじめに
Flutterでアプリを開発する際、1つの画面から別の画面への移動は避けて通れない重要なテーマです。今回の記事では、この「画面遷移」を実現するためのNavigatorについて深堀りします。具体的なコードとともに、Navigatorの使用方法とその魅力について解説していきましょう。
初めてのFlutter/Dartマルチプラットフォームアプリ開発チュートリアル
Navigatorとは？
Navigatorは、公式ドキュメンテーションによると、「アプリケーションの画面のスタックを管理するウィジェット」です。つまり、アプリの画面を一つのスタックと考え、それぞれの画面をスタックに積んだり、スタックから取り出したりすることで画面遷移を実現しています。
Navigatorの基本的な使い方
では、基本的なNavigatorの使い方について見てみましょう。まずは簡単な例を通じて説明します。
以下のようなコードを考えてみましょう。
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);ここでは、Navigator.pushメソッドを使用して新しい画面（SecondScreen）を表示しています。このメソッドは現在の画面（スタックの上部）に新しい画面を追加（push）します。
また、一つ前の画面に戻るには以下のようなコードを使用します。
Navigator.pop(context);Navigator.popメソッドは現在の画面（スタックの上部）を取り除き（pop）、その下にある画面を表示します。
Navigatorでの画面遷移の例
それでは、具体的な画面遷移の例を見てみましょう。以下は、FirstScreenからSecondScreenへ遷移し、戻るボタンを押すと元のFirstScreenに戻るという簡単なアプリのコードです。
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'Navigation Basics',
home: FirstScreen(),
));
}
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Screen'),
),
body: Center(
child: ElevatedButton(
child: Text('Launch screen'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
},
),
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Screen'),
),
body: Center(
child: ElevatedButton(
child: Text('Go back!'),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}このコードを実行すると、FirstScreenにはSecondScreenへのボタンが表示され、そのボタンを押すとSecondScreenが表示されます。SecondScreenでは、元のFirstScreenに戻るためのボタンが表示されています。
まとめ
この記事では、FlutterのNavigatorを用いた画面遷移の基本的な方法を紹介しました。Navigatorを使用すると、簡単に画面遷移を管理することができます。それぞれの画面をスタックとして考えることで、画面遷移の理解が深まるでしょう。
また、例として提示したコードを試してみると、実際の動きを理解するのに役立つでしょう。ぜひ手元の環境で試してみてください。
Flutter開発では、アプリケーションの成長とともに画面遷移が複雑になりがちです。しかし、Navigatorのような強力なツールを使えば、その複雑さをうまく管理することができます。
