【Flutter】primarySwatchに独自のカラーを設定する方法

手順①：色を決める

• 以下のサイトで色を割り出す。
  • 画像のview codeからFlutter用のカラーコードが見れる。

http://mcg.mbitson.com/#!?mcgpalette0=%23000000#3f51b5

手順②：colors.dartを作成

• 配色を定義したcolors.dartを作成
  • 上記サイトで確認したカラーコードを参考に作成する

import 'package:flutter/material.dart';

// アプリ全体に適用する独自のマテリアルカラーを定義
const MaterialColor customPrimarySwatch = MaterialColor(
  0xFF000000, // 色のコード
  <int, Color>{
    50: Color(0xFFE0E0E0),
    100: Color(0xFFB3B3B3),
    200: Color(0xFF808080),
    300: Color(0xFF4D4D4D),
    400: Color(0xFF262626),
    500: Color(0xFF000000),
    600: Color(0xFF000000),
    700: Color(0xFF000000),
    800: Color(0xFF000000),
    900: Color(0xFF000000),
  },
);

手順③：primarySwatchの引数に指定

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: customPrimarySwatch,  // ここに適用
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

以上

(最後にソッといいねボタンやバッジを贈るボタンを押して頂けたら幸いですm(_ _)m)m)