Flutter開発で便利なナレッジを紹介します。
カラー
色が少ない場合は、Flutterにデフォルトで用意されているClorsクラスから指定すればいいのですが、
細かな指定がある場合(カラーコードなど)は、その都度調べて書いていては、間違う可能性もあり、
何より面倒です。なので、アプリ全体で色を管理するクラスを始めに作成することが多いです。
import 'dart:ui';
class AppColor {
const AppColor._();
static const defaultBlack = black900;
static const red = Color(0xFFE00000);
static const white = Color(0xFFFFFFFF);
static const black100 = Color(0xFFE6E6E6);
static const black200 = Color(0xFFCCCCCC);
static const black300 = Color(0xFFB3B3B3);
static const black400 = Color(0xFF999999);
static const black500 = Color(0xFF808080);
static const black600 = Color(0xFF666666);
static const black700 = Color(0xFF4D4D4D);
static const black800 = Color(0xFF333333);
static const black900 = Color(0xFF1A1A1A);
}
テキストスタイル
フォントの指定や、テキストサイズの指定などは、アプリ内でそれほど多くの種類があるわけではないので、こちらもカラーと同じように、アプリ全体でテキストスタイルを管理するクラスを作成した方が
間違うことがなく、統一感も出ると思います。
下のように定義しても、適宜、修正することも可能です。
import 'package:flutter/material.dart';
import 'app_color.dart';
class AppTextStyle {
const AppTextStyle._();
static TextStyle get _base => const TextStyle(
color: AppColor.defaultBlack,
// フォントの指定がある場合は、ここに追加する
);
static TextStyle get style8 => const TextStyle(
fontSize: 8,
height: 16 / 8,
fontWeight: FontWeight.w300,
).merge(_base);
static TextStyle get style12 => const TextStyle(
fontSize: 12,
height: 20 / 12,
fontWeight: FontWeight.w400,
).merge(_base);
static TextStyle get style16 => const TextStyle(
fontSize: 16,
height: 24 / 16,
fontWeight: FontWeight.w400,
).merge(_base);
static TextStyle get style20 => const TextStyle(
fontSize: 20,
height: 28 / 20,
fontWeight: FontWeight.w500,
).merge(_base);
}
Text(
num.toString(),
style: AppTextStyle.style20.copyWith(
color: AppColor.red,
),
),