【Flutter初心者用】【スマホアプリ開発】画面遷移の実装方法についてシンプルにわかりやすく解説します

こんにちは！文系プログラマーのいおです！

今回は、Flutterでアプリ開発をする際にほぼ必ずと言っていいほど必要になってくる、基本的な画面遷移の方法についてを具体的なプログラム例を示しつつ説明していこうと思います。

Flutterにおける画面遷移の基本的な考え方
- スタックとは
- Flutterでスタックを実現するための「Navigator」
Flutterでの具体的な実装例
- main.dart
おわりに

Flutterにおける画面遷移の基本的な考え方

Flutterでは「スタック」という考え方で画面遷移を実現します。

スタックとは

最後に入れたデータが最初に取り出される、「後入れ先出し」のデータ構造のことです。下記の図を用いて説明していきます。

図1

①は「FirstPage」という名前のデータが箱の中に入っているイメージです。②で、「FirstPage」の上に「SecondPage」という名前のデータを積みます。③で、箱の中の一番上のデータである「SecondPage」を取り出しています。

このように、最後に入れたデータを最初に取り出すデータ構造が「スタック」です。また、スタックにデータを積むことを「push」、スタックからデータを取り出すことを「pop」と言います。

Flutterでは図1のようにスタックにデータをpushしたり、スタックからpopしたりする処理を組み合わせることで様々な画面遷移を実装することができます。

Flutterでスタックを実現するための「Navigator」

Flutterでは上記のスタックのデータ構造を実現するために「Navigator」というウィジェットを利用することができます。

具体的には下記メソッドを使います。

・push（スタックの一番上に画面を積む）

Navigator.push()

・pop（スタックの一番上の画面を破棄）

Navigator.pop()

Flutterでの具体的な実装例

以下に、コードサンプルを示します。

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget{
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(title: const Text('First Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: (){
            Navigator.push(context, MaterialPageRoute(builder: (context){
                return SecondPage();
              }),
            );
          },
          child: const Text('Next Page'),
        )
      ),
    );
  }
}

class SecondPage extends StatelessWidget{
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(title: const Text('Second Page')),
      body: Center(
          child: ElevatedButton(
            onPressed: (){
              Navigator.pop(context);
            },
            child: const Text('Back'),
          )
      ),
    );
  }
}

このプログラムでは初期画面（FirstPage）からボタン押下時にpushで次画面（SecondPage）に遷移し、再びボタン押下でpopをし初期画面に戻ってくるサンプルプログラムです。ElevatedButtonウィジェットにonPressedを定義しボタン押下時の処理として「Navigator.push()、Navigator.pop()」を記述しています。

参考に、下記図2はプログラムの実行結果画面です。