🎉

Enhanced Enum使ってみた

2024/05/04に公開

Flutter

どうも！初心者プログラマーのちゃきです！
今回は、「Enhanced Enum」を実際に使ってみた記録です！
前回の記事でEnumでページのパスを定義していたところ、コメントでEnhancedEnumの方が余計なコードが入り込まないので良いというアドバイスをいただいたので、調べてみました！

Enhanced Enumとは？~主な追加機能~

Enumを拡張させたもので、フィールドやコンストラクター、メソッドなどの機能を定義することができます！
主な追加機能は、以下の二点です⭐️
・　enum にコンストラクタを追加できるようになった
・　toString()をオーバーライドできるようになった

実装

bottomnavigationのページのパスをEnhanced Enumで管理し、
toString()を用いてそれぞれのページ名を作成できるようにしています。

・　Enhanced Enum

enum AppRoute {
  auth('/auth'),
  cloudStore('/cloud-store'),
  storage('/storage');

  final String path;
  const AppRoute(this.path);

  @override
  String toString() => "$nameページ";
}

・ GoRouterでEnhancedEnumで定義したpathを書き込む

import 'package:firebase_app/config/enum/router_enum.dart';
import 'package:firebase_app/features/auth/view/auth_page.dart';
import 'package:firebase_app/features/cloud_store/view/cloud_store_page.dart';
import 'package:firebase_app/features/storage/view/storage_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';

import '../navigation/bottom_navigation_bar_page.dart';

final _rootNavigatorKey = GlobalKey<NavigatorState>();
final _shellNavigationKey = GlobalKey<NavigatorState>();

final goRouterProvider = Provider<GoRouter>(
  (ref) {
    return GoRouter(
      initialLocation: AppRoute.auth.path,
      navigatorKey: _rootNavigatorKey,
      routes: <RouteBase>[
        //[ShellRoute] = 画面全体とは別に遷移管理させる。
        ShellRoute(
          navigatorKey: _shellNavigationKey, //RouteBaseと別に独立してページの管理ができる。

          builder: (context, state, child) {
            //bottomnavigationbarを残せる
            // (文脈、状態、child)
            return BottomNavigationBarPage(child: child);
          },
          //これ以下がchildの部分
          routes: [
            GoRoute(
              path: AppRoute.auth.path, // トップレベルのパスが必要なので指定する.
              name: AppRoute.auth.name,
              builder: (BuildContext context, GoRouterState state) {
                return AuthPage();
              },
            ),
            GoRoute(
              path: AppRoute.cloudStore.path,
              name: AppRoute.cloudStore.name,
              builder: (BuildContext context, GoRouterState state) {
                return CloudStorePage();
              },
            ),
            GoRoute(
              path: AppRoute.storage.path,
              name: AppRoute.storage.name,
              builder: (BuildContext context, GoRouterState state) {
                return StoragePage();
              },
            ),
          ],
        ),
      ],
    );
  },
);

・　それぞれのページ（例、CloudStorePage）

import 'package:firebase_app/config/enum/router_enum.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class CloudStorePage extends ConsumerWidget {
  const CloudStorePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppRoute.cloudStore.name),  //ここでページ名を表示
      ),
      body: Container(),
    );
  }
}

終わりに

Enumがシンプルで不要なコードがなくなったのでわかりやすくなりました！
コメントをくださったosakiさんありがとうございました🙇‍♀️✨

Enhanced Enumとは？~主な追加機能~

実装

終わりに

Discussion