🦋
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が透過度。
Discussion