Flutter에서의 컬러 스키마 사용

Flutter에서는 ColorScheme 클래스를 사용하여 앱의 주요 색상 팔레트를 정의할 수 있습니다. 이 클래스는 앱의 다양한 UI 요소에 사용될 색상들을 일관되게 관리할 수 있게 도와줍니다.

주요 항목들:

• Primary: 앱의 주요 색상으로, 버튼, 아이콘, 탭바 등 주요 UI 요소에 사용됩니다.
• Secondary: 보조 색상으로, 강조하고자 하는 요소나 액센트 색상으로 사용됩니다.
• Surface: 카드, 대화 상자, 모달 등의 표면에 사용되는 색상입니다.
• Background: 앱의 배경 색상이나 페이지 배경 등에 사용됩니다.
• Error: 에러를 나타내는 색상으로, 잘못된 입력값을 가진 TextField의 테두리 색상 등에 사용됩니다.
• OnPrimary, OnSecondary, OnSurface, OnBackground, OnError: 각각의 색상 위에 표시되는 색상으로, 주로 텍스트나 아이콘의 색상으로 사용됩니다.

이 외에도 다양한 색상과 관련된 속성들이 있으니, Flutter 공식 문서를 참고하시기 바랍니다.

 

Flutter에서의 컬러 스키마 설정 예제

먼저, ColorScheme을 사용하여 앱의 주요 색상 팔레트를 정의합니다. 그런 다음 ThemeData를 사용하여 MaterialApp의 테마를 설정합니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Color Scheme Example',
      theme: ThemeData(
        colorScheme: ColorScheme(
          primary: Color(0xFF21aeca),
          secondary: Color(0xFF44a7a2),
          surface: Color(0xFFf5f6ee),
          background: Color(0xFFebedde),
          error: Color(0xFFde670d),
          onPrimary: Colors.white,
          onSecondary: Colors.white,
          onSurface: Colors.black,
          onBackground: Colors.black,
          onError: Colors.white,
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Color Scheme Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: Text('Click Me!'),
        ),
      ),
    );
  }
}

위의 예제에서 보다시피, 주요 위젯들에서 컬러설정을 하지 않아도 테마로 지정된 컬러가 자동적으로 적용됩니다. 직접 지정해줘야하는것들도 있지만, 앱바처럼 자동적용되는것들도 있는 셈입니다. ColorScheme을 사용하여 주요 색상을 정의하고, 이를 ThemeData의 colorScheme 속성에 할당하여 MaterialApp의 테마를 설정했습니다. 이렇게 설정된 테마는 앱 전체에서 사용됩니다.