[Flutter] ColorScheme class - 주요 색상만 지정하면 색깔을 알아서 뚝딱?

이거뭐야.. Flutter 3 디자인 ㄱ쉬운데??!! - The Coding Papa 더코딩파파님

요즘 플러터를 유튜브에서도 많이 검색해서 그런지 알고리즘에 의해 위의 영상이 노출되어 클릭했다

위의 플러터 3 디자인은 머티리얼3이 되면서 다이내믹 컬러와 폰트만 사용해도 다크 모드/라이트 모드에 따라 색깔을 알아서 뚝딱 만들어주는 영상이었다.

 

그래서 이 영상에 나오는 ColorScheme에 대해 정리하고자 한다!

 

ColorScheme class

공식 문서에 따르면 ColorScheme은 Material spec에 기반한 25가지 색상의 세트로 대부분의 컴포넌트의 컬러 속성을 설정할 수 있습니다.

4가지의  Accent colors

ColorScheme의 주요 강조 색상 그룹은 primary, secondary, tertiary입니다.

primary

 

FAB(Floating Action Button), 눈에 띄는 버튼, 액티브 상태 등 UI 전체의 주요 컴포넌트에 사용됩니다.

 

secondary

보조 색상으로 필터 칩과 같이 UI에서 덜 눈에 띄는 구성 요소에 사용되는 동시에 색상 표현의 기회를 확장합니다.

tertiary

primary과 secondary 색상의 균형을 맞추기 위해 사용하거나 입력 필드 등의 요소에서 주의를 표현할 때 사용할 수 있는 대조적인 강조에 사용됩니다. tertiary은 앱을 보다 폭넓은 색상 표현을 지원하는 목적으로 합니다.

ThemeData에 ColorScheme 적용해보기

그럼 이제 적응을 해보겠습니다.

소스는 맨 처음에 소개해드린 영상을 기반으로 작성했습니다.

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
            seedColor: Color(0xff6750a4), 
            brightness: Brightness.dark, //다크/라이트 모드 선택 
            ),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }

잉? 위에서는 primary, secondary, tertiary을 이야기해놓고 갑자기 seedColor라고 생각하실 수 있겠지만

공식 문서를 보면 seedColor을 기준으로 머티리얼 3 색상 시스템 기반의 색조 팔레트 세트가 구성된다고 한다. 

ColorScheme.fromSeed({required Color seedColor, Brightness brightness = Brightness.light, Color? primary, Color? onPrimary, Color? primaryContainer, Color? onPrimaryContainer, Color? secondary, Color? onSecondary, Color? secondaryContainer, Color? onSecondaryContainer, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, Color? error, Color? onError, Color? errorContainer, Color? onErrorContainer, Color? outline, Color? background, Color? onBackground, Color? surface, Color? onSurface, Color? surfaceVariant, Color? onSurfaceVariant, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? shadow, Color? surfaceTint})

그래서 constructors 메서드를 보면 seedColor는 필수고 다른 속성은 필요에 따라 특정 색상을 재정의할 수 있습니다

 

 

ColorScheme 사용해보기

Container(
  height: 100,
  width: 100,
  color: Theme.of(context).colorScheme.primary,
  child: const Text('primary color'),
),
Container(
  height: 100,
  width: 100,
  color: Theme.of(context).colorScheme.secondary,
  child: const Text('secondary color'),
),
Container(
  height: 100,
  width: 100,
  color: Theme.of(context).colorScheme.tertiary,
  child: const Text('tertiary color'),
)

Theme.of(context).colorScheme. 으로 원하는 색상을 사용할 수 있습니다.

만약 tertiary color를 노란색으로 바꾸고 싶으면 어떻게 해야 할까?

colorScheme: ColorScheme.fromSeed(
  seedColor: const Color(0xff6750a4),
  tertiary: const Color(0xFFFFF000),
),

fromSeed의 tertiary 값을 지정해주고

Container(
  height: 100,
  width: 100,
  color: Theme.of(context).colorScheme.tertiary,
  child: const Text('tertiary color'),
),

사용하면 끝입니다!

다만, tertiary색상을 지정하면 onTertiary, tertiaryContainer색상이 자동으로 만들어지진 않고 

onTertiary, tertiaryContainer 등도 사용자가 지정해줘야한다.

dynamic_color 패키지 사용하면 동적 색상을 얻을 수 있다

 

 

 

 

 

[참고]

https://www.youtube.com/watch?v=biel9KKQQPg&t=13s 

https://api.flutter.dev/flutter/material/ColorScheme-class.html

https://m3.material.io/styles/color/the-color-system/color-roles

https://pub.dev/packages/material_color_utilities

https://pub.dev/packages/dynamic_color