Flutter

Flutterでカスタムテーマを適用する

Flutterで MaterialApp Widgetを使うと、 themes でテーマを設定できます。

  Widget build(BuildContext context) {
    return new MaterialApp(
      ...
      theme: new ThemeData(
        cardColor: Colors.white,
        primarySwatch: Colors.blue,
      ),
    );
  }
}

この色の指定をカスタムカラーで指定する方法です。
まず theme.dart を作ります。

import 'package:flutter/material.dart';

final ThemeData themeData = new ThemeData(
    brightness: Brightness.light,
    cardColor: Colors.white,
    dividerColor: Colors.grey[300],
    backgroundColor: Colors.grey[100],
    primarySwatch: CustomColors.theme[500],
    primaryColor: CustomColors.theme[500],
    primaryColorBrightness: Brightness.light,
    accentColor: CustomColors.accent[500]);

class CustomColors {
  CustomColors._(); // this basically makes it so you can instantiate this class
  static const Map<int, Color> theme = const <int, Color>{
    500: const Color(0xFFFBC812),
    600: const Color(0xFFFEAD22),
  };

  static const Map<int, Color> accent = const <int, Color>{
    500: const Color(0xFFF57C00),
  };
}

この themeData を指定するだけです。

import 'theme.dart';

...
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      ...
      theme: themeData,
    );
  }
}

以上。