일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- GetX
- wrap
- xcode
- datetime
- swift
- AppleSilicon
- listview
- ios
- Mac
- iMac
- visualstudiocode
- Git
- database
- GitHub
- sqflite
- Android
- AppBar
- 카카오
- TextField
- 플러터
- react
- 내돈내산
- Flutter
- list
- 간단리뷰
- M1
- error
- VSCode
- 춘식
- 라이언
- Today
- Total
welcome to my blog
[Flutter] ThemeData 설정하기 본문
color값 보는 방법 (with colorzila)
https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ko
ColorZilla
Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies
chrome.google.com
위 사이트에 들어가서 chrome 확장프로그램을 추가한다
우측 상단에 퍼즐모양을 클릭한다
고정해서 사용하면 편리
Pick Color From Page를 선택하고, 색상을 알고싶은 곳에 마우스를 올려놓으면
상단에 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가 가능했다.
좀더 알아봐야겠지만 일단 이런 특징이 있는것같다
'Flutter' 카테고리의 다른 글
[Flutter] Wrap, Chip, FlowLayout (0) | 2022.01.11 |
---|---|
[Flutter ]textbuttonTheme (0) | 2022.01.11 |
[Flutter] not found command flutter (0) | 2022.01.04 |
[Flutter] image_picker를 이용한 카메라기능구현 (0) | 2022.01.03 |
[Flutter] build.gradle에서 빨간줄 뜰때 (0) | 2021.12.30 |