【Flutter学習 #4】画面遷移を実装する

はじめに

この記事はFlutter初心者の筆者が学習のために書いている記事です。
間違っていたら温かくご指摘いただけるとありがたいです。

参考

公式サイト Cookbook

やりたいこと

• Flutterで最初から実装されているMyHomePageから別のページへ遷移させる。
  • Stateless Widgetのページに遷移する。
  • Stateful Widgetのページに遷移する。
• 遷移させたページから元のMyHomePageに戻る。

実装する

まず、遷移先のページを作っていきます。

• Stateless Widgetのページを作成する

libフォルダに遷移先のページを作っていきます。
私の場合は、「/lib/navigation_sample/navigate_to_stateless_widget.dart」というファイルを作成しました。

中身のコードはこんな感じ

/lib/navigation_sample/navigate_to_stateless_widget.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    // 画面を構築する
    return Scaffold(
      appBar: AppBar(
        title: const Text('Stateless Widget'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 遷移元の画面に戻る
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

この部分が遷移元に戻るための実装になります。
ボタンが押された時に遷移元の画面に戻ります。

/lib/navigation_sample/navigate_to_stateless_widget.dart

onPressed: () {
    // 遷移元の画面に戻る
    Navigator.pop(context);
},

• Stateful Widgetのページを作成する

同じようにStateful Widgetのページを作成していきます。
私の場合は、「/lib/navigation_sample/navigate_to_stateful_widget.dart」というファイルを作成しました。

中身のコードはこんな感じ

/lib/navigation_sample/navigate_to_stateful_widget.dart

import 'package:flutter/material.dart';

class NavigateToStatefulWidget extends StatefulWidget {
  const NavigateToStatefulWidget({super.key});

  @override
  State<StatefulWidget> createState() => _NavigateToStatefulWidget();
}

class _NavigateToStatefulWidget extends State<NavigateToStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    // 画面を構築する
    return Scaffold(
      appBar: AppBar(
        title: const Text('Stateful Widget'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 遷移元の画面に戻る
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

今回は画面遷移だけですが、Stateful Widgetなのでmain.dartに最初に実装されていたカウントアップのような実装を行うこともできます。

• 画面遷移部分を作成する

次に、「/lib/main.dart」を修正して上で作成したページへの遷移部分を作っていきます。

中身のコードはこんな感じ

/lib/main.dart

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    // 画面を構築する
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(children: [
        ElevatedButton(
          onPressed: () {
            // ボタンが押された時にStateless Widgetに遷移する
            Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => const NavigateToStatelessWidget(),
                ));
          },
          child: const Text("Stateless Widget Sampleへ"),
        ),
        ElevatedButton(
          onPressed: () {
            // ボタンが押された時にStateful Widgetに遷移する
            Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => const NavigateToStatefulWidget(),
                ));
          },
          child: const Text("Stateful Widget Sampleへ"),
        ),
      ]),
    );
  }
}

この部分で画面遷移を実装しています。
ボタンが押された時に、NavigateToStatelessWidget画面に遷移します。

/lib/main.dart

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

実行する

ボタンを押すことで別のページに遷移することができます。

Go back! ボタンを押すことで元のページに戻ることができます。
また、左上の矢印を押しても元のページに戻れます。（Flutterのデフォルトの機能です。）

最後に

ページ遷移をとても簡単に実装することができました。
今は公式サイトを中心にいろんなサイトを見ながら勉強している最中ですが、数ヶ月前の記事でも実装的には古いことがあってFlutterの進化の速さを感じます。まだ勉強始めて１週間くらいですがFlutter楽しいですね。