【5分でわかる】画面遷移をする方法 | Flutter入門

ども、木村です。本業はデータサイエンティスト、副業でアプリ開発をしています。

本記事では、Flutterで画面遷移をする方法を解説します。

今回のソースコードは以下で公開されています。

GitHub - kimuson/screen_move_demo

Contribute to kimuson/screen_move_demo development by creating an account on GitHub.

Navigatorを使って画面遷移をする

Flutterにおいて画面遷移をする方法はいくつかありますが、今回はその中でも特に基本的なNavigatorウィジェットを使用した画面遷移の方法をご紹介します。

Navigatorとは？

Navigatorとは、Flutterにおける画面遷移を実現してくれるウィジェットです。

Navigator class - widgets library - Dart API

API docs for the Navigator class from the widgets library, for the Dart programming language.

以下のように遷移したい画面を指定することで画面遷移をすることができます。

Navigator.push(context, MaterialPageRoute(builder: (context) => <遷移したい画面>));

また以下のような記述をすれば前の画面に戻ることが可能です。

Navigator.pop(context);

Navigatorで画面遷移を実装してみよう！

今回は画面中央にテキストボタンを設置し、そのボタンから次のボタンへ遷移できるようにします。

また遷移先のテキストボタンが押されたら元の画面に戻るように実装してみましょう。

実装方法

main.dartを以下のように書き換えてください。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: TextButton(
          child: Text("次の画面へ"),
          onPressed: () {
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => MyNextPage()));
          },
        ),
      ),
    );
  }
}

class MyNextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Next Page'),
      ),
      body: Center(
        child: TextButton(
          child: Text("前の画面に戻る"),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

重要なポイント

        child: TextButton(
          child: Text("次の画面へ"),
          onPressed: () {
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => MyNextPage()));
          },

TextButtonウィジェットのonPressed()にNavigatorを設定します。

これでボタンが押されたNavigatorが動作します。

今回は遷移先のページとしてMyNextPage()を指定しました。

child: TextButton(
          child: Text("前の画面に戻る"),
          onPressed: () {
            Navigator.pop(context);
          },
        ),

遷移先のMyNextPage()でも同じようにTextButtonのonPressedにNavigatorを設定しました。ここでは、一つ前の画面に戻る処理を記載しています。

まとめ：画面遷移をマスターしよう

いかがだでしょうか？画面遷移が思ったよりも簡単にできましたね。

アプリ開発ではListViewが必須となってきますのでぜひこの機会にマスターしてみてください！

今回のソースコードは以下で公開されています。

GitHub - kimuson/screen_move_demo

Contribute to kimuson/screen_move_demo development by creating an account on GitHub.