[Flutter] BMI Calculator - Building Flutter UI for Intermediates

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(
    
    )
)