Flutter Theme

Flutter의 테마 시스템은 애플리케이션의 스타일과 모양을 일관되게 정의하고 관리하는 데 매우 중요한 역할을 합니다. 이를 통해 색상, 텍스트 스타일, 버튼 스타일 등을 전체 애플리케이션에 걸쳐 일관되게 적용할 수 있습니다. Flutter는 주로 두 가지 테마 시스템을 제공합니다: Material Design 테마와 Cupertino Design 테마.

Material Design 테마

Material Design은 Google에서 개발한 디자인 시스템으로, Flutter에서 이를 쉽게 사용할 수 있도록 ThemeData 클래스를 제공합니다.

주요 속성

• primaryColor: 기본 색상으로, AppBar, FloatingActionButton 등에서 사용됩니다.
• accentColor: 강조 색상으로, 스위치, 텍스트 필드 포커스 등에서 사용됩니다.
• backgroundColor: 배경 색상으로, Scaffold 배경색 등에 사용됩니다.
• textTheme: 애플리케이션 전체에 걸쳐 사용할 텍스트 스타일을 정의합니다.
• buttonTheme: 버튼의 모양과 스타일을 정의합니다.
• iconTheme: 아이콘의 모양과 스타일을 정의합니다.

예시

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,
        accentColor: Colors.orange,
        backgroundColor: Colors.white,
        textTheme: TextTheme(
          bodyText1: TextStyle(color: Colors.black, fontSize: 18),
          bodyText2: TextStyle(color: Colors.grey, fontSize: 16),
        ),
        buttonTheme: ButtonThemeData(
          buttonColor: Colors.blue,
          textTheme: ButtonTextTheme.primary,
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Hello, Flutter!'),
            ElevatedButton(
              onPressed: () {},
              child: Text('Click Me'),
            ),
          ],
        ),
      ),
    );
  }
}

Cupertino Design 테마

Cupertino Design은 iOS 스타일의 디자인 시스템으로, Flutter에서 이를 쉽게 사용할 수 있도록 CupertinoThemeData 클래스를 제공합니다.

주요 속성

• primaryColor: iOS 스타일의 기본 색상으로, 버튼 등에서 사용됩니다.
• textTheme: iOS 스타일의 텍스트 스타일을 정의합니다.
• barBackgroundColor: NavigationBar 등의 배경 색상을 정의합니다.
• scaffoldBackgroundColor: Scaffold의 배경 색상을 정의합니다.

예시

import 'package:flutter/cupertino.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Flutter Cupertino Theme Demo',
      theme: CupertinoThemeData(
        primaryColor: CupertinoColors.systemBlue,
        textTheme: CupertinoTextThemeData(
          textStyle: TextStyle(color: CupertinoColors.black, fontSize: 18),
        ),
        barBackgroundColor: CupertinoColors.systemGrey,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Home Page'),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Hello, Cupertino!'),
            CupertinoButton(
              onPressed: () {},
              color: CupertinoColors.activeBlue,
              child: Text('Click Me'),
            ),
          ],
        ),
      ),
    );
  }
}

테마 적용 및 관리

테마는 MaterialApp이나 CupertinoApp의 theme 속성을 통해 전역으로 설정할 수 있으며, 이를 통해 애플리케이션 전체에 일관된 스타일을 적용할 수 있습니다. 또한, 특정 위젯에만 적용되는 로컬 테마를 정의할 수도 있습니다.

예시: 로컬 테마 적용

import 'package:flutter/material.dart';

class CustomButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            primary: Colors.red,
          ),
        ),
      ),
      child: ElevatedButton(
        onPressed: () {},
        child: Text('Custom Themed Button'),
      ),
    );
  }
}

결론

Flutter의 테마 시스템은 애플리케이션의 스타일을 쉽게 관리하고 일관되게 적용할 수 있는 강력한 도구입니다. Material Design과 Cupertino Design을 통해 Android와 iOS 스타일의 앱을 모두 쉽게 구현할 수 있으며, 전역 테마와 로컬 테마를 적절히 활용하면 다양한 스타일 요구사항을 충족시킬 수 있습니다.