Flutter의 커스텀 테마 만들기 및 적용 방법

Flutter의 커스텀 테마 만들기 및 적용 방법

Flutter에서 커스텀 테마(Custom Theme)를 적용하면 앱의 디자인을 일관성 있게 유지하고, 유지보수를 더욱 편리하게 할 수 있습니다. 기본 ThemeData를 확장하여 색상, 폰트, 버튼 스타일 등을 전역적으로 설정할 수 있습니다.

이 글에서는 Flutter에서 커스텀 테마를 만드는 방법과 전역 테마를 적용하는 방법을 설명하겠습니다.

---

1. Flutter에서 테마가 중요한 이유

앱 개발에서 테마를 사용하면 다음과 같은 이점이 있습니다.

• 일관된 UI 유지: 모든 화면에서 동일한 색상과 스타일 적용 가능
• 생산성 향상: 반복적인 스타일 지정 없이 쉽게 변경 가능
• 유지보수 용이: 스타일 변경 시 전체 앱에 일괄 적용

Flutter에서 기본적으로 ThemeData를 사용하여 테마를 관리할 수 있으며, 이를 확장하여 커스텀 테마를 생성할 수 있습니다.

---

2. 기본 테마 적용

기본적인 테마를 적용하는 방법을 먼저 살펴보겠습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Custom Theme',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        textTheme: TextTheme(
          bodyLarge: TextStyle(fontSize: 18, color: Colors.black),
          bodyMedium: TextStyle(fontSize: 16, color: Colors.grey[800]),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.blue,
            textStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
          ),
        ),
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("기본 테마 적용")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: Text("버튼 스타일 확인"),
        ),
      ),
    );
  }
}

설명:

• ThemeData를 사용하여 기본적인 색상 및 폰트 설정
• elevatedButtonTheme을 활용하여 버튼 스타일 지정
• textTheme을 사용하여 전체 앱에서 텍스트 스타일 통일

---

3. 커스텀 테마 클래스 생성

더 정리된 테마 관리를 위해 lib/theme/app_theme.dart 파일을 만들어 커스텀 테마를 관리할 수 있습니다.

(1) 커스텀 테마 파일 생성

import 'package:flutter/material.dart';

class AppTheme {
  static ThemeData lightTheme = ThemeData(
    brightness: Brightness.light,
    primaryColor: Colors.blue,
    scaffoldBackgroundColor: Colors.white,
    textTheme: TextTheme(
      bodyLarge: TextStyle(fontSize: 18, color: Colors.black),
      bodyMedium: TextStyle(fontSize: 16, color: Colors.grey[800]),
    ),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.blue,
        textStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      ),
    ),
  );

  static ThemeData darkTheme = ThemeData(
    brightness: Brightness.dark,
    primaryColor: Colors.grey[900],
    scaffoldBackgroundColor: Colors.black,
    textTheme: TextTheme(
      bodyLarge: TextStyle(fontSize: 18, color: Colors.white),
      bodyMedium: TextStyle(fontSize: 16, color: Colors.grey[400]),
    ),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.grey[800],
        textStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      ),
    ),
  );
}

설명:

• AppTheme 클래스를 생성하여 테마를 중앙에서 관리
• lightTheme와 darkTheme을 각각 정의
• 배경색, 텍스트 스타일, 버튼 스타일을 커스텀 설정

---

4. 커스텀 테마 적용

이제 앱의 MaterialApp에서 커스텀 테마를 적용해 보겠습니다.

import 'package:flutter/material.dart';
import 'theme/app_theme.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isDarkMode = false;

  void toggleTheme() {
    setState(() {
      isDarkMode = !isDarkMode;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Custom Theme',
      theme: AppTheme.lightTheme,
      darkTheme: AppTheme.darkTheme,
      themeMode: isDarkMode ? ThemeMode.dark : ThemeMode.light,
      home: HomeScreen(toggleTheme: toggleTheme),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final VoidCallback toggleTheme;

  HomeScreen({required this.toggleTheme});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("커스텀 테마 적용")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("현재 테마: ${Theme.of(context).brightness == Brightness.dark ? '다크 모드' : '라이트 모드'}"),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: toggleTheme,
              child: Text("테마 변경"),
            ),
          ],
        ),
      ),
    );
  }
}

설명:

• toggleTheme을 사용하여 테마 전환 기능 추가
• themeMode를 사용하여 라이트/다크 모드 전환
• 버튼을 눌러 테마를 변경할 수 있도록 구현

---

결론

Flutter에서 커스텀 테마를 적용하면 앱의 디자인을 더욱 일관되게 유지할 수 있습니다.

• 기본 테마 적용: ThemeData를 활용하여 스타일 설정
• 커스텀 테마 클래스 생성: 별도의 AppTheme 클래스로 관리
• 다크 모드 지원: 테마 전환 기능 추가

이제 커스텀 테마를 적용하여 더욱 세련된 Flutter 앱을 개발해 보세요!