✈️

AutoRoute NavigationRail

2024/10/12に公開

Flutter

Dart

navigation

tech

👤対象者

auto_routeでサイドバーを作ってみたい人
auto_route使ったことある人
NavigationRailをどのようにして使うのか？

記事の内容

auto_routeでNavigationRailの実装をやってみたいと思った。しかし調べても情報が出てこないような🤔
作るしかないか💦
日本代１号。多分？

補足情報

zennで画面遷移のパッケージの本をご紹介しています。破壊的変更があれば修正するようにしています。参考までにどうぞ。

Version 9.0.0で破壊的変更が出たそうです。

今回使用するパッケージたち

https://pub.dev/packages/auto_route

https://pub.dev/packages/build_runner

ページを作成して破壊的変更があったルートを定義するファイルにRootStackRouterを継承したルートのクラスを定義すれば解決できます。２ページ作成してサイドバーを表示するデモアプリを作成いたしました。

レイヤーはこんな感じで分けております。

screenディレクトリ配下に今回はUIに関係したファイルを作成いたしました。

タイムラインページ

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

@RoutePage()
class TimeLine extends StatelessWidget {
  const TimeLine({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text("TimeLine"),
      ),
    );
  }
}

設定ページ

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

@RoutePage()
class SettingScreen extends StatelessWidget {
  const SettingScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text("SettingScreen"),
      ),
    );
  }
}

サイドバーを作成するページ。ここは情報がなかったもので思いつきで作った。

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:worklab_dashboard/core/router.gr.dart';

@RoutePage()
class MainScreen extends StatelessWidget {
  const MainScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return AutoTabsRouter(
      routes: const [
        TimeLine(),
        SettingRoute(),
      ],
      transitionBuilder: (context, child, animation) {
        return FadeTransition(opacity: animation, child: child);
      },
      builder: (context, child) {
        final tabsRouter = AutoTabsRouter.of(context);
        return Scaffold(
          body: Row(
            children: [
              NavigationRail(
                extended: false,
                destinations: const [
                  NavigationRailDestination(
                    icon: Icon(Icons.timeline),
                    label: Text('Timeline'),
                  ),
                  NavigationRailDestination(
                    icon: Icon(Icons.settings),
                    label: Text('Settings'),
                  ),
                ],
                selectedIndex: tabsRouter.activeIndex,
                onDestinationSelected: (value) {
                  tabsRouter.setActiveIndex(value);
                },
              ),
              Expanded(child: child),
            ],
          ),
        );
      },
    );
  }
}

ルートの設定をする。ここは結構ハマった💦
go_routerも同じだけど変更入るたびに修正するのが大変だ。こんなもんいらんだろうといつも考えているのですが仕事では画面遷移のパッケージ入れるの強制されるので普段から勉強して覚えるしかないです😇

UIを作成した後にコマンドを実行するとルートのファイルが自動生成されるのでモジュールをインポートすればエラーは消えます。

route.dart

import 'package:auto_route/auto_route.dart';
import 'package:worklab_dashboard/core/router.gr.dart';

@AutoRouterConfig(replaceInRouteName: 'Screen|Page,Route')
class AppRouter extends RootStackRouter {
  @override
  RouteType get defaultRouteType => const RouteType.material();

  @override
  List<AutoRoute> get routes => [
        AutoRoute(page: MainRoute.page, initial: true, children: [
          AutoRoute(page: TimeLine.page),
          AutoRoute(page: SettingRoute.page),
        ])
      ];
}

main.dartで設定したらあとはビルドすれば動作するはず。

main.dart

import 'package:flutter/material.dart';
import 'package:worklab_dashboard/core/router.dart';

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

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

  final _appRouter = AppRouter(); // auto_routeのrouterを追加

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      // MaterialApp.routerに変更
      routerConfig: _appRouter.config(), // auto_routeのrouterを追加
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
    );
  }
}

https://youtu.be/t4xNEXGxzHs

感想

今回は、AutoRouteでNavigationRailを使ってみました。GoRouterは情報が多いのですがAutoRouteは少ない。普段からキャッチアップしているのですが気がついたら設定方法変わってるので毎日情報見ていないと破壊的変更がされてるのに気づかないですね💦

AutoRouteが🇯🇵増えてくれると嬉しいな✨