【Flutter】Navigatorを使った簡単な画面遷移（push、pop）

2024年2月10日2024年4月2日

いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです
今回はFlutterでNavigatorを使った簡単な画面遷移について解説していきます

この記事を読んでわかること

Navigatorとは？
FlutterでNavigatorを使った画面遷移の基本（push、pop）

開発環境

Dart 3.0.0
Flutter 3.10.0

Navigatorとは？

Navigatorは、Flutterでの画面遷移を管理するウィジェットです。アプリケーション内で複数の画面（ルートとも呼ばれます）間の移動をサポートし、スタック（後入れ先出しのリスト）を用いて現在の画面履歴を保持します。

画面遷移の基本

push操作

新しい画面に遷移する際にはNavigator.pushメソッドを使用します。このメソッドは、新しいルート（画面）をナビゲーションスタックに追加し、画面遷移を実行します。

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

説明

このコードは、現在のコンテキスト（context）と、新しい画面（NewScreen()）を生成するMaterialPageRouteをNavigator.pushメソッドに渡しています。これにより、アプリはNewScreenに遷移します。

pop操作

画面から戻る際にはNavigator.popメソッドを使用します。このメソッドは、ナビゲーションスタックの最上部にあるルート（画面）を削除し、前の画面に戻ります。

Navigator.pop(context);

説明

上記のコードでは、Navigator.popメソッドを呼び出すことで、現在の画面をナビゲーションスタックから削除し、前の画面に戻ります。contextは、操作を行う現在の画面のコンテキストを指します。

サンプルコード

以下のサンプルでは、簡単な2画面アプリケーションを作成し、画面間の遷移をpushとpopを使って実現します。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: Text('Navigate to second screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.pop(context),
          child: Text('Go back'),
        ),
      ),
    );
  }
}

動作確認

いちの

実際の動作を確認してみましょう

ボタンウィジェットについてもっと知りたいという方は、以下個人的に自信作の記事をぜひ！

まとめ

この記事では、FlutterのNavigatorクラスを使用した画面間遷移の基本的な方法を紹介しました。pushメソッドで新しい画面に遷移し、popメソッドで前の画面に戻る操作を行います。Flutterアプリケーションにおけるナビゲーションの実装には、これらの基本的な概念の理解が不可欠です。

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。

画面遷移時に値を渡したり受け取ったりする方法についても知りたいという方は、こちらの記事がオススメです