Flutter MaterialApp 테마 커스텀 색상 적용 (primarySwatch)

primarySwatch를 사용하여 색상 적용

MaterialApp의 theme 설정시 primarySwatch를 사용하면, 원하는 색상으로 변경할 수 있다.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: const HomePage(),
    theme: ThemeData(
      primarySwatch: Colors.orange
    ),
  );
}

 

커스텀 색상 적용

하지만, Material 라이브러리에 정의된 색상만 사용하지 않고, 커스텀한 색상을 적용하려면 아래와 같이 직업 입력해줄 수 있다. 하지만 색상을 하나씩 지정해줘야하는 번거로움이 있다.

@override
Widget build(BuildContext context) {
    return MaterialApp(
      home: const HomePage(),
      theme: ThemeData(
        primarySwatch: MaterialColor(0xFF4C6EF5, {
          50: Color(0xFFEDF2FF),
          100: Color(0xFFDBE4FF),
          200: Color(0xFFBAC8FF),
          300: Color(0xFF91A7FF),
          400: Color(0xFF748FFC),
          500: Color(0xFF5C7CFA),
          600: Color(0xFF4C6EF5),
          700: Color(0xFF4263EB),
          800: Color(0xFF3B5BDB),
          900: Color(0xFF364FC7),
        }),
      ),
    );
}

 

자동으로 색상을 계산하여 swatch를 만들어주도록 하면 편하게 사용이 가능할듯하다. 우연히 프론트엔드 웹 개발자인 Nicholas Song 이 만든 로직이 있어서 참고하였다.

import 'package:flutter/material.dart';

class ColorService {
  static MaterialColor createMaterialColor(Color color) {
    List strengths = <double>[.05];
    Map<int, Color> swatch = {};
    final int r = color.red, g = color.green, b = color.blue;

    for (int i = 1; i < 10; i++) {
      strengths.add(0.1 * i);
    }
    for (var strength in strengths) {
      final double ds = 0.5 - strength;
      swatch[(strength * 1000).round()] = Color.fromRGBO(
        r + ((ds < 0 ? r : (255 - r)) * ds).round(),
        g + ((ds < 0 ? g : (255 - g)) * ds).round(),
        b + ((ds < 0 ? b : (255 - b)) * ds).round(),
        1,
      );
    }
    return MaterialColor(color.value, swatch);
  }
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const HomePage(),
      theme: ThemeData(
        primarySwatch:
            ColorService.createMaterialColor(const Color(0xFF4C6EF5)),
      ),
    );
  }
}

 

 

Reference

https://medium.com/@nickysong/creating-a-custom-color-swatch-in-flutter-554bcdcb27f3

Medium