Flutter 라이트모드/다크모드 설정

Flutter 에서는 라이트모드/다크모드를 지원해 준다. 좋다.. 

 

색상 정의 

우선 사용 할 색상을 정의해준다.

Colors.dart라는 파일을 하나 생성해서 LightColors 클래스와 DarkColors 클래스를 만들어주었다. 상수값이고 전역적으로 접근해야할 클래스는 멤버를 static const로 작성해 준다. static으로 선언했기 때문에 인스턴스화없이 접근할 수 있고 const로 정적바인딩 되므로 런타임에서 값을 변경할 수 없어 안전하다. 

 

// Colors.dart

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

class LightColors {

  // color define
  static const Color basic = Color(0xFFFFFFFF);
  static const Color orange1 = Color(0xFFEB8C1C);
  static const Color orange2 = Color(0xFFFFA842);
  static const Color blue = Color(0xFF3485FF);
  static const Color gray1 = Color(0xFFFFFFFF);
  static const Color gray2 = Color(0xFFF5F5F5);
  static const Color gray3 = Color(0xFFEEEEEF);
  static const Color gray4 = Color(0xFFDFE1E4);
  static const Color gray5 = Color(0xFF767676);
  static const Color gray6 = Color(0xFF4D4D4D);

  ///텍스트 컬러, 버튼 테두리, 버튼 텍스트, 버튼 반전 시 버튼 안의 색상
  static const Color textColor = Color(0xFF121212);

  static const Color important = Color(0xFF2D2D2D);
}

class DarkColors {

  // color define
  static const Color basic = Color(0xFF2D2D2D);
  static const Color orange1 = Color(0xFFEF8E1D);
  static const Color orange2 = Color(0xFFFFB55E);
  static const Color blue = Color(0xFF5196FF);
  static const Color gray1 = Color(0xFF1A1A1A);
  static const Color gray2 = Color(0xFF2B2B2B);
  static const Color gray3 = Color(0XFF3C3C3C);
  static const Color gray4 = Color(0xFF4D4D4D);
  static const Color gray5 = Color(0xFFAFAFAF);
  static const Color gray6 = Color(0xFFDCDCDC);

  ///텍스트 컬러, 버튼 테두리, 버튼 텍스트, 버튼 반전 시 버튼 안의 색상
  static const Color textColor = Color(0xFFDCDCDC);

  static const Color important = Color(0xFFFFFFFF);

}

// 테마에 따라 바뀌지 않는 컬러
class CommonColors {

  // color define
  ///차트에 사용 할 컬러
  static const Color red = Color(0xFFEF2D21);
  static const Color blue = Color(0xFF4881FF);

  ///관심종목
  static const Color yellow = Color(0xFFFAD113);


  static const Color green = Color(0xFF8ED9AB);
  static const Color onWhite = Color(0xFFFFFFFF);
  static const Color onBlack = Color(0xFF2D2D2D);

}

 

 

main.dart

main.dart에 일반적으로 아래와 같이 정의 되어 있을 것이다. 이제는 title 아래의 theme의 ThemeData를 설정해 주어 다크모드와 라이트모드를 설정 해 준다. 

import 'package:ebest/pages/IntroPage.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: '제모오오오오오옥',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: IntroPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

 

ThemeData 공식문서 를 보면 다양한 속성을 통해 색상을 커스텀할 수 있다. 예를 들어 appBar속성을 사용하면 자동으로 모드마다 색상이 바뀌어 나온다거나 할 수 있는데 커스텀 컴포넌트같은 경우는 일일이 색상을 지정해주어야한다. 그래서 colorScheme라는 속성을 통해 모드별 색을 지정하고 이를 이용해 색을 설정해 보는 방법을 사용 할 것이다. 

 

