Flutter theme アプリ共通カラーコード・スタイル設定

• Flutterの共通スタイルはMaterialAppのルートウィジェットにthemeを設定する
• ダークモードにもthemeで対応できる

main.dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: createTheme(),
      debugShowCheckedModeBanner: false,
      home: SignUpPage(),
    );
  }
}

docs.flutter.dev

• themeに設定できるプロパティはけっこう多い themeを返す関数

import 'package:flutter/material.dart';

ThemeData createTheme() {
  return ThemeData(
    primarySwatch: Colors.blue,
  );
}

api.flutter.dev

• colorコード定義

import 'package:flutter/material.dart';

class ThemeColors {
  static const baseColor = const Color(0xFF222831);
  static const accentColor = const Color(0xFFFD7013);
  static const subColor = const Color(0xFF393E46);
  static const textColor = const Color(0xFFEEEEEE);
}

api.flutter.dev