Flutter 기초 - Theme (25)

 

Flutter 기초 - Theme (25)

 

1. Theme

 - 테마를 사용해 App전체에 일관된 시각적 스타일을 적용하여 사용자경험 UX를 향상시킬 수 있다.

 

2. ThemeData

 - MaterialApp의 theme속성에서 제공되고 앱 전체에서 공통 스타일을 적용한다.

void main(){
  MaterialApp(
    theme: ThemeData(
      primary: Colors.indigo,
      secondary: Colors.green,
      teriary: Colors.yellow
    ),
  );
}

 

primaryColor	앱의 기본색상으로 툴바, 탭바 등
accentColor	버튼, 액션 버튼, 체크박스 등 사용자와 상호작용하는 요소에서 사용되는 색상
brightness	앱의 전체적인 밝기를 설정한다.
textTheme	앱 내 텍스트의 스타일을 정의하고 글꼴 크기, 색상, 글꼴 등을 조정할 수 있다.

 

3. 테마 적용 방법

Container(
	color: Theme.of(context).accentColor,
    chiled: Text(
    	'Welcome to Flutter',
        style: Theme.of(context).textTheme.headline6,
    ),
)

 

 

4. Material Design 3

https://m3.material.io/styles/color/system/overview

Color – Material Design 3

 

final customTheme = ThemeData(
  colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
  textTheme: const TextTheme(
    bodyLarge: TextStyle(fontWeight: FontWeight.normal, fontSize: 10)
  ),
  useMaterial3: true,
);

 

ColorScheme.fromSeed

 - ColorScheme.fromSeed는 seedColor를 기반으로 전체 색상 스키마를 생성한다. Colors.indigo 색을 기반으로 관련된 색생을 생성해 버튼, 배경, 텍스트 등 요소에 사용한다.

 

TextTheme

 - textTheme 은 앱 내의 텍스트 스타일을 정의한다. bodyLarge는 기본 텍스트 타일로 크기와 굵기를 설정한다.

 

UserMaterial3: true

 - 애플리케이션에서 MaterialDesign3 디자인을 사용하도록 설정해 스타일과 컴포넌트를 활성화시킨다.