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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextButton(
                onPressed: () {},
                child: const Text('画面遷移')
            )
          ],
        ),
      ),
    );
  }
}

次に、ルーティング後の画面も簡単に作成しておきます。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

  @override
  State<SampleScreen> createState() => _SampleScreenState();
}

class _SampleScreenState extends State<SampleScreen> {
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text('画面遷移後の画面です'),
      ),
    );
  }
}

手動で画面を切り替える

まずは、少し難易度が低めの手動で実装するパターンです。

main.dartを以下のように一部(47~49行目)だけ書き加えます。

import 'package:blog_sample/SampleScreen.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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => const SampleScreen()),
                  );
                },
                child: const Text('画面遷移')
            )
          ],
        ),
      ),
    );
  }
}

Navigatorクラスのpushメソッドを使用して、画面の切り替えを行います。

この方法が一番シンプルです。

もとに戻したい場合は、同じくNavigatorクラスのpopメソッドを使用します。

名前付きルートを使用する

次は、名前付きルートを使用してルーティングする方法について説明します。

名前付きとは、パスの名前を指定することです。

画面数が増えて、管理が難しい場合などに有効になります。

個人的には、手動でルーティングするより、この方法の方が好きです！！

まずは、新しくファイル（routes.dart）を作成して以下のように定義します。

import 'package:blog_sample/SampleScreen.dart';
import 'package:blog_sample/main.dart';
import 'package:flutter/cupertino.dart';

final Map<String, Widget Function(BuildContext)> routes = {
  '/': (context) => const MyHomePage(title: 'ルーティング',),
  '/sample': (context) => const SampleScreen(),
};

次はmain.dartを変更します。

変更箇所は、16~17行目と45~47行目です。

16~17行目では、初期画面のパスと、どのルーティング設定を使用するかを設定しています。

45~47行目では、画面遷移先のパスを指定しています。

import 'package:blog_sample/SampleScreen.dart';
import 'package:blog_sample/routes.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: 'Flutter Demo',
      initialRoute: '/',
      routes: routes,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextButton(
                onPressed: () {
                  Navigator.pushNamed(
                    context,
                    '/sample'
                  );
                },
                child: const Text('画面遷移')
            )
          ],
        ),
      ),
    );
  }
}

完成後の画面

完成後は以下のようにルーティング設定が適用されていることが確認できます。

文字が小さくてすみません。。。

まとめ

以上がルーティング設定の方法でした。

どちらの方法もメリット・デメリットがあるので、

状況によって使い分けると良いと思います。

個人的に好きなのは、名前付きルートでルーティングする方法です！！