[flutter] 플러터에서의 커스텀 테마 적용 방법

개요

플러터는 UI 개발을 위한 프레임워크로, 기본적인 디자인 요소들을 제공합니다. 하지만 때때로 기본 테마로는 제약이 있을 수 있으며, 특정한 디자인 요구사항이 있는 경우에는 커스텀 테마를 적용할 필요가 있습니다. 이번 블로그 포스트에서는 플러터에서 커스텀 테마를 적용하는 방법에 대해 알아보겠습니다.

커스텀 테마 적용하기

1. MaterialApp 위젯 사용

커스텀 테마를 적용하기 위해서는 MaterialApp 위젯을 사용해야 합니다. MaterialApp 위젯은 플러터 앱을 생성하고 관리하는 데 사용되는 핵심 위젯입니다.

2. ThemeData 객체 생성

커스텀 테마를 적용하기 위해 ThemeData 객체를 생성해야 합니다. ThemeData는 앱 전체에서 사용되는 색상, 글꼴, 모양 등의 속성을 정의하는 클래스입니다.

ThemeData customTheme = ThemeData(
  primaryColor: Colors.blue, // 기본 색상 설정
  accentColor: Colors.orange, // 강조 색상 설정
  fontFamily: 'Roboto', // 글꼴 설정
);

위 예제에서는 primaryColor를 파란색, accentColor를 주황색, fontFamily를 ‘Roboto’로 설정한 커스텀 테마를 생성했습니다.

3. MaterialApp에 커스텀 테마 적용

생성된 ThemeData 객체를 MaterialApptheme 속성에 할당하여 커스텀 테마를 적용할 수 있습니다.

MaterialApp(
  theme: customTheme,
  home: MyHomePage(),
);

위 예제에서는 customThemeMaterialApptheme 속성에 할당하여 커스텀 테마를 적용했습니다.

결론

플러터에서의 커스텀 테마 적용은 간단하게 ThemeData 객체를 생성하고 MaterialApp 위젯의 theme 속성에 할당하는 것으로 이루어집니다. 커스텀 테마를 적용하여 앱의 UI를 더욱 다채롭게 꾸밀 수 있습니다.

참고 자료