[flutter] 플러터(Flutter)에서 사용자 정의 테마(Theme) 설정하기

플러터(Flutter)는 사용자가 원하는 디자인과 스타일을 적용할 수 있는 테마(Theme) 기능을 제공합니다. 이를 통해 앱의 전체적인 디자인을 일괄적으로 변경하거나 개별 요소의 스타일을 변경할 수 있습니다. 이번 블로그 포스트에서는 플러터에서 사용자 정의 테마를 설정하는 방법에 대해 소개하겠습니다.

1. MaterialApp 위젯에서 테마 설정하기

플러터에서는 MaterialApp 위젯을 통해 앱의 전체적인 테마를 설정할 수 있습니다. MaterialApp 위젯의 theme 속성을 사용하여 원하는 테마를 적용할 수 있습니다. 아래는 예시 코드입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 사용자 정의 테마 설정
      theme: ThemeData(
        primaryColor: Colors.blue, // 기본 색상 설정
        accentColor: Colors.orange, // 강조 색상 설정
        fontFamily: 'Roboto', // 폰트 설정
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('사용자 정의 테마 예제'),
      ),
      body: Center(
        child: Text(
          '앱의 전체적인 테마를 설정해보세요!',
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

위 예시 코드에서는 theme 속성을 사용하여 primaryColor, accentColor, fontFamily를 설정하고 있습니다. 이렇게 설정한 테마는 모든 MaterialApp 하위 위젯에서 적용되게 됩니다.

2. 개별 위젯에서 테마 설정하기

만약 앱의 일부분에만 특정한 테마를 적용하고 싶다면, 개별 위젯에서 테마를 설정할 수도 있습니다. 이를 위해 Theme 위젯을 사용하여 해당 위젯의 테마를 오버라이드할 수 있습니다. 아래는 예시 코드입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('개별 위젯에서 테마 설정 예제'),
      ),
      body: Center(
        child: Theme(
          // 개별 위젯에서 테마 설정
          data: Theme.of(context).copyWith(
            primaryColor: Colors.red, // 해당 위젯에서의 색상 설정
            accentColor: Colors.yellow, // 해당 위젯에서의 강조 색상 설정
          ),
          child: Text(
            '이 위젯에만 특정한 테마를 적용해보세요!',
            style: TextStyle(fontSize: 20),
          ),
        ),
      ),
    );
  }
}

위 예시 코드에서는 Theme 위젯을 사용하여 개별 위젯에서 테마를 설정하고 있습니다. data 속성을 사용하여 해당 위젯에 적용할 테마를 정의할 수 있습니다. 이렇게 설정한 테마는 해당 위젯 내부에서만 적용되게 됩니다.

마치며

위에서 소개한 방법을 통해 플러터(Flutter)에서 사용자 정의 테마를 설정할 수 있습니다. 앱의 전체적인 테마를 설정하거나 개별 위젯에만 특정한 테마를 적용하는 방법을 잘 활용하면, 앱의 디자인을 조금 더 원하는 대로 커스터마이징할 수 있을 것입니다. 플러터의 다양한 테마 속성들을 확인하고 원하는 디자인을 구현해보세요!

참고 자료