Flutter의 테마(Theme) 적용 방법

Flutter에서 테마(Theme)는 애플리케이션의 전반적인 디자인과 스타일을 관리하는 데 중요한 역할을 합니다. 테마를 통해 애플리케이션의 색상, 글꼴, 위젯 스타일 등을 일관성 있게 적용할 수 있습니다. Flutter는 Theme 위젯과 ThemeData 클래스를 사용하여 테마를 설정하고 적용하는 다양한 방법을 제공합니다. 이번 글에서는 Flutter 애플리케이션에 테마를 적용하는 방법과 다양한 테마 옵션에 대해 자세히 살펴보겠습니다.

1. 기본 테마 적용 방법

Flutter에서 기본 테마를 설정하려면 MaterialApp 위젯의 theme 속성을 사용합니다. ThemeData 클래스를 사용하여 테마 데이터를 정의할 수 있습니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Theme Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

 

위 코드는 기본 테마를 적용한 Flutter 애플리케이션의 예제입니다. primarySwatch 속성을 사용하여 기본 색상 팔레트를 설정합니다.

2. 다크 테마 적용

Flutter는 다크 테마를 간편하게 설정할 수 있습니다. darkTheme 속성과 themeMode 속성을 사용하여 다크 테마를 적용할 수 있습니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Theme Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
      ),
      themeMode: ThemeMode.system,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

 

위 코드는 다크 테마를 설정하고 시스템 설정에 따라 자동으로 라이트/다크 모드를 전환하는 예제입니다. brightness: Brightness.dark를 사용하여 다크 테마를 정의합니다.

3. 테마 데이터 커스터마이징

ThemeData 클래스를 사용하여 테마의 다양한 속성을 커스터마이징할 수 있습니다. 주요 속성으로는 primaryColor, accentColor, buttonTheme, textTheme 등이 있습니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Theme Demo',
      theme: ThemeData(
        primaryColor: Colors.teal,
        accentColor: Colors.amber,
        buttonTheme: ButtonThemeData(
          buttonColor: Colors.teal,
          textTheme: ButtonTextTheme.primary,
        ),
        textTheme: TextTheme(
          headline1: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),
          bodyText1: TextStyle(fontSize: 16.0, color: Colors.black87),
        ),
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Hello, World!', style: Theme.of(context).textTheme.headline1),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {},
              child: Text('Press Me'),
            ),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 primaryColor, accentColor, buttonTheme, textTheme 속성을 커스터마이징하여 테마를 설정하는 예제입니다. Theme.of(context).textTheme.headline1을 사용하여 텍스트 스타일을 적용합니다.

 

 

반응형

 

 

4. 테마 변경 기능 구현

사용자가 애플리케이션 내에서 테마를 변경할 수 있도록 하려면 StatefulWidget과 setState를 사용하여 테마를 동적으로 변경할 수 있습니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class _MyAppState extends State<MyApp> {
  ThemeMode _themeMode = ThemeMode.light;

  void _toggleTheme() {
    setState(() {
      _themeMode = _themeMode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Theme Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
      ),
      themeMode: _themeMode,
      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('Home Screen'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.brightness_6),
            onPressed: toggleTheme,
          ),
        ],
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

 

위 코드는 사용자가 버튼을 눌러 라이트 모드와 다크 모드를 전환할 수 있는 기능을 구현합니다. setState를 사용하여 테마 모드를 변경합니다.

결론

Flutter의 테마 시스템을 사용하면 애플리케이션의 스타일과 디자인을 일관성 있게 적용할 수 있습니다. 기본 테마 설정부터 다크 테마 적용, 테마 데이터 커스터마이징, 동적 테마 변경 등 다양한 기능을 활용하여 사용자 경험을 향상시킬 수 있습니다. ThemeData와 Theme 위젯을 적절히 활용하여 직관적이고 매력적인 사용자 인터페이스를 제공하는 애플리케이션을 만들어보세요.