【Flutter】go_router利用時、ルーティング定義を分割・切り替える場合に、共通のデザインテーマを適用する

はじめに

下記記事の続編です。
https://zenn.dev/konbu33/articles/9443a570e4608e

上記の記事では「ルーティング定義を分割・切り替える方法」について記載しました。
本記事では、ルーティング定義を分割・切り替える場合に、「ルーティングで画面遷移する先の child に対して、共通のデザインテーマを適用する方法」について記載します。

共通のデザインテーマを適用する箇所

共通のデザインテーマを適用する箇所は、MaterialApp.router の builder 内です。^[1]

共通のデザインテーマの例

共通のデザインテーマの例

design_theme_layer.dart

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

class DesignThemeLayer extends StatelessWidget {
  const DesignThemeLayer({
    super.key,
    required this.child,
  });

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Theme(
      // 基本的な属属をfromメソッドで指定
      data: ThemeData.from(
        // カラー
        colorScheme: const ColorScheme.light(primary: Colors.cyan),

        // タイポグラフィ
        // Google Fontsを指定
        textTheme: GoogleFonts.mPlus1TextTheme(
          Typography.material2018().black,
        ),

        // 以下の属性は、デフォルト設定を上書き設定
      ).copyWith(
        // Scaffoldの背景色の透明度
        scaffoldBackgroundColor: Colors.white.withOpacity(0.8),

        // TextField
        inputDecorationTheme: InputDecorationTheme(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(30),
            borderSide: BorderSide.none,
          ),
          fillColor: Colors.grey.withOpacity(0.3),
          filled: true,
          helperStyle: const TextStyle(
            color: Colors.cyan,
          ),
        ),

        // AppBar
        appBarTheme: const AppBarTheme(
          elevation: 0,
          backgroundColor: Colors.transparent,
          foregroundColor: Colors.black87,
          iconTheme: IconThemeData(
            color: Colors.black26,
          ),
        ),
      ),
      child: child,
    );
  }
}

脚注

1. MaterialApp.router より上流で適用しようとすると、MaterialApp.router で上書きされ？適用されない。
   MaterialApp.router より下流で適用しようとすると、「デザインテーマを適用する箇所」が複数箇所に増える。