Flutter/DartでのNavigatorを用いた画面遷移の具体的な使い方

はじめに
Navigatorとは？
Navigatorの基本的な使い方
Navigatorでの画面遷移の例
まとめ

はじめに

Flutterでアプリを開発する際、1つの画面から別の画面への移動は避けて通れない重要なテーマです。今回の記事では、この「画面遷移」を実現するためのNavigatorについて深堀りします。具体的なコードとともに、Navigatorの使用方法とその魅力について解説していきましょう。

初めてのFlutter/Dartマルチプラットフォームアプリ開発チュートリアル

初めてのFlutter/Dartマルチプラットフォームアプリ開発チュートリアル

はじめに FlutterはGoogleが開発した、マルチプラットフォームのモバイルアプリ開発のフレームワークです。Flutterを使うと、AndroidとiOSの両方のプラットフォームで同時にアプリを開発することができます。また、ブラウザ...

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に戻るためのボタンが表示されています。