flutter/flutter-theming-apps

flutter-theming-apps은(는) 무엇을 하나요?

Flutter 앱의 시각적 외관을 테마 시스템을 사용하여 사용자 정의합니다. 애플리케이션의 전역 스타일, 색상 또는 타이포그래피를 정의할 때 사용하세요.

개요

이 스킬은 Flutter의 테마 시스템을 활용하여 앱 전체에 일관된 스타일을 적용하는 방법을 안내합니다. 주요 기능은 다음과 같습니다:

• 전역 색상 및 타이포그래피 정의: ThemeData를 사용하여 앱 전체의 기본 색상과 글꼴 스타일을 설정합니다.
• 다크 모드 지원: darkTheme 속성을 통해 다크 테마를 별도로 구성하고 전환할 수 있습니다.
• 위젯별 기본 스타일 지정: 버튼, 텍스트 필드 등 특정 위젯의 기본 속성을 테마로 사전 정의합니다.
• 커스텀 테마 확장: ThemeExtension을 사용하여 고유한 디자인 토큰을 추가하고 관리합니다.

사용 방법

기본 테마 설정

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    fontFamily: 'Roboto',
    textTheme: TextTheme(
      headline1: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
      bodyText1: TextStyle(fontSize: 16.0),
    ),
  ),
  home: MyHomePage(),
)

다크 모드 추가

MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  themeMode: ThemeMode.system, // 시스템 설정에 따라 자동 전환
  home: MyHomePage(),
)

위젯 테마 접근

Widget build(BuildContext context) {
  return Text(
    'Hello, Flutter!',
    style: Theme.of(context).textTheme.headline1,
  );
}

커스텀 테마 확장 (ThemeExtension)

class CustomColors extends ThemeExtension<CustomColors> {
  final Color? brandColor;
  final Color? accentColor;

  CustomColors({this.brandColor, this.accentColor});

  @override
  ThemeExtension<CustomColors> copyWith({Color? brandColor, Color? accentColor}) {
    return CustomColors(
      brandColor: brandColor ?? this.brandColor,
      accentColor: accentColor ?? this.accentColor,
    );
  }

  @override
  ThemeExtension<CustomColors> lerp(ThemeExtension<CustomColors>? other, double t) {
    if (other is! CustomColors) return this;
    return CustomColors(
      brandColor: Color.lerp(brandColor, other.brandColor, t),
      accentColor: Color.lerp(accentColor, other.accentColor, t),
    );
  }
}

참고 사항

• Flutter의 공식 Theme 문서를 함께 참조하세요.
• 테마 변경 시 MaterialApp을 다시 빌드해야 적용됩니다.
• 성능 최적화를 위해 테마 객체는 가능한 한 상위 위젯에서 한 번만 정의하는 것이 좋습니다.