[Flutter] MaterialAppでパスルーティングを実装する

こんにちは、CX事業本部 Delivery部の若槻です。

今回は、FlutterのMaterialAppを使ってパスルーティングを実装してみました。

やってみた

Chrome (web)でアプリケーションを実行して試してみます。

そもそもMaterialAppって何

MaterialAppはマテリアルデザイン（Material Design）を使用したApplication Widgetです。FlutterでマテリアルデザインのWidgetを構築する際にラップして使用します。

lib/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(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Home'),
        ),
      ),
    );
  }
}

themeでアプリのテーマを設定できます。またdebugShowCheckedModeBannerをfalseにするとデバッグ時にアプリ画面右上に表示されるバナーが非表示になります。

MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Home'),
        ),
      ),
      theme:
          ThemeData(brightness: Brightness.dark, primaryColor: Colors.blueGrey),
      debugShowCheckedModeBanner: false,
    );

MaterialAppでパスルーティングを実装

MaterialAppでパスルーティングはroutesで設定できます。パス毎にレンダリングさせるScreen Widgetを設定します。

MaterialApp(
      routes: <String, WidgetBuilder>{
        '/': (BuildContext context) {
          return Scaffold(
            appBar: AppBar(
              title: const Text('Home Route'),
            ),
          );
        },
        '/about': (BuildContext context) {
          return Scaffold(
            appBar: AppBar(
              title: const Text('About Route'),
            ),
          );
        }
      },
    );

/（ルート）パスを開いた場合。

/aboutパスを開いた場合。

パスに応じてルーティングが出来ていますね。

またFlutter Web AppはSingle Page Applicationとなるため、アプリ内ではルーティングを使用してパス遷移をした場合はアセットのロードは行われない動作となります。

onGenerateRouteを使用すればroute generatorを使用してルーティングを定義できます。ルート名（settings.name）に応じてcase文などでルーティング先のScreenを指定します。initialRouteを設定するとルートパスが渡された際のデフォルトのパスを指定できます。

Route<dynamic> generateRoute(RouteSettings settings) {
  switch (settings.name) {
    case '/':
      return MaterialPageRoute(
          builder: (_) => Scaffold(
                appBar: AppBar(
                  title: const Text('Home Route'),
                ),
              ));
    case '/about':
      return MaterialPageRoute(
          builder: (_) => Scaffold(
                appBar: AppBar(
                  title: const Text('About Route'),
                ),
              ));
    default:
      return MaterialPageRoute(
          builder: (_) => const Scaffold(
                body: Center(child: Text('No route defined')),
              ));
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      onGenerateRoute: generateRoute,
      initialRoute: '/',
    );
  }
}

/（ルート）パスを開いた場合。

/aboutパスを開いた場合。

/hogeパスを開いた場合。case文のデフォルトでレンダリングさせるScreen。

おわりに

FlutterのMaterialAppを使ってパスルーティングを実装してみました。

Flutterでマテリアルデザインを使用したアプリケーションを実装する際にはよく使うことになりそうです。

参考

• Navigate with named routes | Flutter

以上