AppBarThemeで一括管理

AppBarをカスタマイズ

これまで、ThemeDataファイルをつくってテキストの色やサイズは一括管理してきたけど、AppBarについてもやってみる。

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

class SpaceTheme {
  static TextTheme textTheme = TextTheme(
    titleLarge:GoogleFonts.hinaMincho(
        fontSize: 100, fontWeight: FontWeight.bold, color: const Color(0xFF006400)),//green
    titleMedium: GoogleFonts.hinaMincho(
        fontSize: 80, fontWeight: FontWeight.bold, color: const Color(0xFFf5f5f5)),//white

中略

  );

//今回加えたのはここ
  static AppBarTheme appBarTheme = const AppBarTheme(
    backgroundColor: Color(0x4D00533f),
  );
}

で、全体に行き渡らせるために、MaterialAppで指定。

      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Chronomap in Space',
        theme: ThemeData(
          textTheme: GoogleFonts.tsukimiRoundedTextTheme(
              Theme.of(context).textTheme
          ),
          appBarTheme: SpaceTheme.appBarTheme,  <=ここ
        ),

        home: const CoverPage(),

色指定は

Colors.blac、みたいにかける色数は限られている。
検索して選んだらコードがもし#123456　みたいに六桁しかなかったら

• #を外して、
• 0xをつけて、
• 透過度を二桁をつける。
• backgroundColor: Color(0x4D00533f)　こんな感じ。4Dが透過度。