[flutter] - Flutter에서의 앱 테마 및 스타일 설정 방법

Flutter는 크로스 플랫폼 앱 개발을 위한 프레임워크로서, UI 디자인에서 주요한 역할을 합니다. 앱의 외관과 사용자 경험을 개선하기 위해서는 앱의 테마와 스타일을 설정하는 것이 중요합니다. 이번 글에서는 Flutter에서 앱 테마와 스타일을 설정하는 방법에 대해 알아보겠습니다.

1. 앱 테마 설정하기

앱의 테마는 앱 전반적으로 적용되는 속성들을 정의합니다. 테마는 MaterialApp 위젯을 통해 설정할 수 있습니다. MaterialApp의 theme 속성을 사용하여 테마를 설정할 수 있습니다.

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blue, // 테마의 기본 색상
        accentColor: Colors.yellow, // 액센트 색상
        fontFamily: 'Roboto', // 텍스트의 기본 글꼴
        // 그 외의 테마 속성들을 설정할 수 있습니다
      ),
      home: MyApp(),
    ),
  );
}

위 코드에서는 primaryColoraccentColor 속성을 설정하여 앱의 색상을 변경했습니다. fontFamily 속성을 사용하여 텍스트의 기본 글꼴을 설정할 수도 있습니다. 이 외에도 buttonTheme, textTheme, inputDecorationTheme 등 다양한 테마 속성들을 설정할 수 있습니다.

2. 위젯 스타일 설정하기

테마 설정 이외에도 각 위젯 별로 스타일을 설정할 수 있습니다. 사전에 정의된 스타일을 사용하거나, 직접 스타일을 정의하여 사용할 수 있습니다. 스타일은 위젯의 style 속성을 통해 설정할 수 있습니다.

Text(
  'Hello World',
  style: TextStyle(
    fontFamily: 'Roboto', // 텍스트의 글꼴
    fontSize: 20, // 글꼴 크기
    fontWeight: FontWeight.bold, // 글꼴 굵기
    color: Colors.blue, // 텍스트 색상
    // 그 외의 스타일 속성들을 설정할 수 있습니다
  ),
)

위 코드에서는 Text 위젯에 스타일을 설정하는 예시를 보여줍니다. fontFamily, fontSize, fontWeight, color 등의 속성을 설정하여 텍스트의 스타일을 변경하는 것이 가능합니다.

3. 테마와 스타일 상속하기

Flutter에서는 테마와 스타일을 상속하여 재사용하는 것이 가능합니다. 이를 위해서는 테마와 스타일을 정의해야 합니다. 각각의 테마와 스타일은 부모를 지정하는 방식으로 상속될 수 있습니다.

ThemeData customTheme = ThemeData(
  primaryColor: Colors.blue,
  accentColor: Colors.yellow,
  fontFamily: 'Roboto',
);

TextTheme customTextTheme = TextTheme(
  headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
  headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
);

void main() {
  runApp(
    MaterialApp(
      theme: customTheme.copyWith(
        textTheme: customTextTheme,
      ),
      home: MyApp(),
    ),
  );
}

위 코드에서는 customThemecustomTextTheme을 정의하고, copyWith 메서드를 사용하여 테마와 스타일을 상속하는 예시입니다.

결론

Flutter에서는 앱의 외관과 스타일을 설정하는 것이 중요합니다. 이번 글에서는 앱 테마와 위젯 스타일을 설정하는 방법에 대해 알아보았습니다. 다양한 속성과 메서드를 이용하여 자유롭게 테마와 스타일을 커스터마이징할 수 있습니다. 앱의 외관과 사용자 경험을 개선하기 위해 테마와 스타일을 적절히 활용해보세요.


참고 문서: