[Flutter] primarySwatch에 사용할 MaterialColor 생성

Flutter을 통해 MaterialApp을 생성할 때 ThemeData를 통해서 전체적인 Theme을 설정할 수 있습니다.

class MainApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Flutter',
            theme: ThemeData(
                primaryColor: Color(0xFF174378)
            ),
        );
    }
}

ThemeData를 통해 세세한 색상 값을 일일이 설정할 수 있습니다. 그러나 모든 색상을 하나하나 조절하는 것은 상당히 번거로운 작업일 수 있습니다.

ThemeData({
    Brightness brightness,
    VisualDensity visualDensity,
    MaterialColor primarySwatch,
    Color primaryColor,
    Brightness primaryColorBrightness,
    Color primaryColorLight,
    Color primaryColorDark,
    Color accentColor,
    Brightness accentColorBrightness,
    Color canvasColor,
    Color shadowColor,
    Color scaffoldBackgroundColor,
    Color bottomAppBarColor,
    Color cardColor,
    Color dividerColor,
    Color focusColor,
    Color hoverColor,
    Color highlightColor,
    Color splashColor,
    InteractiveInkFeatureFactory splashFactory,
    Color selectedRowColor,
    Color unselectedWidgetColor,
    Color disabledColor,
    Color buttonColor,
    ButtonThemeData buttonTheme,
    ToggleButtonsThemeData toggleButtonsTheme,
    Color secondaryHeaderColor,
    Color textSelectionColor,
    Color cursorColor,
    Color textSelectionHandleColor,
    Color backgroundColor,
    Color dialogBackgroundColor,
    Color indicatorColor,
    Color hintColor,
    Color errorColor,
    Color toggleableActiveColor,
    ...);

일일이 모든 색상을 설정하는 대신, primarySwatch 속성 값을 통해 전체적인 Theme을 설정할 수 있습니다. primarySwatch는 미리제공되는 견본색상을 뜻하며, Colors 클래스에 정의된 다양한 견본색상들을 사용할 수 있습니다. Colors 클래스에는 Material Design에서 제공되는 색상들을 제공합니다.

primarySwatch에 Colors.indogo를 설정하면 Flutter는 우리가 친숙하게 알고 있는 파랑색 계통의 Theme을 사용합니다.

class MainApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return MaterialApp(
            title: 'Flutter',
            theme: ThemeData(
                primarySwatch:  Colors.indigo
            ),
        );
    }
}

primarySwatch에 미리정의되지 않은 나만의 색상을 지정하려면 어떻게 해야할까요? MaterialColor 인스턴스를 직접 생성해야합니다.

MaterialColor(int primary, Map<int, Color> swatch)

아직까진 Flutter에서 제공되는 메서드나 편의도구가 없으며 직접 MaterialColor 인스턴스를 생성해야 합니다. 다행히 Filip Veličković이라는 분이 이에 관한 Helper 메서드를 작성하여 제공하고 있습니다.

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

  for (int i = 1; i < 10; i++) {
    strengths.add(0.1 * i);
  }
  strengths.forEach((strength) {
    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);
}

우리는 이 Helper 메서드를 통해 원하는 색상을 primarySwatch에 설정할 수 있습니다.

class MainApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return MaterialApp(
            title: 'Flutter',
            theme: ThemeData(
                primarySwatch:  createMaterialColor(Color(0xFF174378))
            ),
        );
    }
}

위의 코드를 실행하면 primarySwatch에 아래와 같은 MaterialColor 인스턴스가 설정되며, 이를 바탕으로 Flutter는 앱 전체에 적절한 Theme를 구축하게 됩니다.