【Flutter】画面遷移/ページ遷移:Navigator使い方を3分で解説!(サンプルコードあり)

Flutterの画面遷移のやり方が知りたい。
Flutterのnavigator.pushの使い方がよく分からない

ということで悩んでませんか?

そこで、今回はFlutternavigatorにおける基本的な使い方サンプルコードアプリ画面で解説します。navigatorを使ことで、画面遷移が簡単に作成できます。画面遷移がないアプリはほぼないのでしっかり押さえておきましょう!

この記事で分かること!
  • navigatorの基本的な使い方

ちなみに、プログラミング初心者は疑問やエラーの解消に時間が掛かり、学習が前に進まなくて挫折することはよくあります。独学でFlutterを学習する場合は、次のことも考えないといけません。

  • 学習の計画
  • スケジュール管理
  • ポートフォリオ作成時に技術選定 など

初心者にとっては大変です。そこで、自走できるまでの手段にスクールを利用するのは1つの手です!Flutterが学べるおすすめスクールはこちらで詳しく解説してます。月2万ほど〜学べるスクールもあるのでご参考にどうぞ。

目次

【Flutter】Nnavigator:画面遷移/ページ遷移を簡単に作成できる

navigatorについてFlutter公式サイトをもとに解説します。navigatorを使えば、上記の動画のように画面遷移が簡単に作成できます。

Navigatorについて

A widget that manages a set of child widgets with a stack discipline.

(直訳)スタック制御で子ウィジェットのセットを管理するウィジェット。

引用:Flutter公式サイト「Navigator class」

スタックとは、基本的なデータ構造の考え方の1つで、データを後入れ先出しの構造で持つものです。

【Flutter】画面遷移/ページ遷移:Navigatorのサンプルコード

navigatorのサンプルコードは以下の通りです。コピペでそのまま使えます。

import 'package:flutter/material.dart';

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

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

class ScreenMoveDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('【画面遷移デモ】1ページ')),
      body: Center(
        child: ElevatedButton(
          child: Text('次ページ'),
          onPressed: () {
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => NextPage()));
          },
        ),
      ),
    );
  }
}

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('【画面遷移デモ】2ページ'),
        backgroundColor: Colors.red,
      ),
      body: Center(
        child: ElevatedButton(
          child: Text("戻る"),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

       

navigatorで押さえておくべきポイントは以下の3点です。順番に解説していきます。

Navigator.push次のページに遷移
Navigator.pop前のページに戻る

Navigator.push

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

Navigator.pushは引数としてMaterialPageRouteを指定。次の画面に遷移する際にMaterialDesignのアニメーションをするための設定です。CupertinoPageRouteに指定すれば、iOSのアニメーションで画面の遷移をおこないます。

builderプロパティの戻り値は、画面遷移先のページを設定します。上記ではNextPageを指定。

Navigator.pop

Navigator.pop(context);

Navigator.popは今表示している画面を閉じ、前の画面に遷移します。

まとめ:Flutter入門者は画面遷移/ページ遷移:Navigatorは押さえておくべき!

今回の記事では、Flutternavigatorにおける基本的な使い方サンプルコードアプリ画面で解説しました。

navigatorで押さえておくべきポイント

Navigator.push次のページに遷移
Navigator.pop前のページに戻る


Flutterエンジニアになるには?

初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。

Flutterの学習方法を知る

Flutter を動画で学ぶ(Udemy)

Flutter をスクールで学ぶ

Flutterの仕事を探す

おまけFlutter入門の完全ガイド

Flutter/Dartの基礎一覧

Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。

Widget一覧

画面レイアウト

ボタン

入力・出力

ページ遷移

状態管理

非同期処理

Dartの基本文法

ライブラリ使い方

目次