[Flutter] ThemeData 설정하기

color값 보는 방법 (with colorzila)

 

https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ko 

ColorZilla

 

위 사이트에 들어가서 chrome 확장프로그램을 추가한다

 

우측 상단에 퍼즐모양을 클릭한다

고정해서 사용하면 편리

 

고정한 모습

 

Pick Color From Page를 선택하고, 색상을 알고싶은 곳에 마우스를 올려놓으면 

 

naver 로고 위에 마우스 올려놓음

상단에 rgb값과 hex값을 알 수 있다.

 

flutter에서 원하는 색상을 사용하려면

Color(0xff123456)과 같은 방식으로 사용한다.

앞에 ff는 투명도 설정이고 ff일경우 투명도 100 

---

 

특정 위젯한정 theme 적용

 

 

 

---

dark모드 light 모드 구분

 

MaterialApp 내부에 

darkTheme속성에 다크모드일때 색상을 입력하고 brightness 속성에 Brightness.dark 입력

theme 속성에 라이트모드일때 색상을 입력하고 brightness 속성에 Brightness.light 입력

themeMode 속성에 ThemeMode.system 으로 설정하면 사용자의 시스템 환경 설정에 따라 사용할 테마를 선택한다.

ThemeMode.light 로 설정하면 항상 라이트모드 , ThemeMode.dark로 설정하면 항상 다크모드

return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      themeMode: ThemeMode.system,
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primaryColor: Colors.green,
        primaryColorLight: Colors.yellow,
        primaryColorDark: Colors.orange,
        secondaryHeaderColor: Colors.blue,
        backgroundColor: Colors.cyanAccent,
        textTheme: const TextTheme(
          bodyText1: TextStyle(color: Color(0xff113311), fontSize: 20),
          bodyText2: TextStyle(color: Color(0xff223344), fontSize: 20),
        ),
      ),
      theme: ThemeData(
          brightness: Brightness.light,
          primaryColor: Color(0xff123456),
          primaryColorLight: Color(0xff987654),
          primaryColorDark: Color(0xff555555),
          secondaryHeaderColor: Color(0xff333333),
          backgroundColor: Color(0xff222222),
          textTheme: const TextTheme(
            bodyText1: TextStyle(color: Color(0xff131313), fontSize: 20),
            bodyText2: TextStyle(color: Color(0xff313131), fontSize: 20),
          )),
      home: MainHome(),
);

 

MaterialApp 내부에서 지정하면 소스가 너무 길어지므로 class 를 따로 빼서 관리하는게 좋다.

class Themes {
  static final light = ThemeData.light().copyWith(
      brightness: Brightness.dark,
      primaryColor: Colors.green,
      primaryColorLight: Colors.yellow,
      primaryColorDark: Colors.orange,
      secondaryHeaderColor: Colors.blue,
      backgroundColor: Colors.cyanAccent,
      textTheme: const TextTheme(
        bodyText1: TextStyle(color: Color(0xff113311), fontSize: 20),
        bodyText2: TextStyle(color: Color(0xff223344), fontSize: 20),
      ),
      inputDecorationTheme: InputDecorationTheme(
        labelStyle: TextStyle(color: Color(0xff3F3E5C), fontSize: 20),
        focusColor: Color(0xff37375C),
        enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(25.0),
        borderSide: BorderSide(color: Color(0xff37375C)),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(25.0),
        borderSide: BorderSide(color: Color(0xff37375C)),
      ),
      fillColor: Color(0xff9896df),
      filled: true,
      isDense: true,
      iconColor: Color(0xff37375C),
     ),
  );
  static final dark = ThemeData.dark().copyWith(
       brightness: Brightness.dark,
       primaryColor: Colors.green,
       primaryColorLight: Colors.yellow,
       primaryColorDark: Colors.orange,
       secondaryHeaderColor: Colors.blue,
       backgroundColor: Colors.cyanAccent,
       textTheme: const TextTheme(
         bodyText1: TextStyle(color: Color(0xff113311), fontSize: 20),
         bodyText2: TextStyle(color: Color(0xff223344), fontSize: 20),
     ),
  );
}

//MaterialApp
theme: Themes.light,
darkTheme: Themes.dark,

 

 

---

버튼으로 테마를 조절하고싶다면

GetX 사용

flutter pub add get

import 'package:get/get.dart';

 

MaterialApp -> GetMaterialApp 으로 변경

 

버튼 onPressed에 입력

if (Get.isDarkMode)
	Get.changeThemeMode(ThemeMode.light);
else
	Get.changeThemeMode(ThemeMode.dark);

 

---

+)

이것저것 테스트를 하다보니

Get.changeThemeMode와 Get.changeTheme의 차이가 궁금했다

 

Get.changeTheme은 핸드폰 설정이 다크모드일 경우, Get.isDarkMode의 값이 무조건 true여서 무조건 다크모드만 선택이 되었고 (라이트모드일때는 on/off가능)

 

Get.changeThemeMode의 경우 핸드폰 설정이 다크/라이트 모드에 상관없이 on/off가 가능했다.

 

좀더 알아봐야겠지만 일단 이런 특징이 있는것같다