플러터 앱 만들기 (2) - Theme 적용하기

FlexColorScheme 으로 플러터 Theme 적용 

FlexColorScheme은 Flutter의 ThemeData를 확장하여 더욱 강력하고 쉽게 다크/라이트 테마를 설정할 수 있도록 도와주는 패키지입니다. 기본 ThemeData보다 더 많은 색상 조합을 제공하며, 머터리얼3(M3) 지원.

---

1.  간단한 사용법

1️⃣ 패키지 추가

dependencies: flex_color_scheme: ^7.0.0 # 최신 버전 확인 후 적용

 

또는 프로젝트 디렉토리에서 프로젝트 dependency package 추가 

%> flutter pub add flex_color_scheme 

 

2️⃣ 테마 적용하기

 

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: FlexThemeData.light(scheme: FlexScheme.deepBlue),
      darkTheme: FlexThemeData.dark(scheme: FlexScheme.deepBlue),
      themeMode: ThemeMode.system, // 시스템 모드에 따라 다크/라이트 자동 적용
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("FlexColorScheme 예제")),
      body: const Center(child: Text("쉽고 강력한 테마 설정!")),
    );
  }
}

 

 

자신만의 Custom ColorScheme을 만들 수도 있지만, FlexScheme의 기본 scheme 설정만으로 

다양한 color scheme을 적용 가능 합니다.

theme: FlexThemeData.light(scheme: FlexScheme.deepBlue)

 

*** FlexColorScheme Playground 컬러스킴 보기 ***********

https://rydmike.com/flexcolorscheme/themesplayground-v7-1/#/