https://dribbble.com/ [디자인 참고]
How to Use Flutter Themes
Flutter > cookbook 참고
기본 테마를 사용하는 경우, 코드 작성이 필요 없다.
사용자가 테마를 지정하고자 하는 경우, ThemeData 위젯을 사용한다.
theme: ThemeData(
primaryColor: Colors.red,
accentColor: Colors.purple,
),
팔레트 외의 색을 지정하고 싶은 경우, 16진수 색상 코드를 사용한다.
[colorZilla 이용 추천] - 스포이드를 이용해 원하는 색상의 16진수 코드를 알 수 있다.
색상을 나타내기 위해 A(투명도)R(Red)G(Green)B(Blue) 32비트가 필요하다.
각 부분을 디자인해도 되지만 기본적으로 dark 테마를 두고 일부분만 변경하고 싶은 경우,
theme: ThemeData.dark().copyWith(
accentColor: Colors.green,
scaffoldBackgroundColor: Color(0xFF0A0E21),
primaryColor: Color(0xFF1D1F33),
),
lib > 우클릭 > New Dart File 를 통해 Dart file를 생성해 코드를 세분화, 구조화할 수 있다.import를 통해 필요한 package와 file를 받아 온다.
How to Refactor Flutter Widgets
Refactoring: 사용자가 보는 외부 화면은 그대로 두면서 내부 논리나 구조를 바꾸고 개선하는 유지보수 행위
코드에 유사한 부분이 자주 반복될 때 반복 횟수를 줄여준다.
flutter outline > 원하는 위젯에서 우클릭 > extract widget > 위젯 이름 설정
flutter가 반복되는 위젯을 class로 생성해준다.
특정 값만 다른 값으로 설정하고 싶은 경우, 생성자에 Key 값으로 두고, 함수를 쓸 때 설정해준다.
@required Keyword를 추가해 꼭 필요한 요소들을 입력하도록 한다.
[Dart] final vs const
많은 용어가 나오고 종종 유사한 용어도 나오기 때문에 프로그래밍 용어 정리를 해두는 것이 좋다.
Immutability (불변성)
레고 블럭처럼 쪼개거나 바꿀 수 없다.
한 번 설정하면 값을 변경할 수 없다.
final과 const는 한 번 값을 설정하면 값을 변경할 수 없다는 점에서 매우 유사하지만, 차이점도 존재한다.
const int myConst = 2;
final int myFinal = 3;
myConst = 4; // error
myFinal = 5; // error
const와 Final의 차이점
const의 경우 compile-time constant이다.
compile-time constant: compile time에서 계산 될 수 있는 값
runtime constant: 프로그램이 실행되는 동안에만 계단 되는 값이다.
동일한 프로그램이 두 번이상 실행되는 경우:
compile-time constant는 응용 프로그램이 실행될 때마다 동일한 값을 갖는다.
runtime constant는 응용 프로그램이 실행될 때마다 다른 값을 가질 수 있다.
따라서 const는 runtime에서 정의되는 값을 설정할 수 없다.
DateTime.now()는 runtime이 호출될 때마다 값이 바뀌기 때문에 const로 설정할 수 없다.
final은 runtime에서 정의되는 값도 설정할 수 있다.
const int myConst = DateTime.now(); // compile error
final int myFinal = DateTime.now(); // correct!
const 상수를 이용해 특정 코드의 위치로 이동할 필요없이 변수 이름만 보고 값을 설정할 수 있다.
The GestureDetector Widget
GestureDetector를 이용해 Tap을 했을 때 색상이 바뀌게 하도록 설정해주었다.
child: GestureDetector(
onTap: () {
setState(() {
// Tap했을 때 상태 설정
});
},
)
[Dart] Enums
Boolean과 같이 True/False 두 가지 경우만 존재하는 것이 아니라 여러 가지 경우가 존재한다.
숫자에 의존하는 것이 아니라 옵션에서 의미가 있는 이름을 점으로 표시할 수 있다.
enum EnumName { typeA, typeB, typeC }
EnumName.typeA
[Dart] Ternary Operator (삼항 연산자)
Condition ? DoThisIfTrue : DoThisIfFalse
Flutter slider Widget
constants를 따로 모아놓은 dart file을 만들면 설정하기 편하다.
우클릭 > Refactor > Rename > 모든 해당 변수에 대해 바뀐 이름이 적용된다.
※ C는 다른 명칭에 많이 사용되기 때문에 상수 앞에 K를 붙여주는 것이 관례이다.
K를 입력하면 Android Studio관련 상수를 모두 표시할 수 있어 편리하다.
테마로 위젯 사용자 정의
.of(context)는 현재의 Slider의 theme를 포함한다.
.copywith() 괄호 속에 사용자가 원하는 Theme로 디자인을 적용할 수 있다.
SliderTheme(
data: SliderTheme.of(context).copywith(
// slider 원하는 부분 디자인
)
child: Slider(
)
)
반응형
'Flutter' 카테고리의 다른 글
[Dart] Final vs Const (0) | 2021.03.09 |
---|---|
[Flutter] A RenderFlex overflowed by 58 pixels on the right (0) | 2021.03.04 |
[Flutter] SafeArea (0) | 2021.02.10 |
[Flutter] Icon 사진 변경 (0) | 2021.02.10 |
Hot reload & Hot restart (0) | 2021.02.10 |