💅

Flutterのテーマについて学ぶ

2023/02/23に公開

Flutter

tech

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

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

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

iPhoneだと違和感はないけど

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

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

MaterialAppの公式の解説

このように設定を追加すると、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も使ってオシャレにしようとしたのですが、よくわからないエラーにハマったので使うのやめました🙇‍♂️

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

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

MaterialAppの公式の解説

変更後のUI

まとめ

Discussion