[flutter] 플러터 프로바이더에서의 앱 테마 설정 방법

14 Dec 2023

flutter

플러터(Flutter) 앱에서 앱 테마를 설정하는 것은 사용자 경험을 향상시키는 데 중요합니다. 앱 테마는 앱 전체적으로 적용되는 색상, 폰트, 아이콘 등의 스타일을 정의합니다.

1. 앱 테마 설정

플러터에서 앱 테마를 설정하려면 flutter/material.dart 패키지에 내장된 Theme 위젯을 사용해야 합니다. 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.green,
        fontFamily: 'Roboto',
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('앱 테마 설정 예제'),
      ),
      body: Center(
        child: Text(
          '앱 테마 설정 예제',
          style: Theme.of(context).textTheme.headline4,
        ),
      ),
    );
  }
}

위 코드는 앱 전체적으로 파란색을 기본 색상(primary color)으로, 초록색을 강조 색상(accent color)으로 설정하며, 폰트는 Roboto로 지정합니다.

2. 프로바이더를 통한 앱 테마 동적 변경

가끔은 앱 사용 중에 앱 테마를 동적으로 변경해야 하는 경우가 있습니다. 플러터의 Provider 패키지를 사용하면 상태 관리를 편리하게 할 수 있습니다.

아래는 Provider를 사용하여 앱 테마를 동적으로 변경하는 예제 코드입니다:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider<ThemeNotifier>(
      create: (_) => ThemeNotifier(),
      child: MyApp(),
    ),
  );
}

class ThemeNotifier with ChangeNotifier {
  ThemeData _themeData;

  ThemeNotifier() {
    _themeData = ThemeData.light();
  }

  getTheme() => _themeData;

  setTheme(ThemeData themeData) {
    _themeData = themeData;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: Provider.of<ThemeNotifier>(context).getTheme(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('프로바이더를 통한 앱 테마 설정 예제'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            if (Provider.of<ThemeNotifier>(context).getTheme() == ThemeData.light()) {
              Provider.of<ThemeNotifier>(context, listen: false).setTheme(ThemeData.dark());
            } else {
              Provider.of<ThemeNotifier>(context, listen: false).setTheme(ThemeData.light());
            }
          },
          child: Text('테마 변경'),
        ),
      ),
    );
  }
}

위 코드는 Provider를 사용하여 앱 테마 객체를 관리하고, 앱에서 테마를 변경할 수 있는 버튼을 추가한 예제입니다.

앱 테마의 동적 변경 및 관리를 위해 프로바이더를 사용하는 것은 사용자에게 더 나은 경험을 제공하는 데 도움이 됩니다.

앱 테마 설정에 대한 자세한 내용은 플러터 공식 문서를 참고하시기 바랍니다.

위의 정보가 유용하길 바랍니다. 부가적인 정보가 필요하다면 이메일로 문의해주세요!