Flutterのテーマについて学ぶ

重複しているコードを無くす

ページごとに、AppBarにスタイルを適用して、背景色を変えたり、文字の色を変えていたりしたが、これでは無駄なコードが増えてしまう🤔
他にも端末がiPhoneとAndroidだと、タイトルが左にずれていたりする現象が起きたりする。

デフォルトの状態だとこんな風になる

iPhoneだと違和感はないけど

Androidだと
タイトルがずれている！

---

他にも下の階層のページの色も統一したいなと考えたりします。どすればいいのかというと、main.dartのMaterialAppにテーマを定義します。
こうしてあげる事で、アプリの色を統一したり、端末がAndroidの場合は、タイトルを中央寄せにする設定を適用することができます。

MaterialAppの公式の解説

https://api.flutter.dev/flutter/material/MaterialApp-class.html
このように設定を追加すると、Androidでもタイトルは中央寄せになるし、他のページもAppBarの色が指定した色になる。

import 'package:flutter/material.dart';
import 'package:theme_sample/application/repository/router.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(// GoRouterの設定.
      showSemanticsDebugger: false,
      routerConfig: goRouter,// GoRouterの設定.
      title: 'Flutter Demo',
      theme: ThemeData(
        // テーマを使ってAppBar全体にスタイルを適用する.
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.greenAccent,
          foregroundColor: Colors.blueGrey,
          centerTitle: true,
        )
      ),
    );
  }
}

変更後のUI

まとめ

こちらが今回使用したサンプルコードです。go_routerを使っているので、画面遷移はNavigator2.0でやっています。
GoogleFontsも使ってオシャレにしようとしたのですが、よくわからないエラーにハマったので使うのやめました🙇‍♂️
https://github.com/sakurakotubaki/FlutterTheme