import 'package:ebest/pages/IntroPage.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'color/Colors.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: '제모오옹오오옥',
      theme: _lightTheme,
      darkTheme: _darkTheme,
      themeMode: ThemeMode.system,
      home: IntroPage(),
      debugShowCheckedModeBanner: false,
    );
  }


  ThemeData _lightTheme = ThemeData(
    appBarTheme: const AppBarTheme(
      backgroundColor: LightColors.gray2,
    ),
    colorScheme: const ColorScheme(
      primary: LightColors.orange1, // point color1
      onPrimary: LightColors.textColor, //required
      onSecondary:LightColors.textColor, //required
      primaryContainer: LightColors.orange2, // point color2
      secondary: LightColors.blue, // point color3
      background: LightColors.gray1, // app backgound
      surface: LightColors.gray2, // card background
      outline: LightColors.gray3, // card line or divider
      surfaceVariant: LightColors.gray4, // disabled
      onSurface: LightColors.gray5, // text3
      onSurfaceVariant: LightColors.gray6, //text2
      onBackground: LightColors.important, //text1
      error: CommonColors.red,  // danger
      tertiary: CommonColors.yellow, // normal
      tertiaryContainer: CommonColors.green, // safe
      onError: LightColors.basic, //no use
      brightness: Brightness.light,
    ),
  );

  ThemeData _darkTheme = ThemeData(
    appBarTheme: const AppBarTheme(
      backgroundColor: DarkColors.gray2,
    ),
    colorScheme: const ColorScheme(
      onPrimary: DarkColors.textColor, //required
      onSecondary:CommonColors.onWhite, //required
      primary: DarkColors.orange1, // point color1
      primaryContainer: DarkColors.orange2, // point color2
      secondary: DarkColors.blue, // point color3
      background: DarkColors.gray1, // app backgound
      surface: DarkColors.gray2, // card background
      outline: DarkColors.gray3, // card line or divider
      surfaceVariant: DarkColors.gray4, // disabled
      onSurface: DarkColors.important, //text3
      onSurfaceVariant: DarkColors.gray6, // text2
      onBackground: DarkColors.important, //text1
      error: CommonColors.red, // danger
      tertiary: CommonColors.yellow, // normal
      tertiaryContainer: CommonColors.green, // safe
      onError: DarkColors.basic, // no use
      brightness: Brightness.light,
    ),
  );
}

 

각 colorScheme 에 해당 하는 내용은 아래와 같고 ColorSchme 공식문서에 자세하게 나와있다

텍스트 색상:
onPrimary: Primary 요소 위의 텍스트 색상.
onSecondary: Secondary 요소 위의 텍스트 색상.
onSurface: Surface 요소 위의 텍스트 색상.
onSurfaceVariant: Surface Variant 요소 위의 텍스트 색상.
onBackground: Background 요소 위의 텍스트 색상.

 

요소 색상:

primary: Primary 요소의 색상.
primaryContainer: Primary Container(프라이머리 요소의 컨테이너)의 색상.
secondary: Secondary 요소의 색상.
background: 앱의 전체적인 배경 색상.
surface: 표면(예: 카드)의 색상.
outline: Outline(외곽선)의 색상.
surfaceVariant: Surface Variant(표면 변형)의 색상.
error: 오류를 나타내는 요소의 색상.
tertiary: Tertiary(세 번째) 요소의 색상.
tertiaryContainer: Tertiary Container(세 번째 요소의 컨테이너)의 색상.

 

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: '제모오옹오오옥',
      theme: _lightTheme,
      darkTheme: _darkTheme,
      themeMode: ThemeMode.system,
      home: IntroPage(),
      debugShowCheckedModeBanner: false,
    );
  }

 

GetMaterialApp에 theme와 darkTheme를 추가하고 방금 만든 ThemeData(_lightTheme, _darkTheme)를 넣어주면 된다. 

 

위젯에 컬러 지정

colorScheme 으로 지정 된 컬러를 위젯에 직접 설정 하고 싶다면 이렇게 사용 해 주면 된다. 

context.theme.colorScheme.background

 

 

모드 설정 버튼 

이제 라이트모드로 할 것인지 다크 모드로 할 것인지 설정 하는 버튼을 하나 만들어 준다. 

  Widget toggleMode() {
    final isDarkMode = Get.isDarkMode;
    final newTheme = isDarkMode ? ThemeData.light() : ThemeData.dark();
    final modeToCheck = isDarkMode ? "light" : "dark";

    return InkWell(
        onTap: () {
          Get.changeTheme(newTheme);
          StoreUtils.instance.checkMode(modeToCheck);
        },
        child: Icon(isDarkMode ? Icons.nightlight_outlined : Icons.sunny,
            color: isDarkMode ? Colors.white : Colors.black));
  }

 

 

그러면 이렇게 된다~~ 아래 오류는 수정 중...헿