FLUTTER #4 BMI Calculator

📚이 포스트는 안젤라의 유데미 플러터강의를 듣고 제가 찾아본 내용을 바탕으로 작성한 글입니다! 📚

 

Theme Widget

https://www.colorzilla.com/ → 색 알아내기

color class https://api.flutter.dev/flutter/dart-ui/Color-class.html

themedata constructor : https://api.flutter.dev/flutter/material/ThemeData/ThemeData.html

 

테마 설정관련 

• theme : ThemeData.dark() ->다크모드 테마로 전환
• primarycolor → appbar색 바꾸기
• accentcolor → 버튼색 바꾸기
• width: double.infinity -> 화면 가득 채우기

 

Final VS Const(immutable)

final // 한번만 초기화 가능 // set only once

const // compile-time constant // 컴파일 시간 상수 // 컴파일 된 다음의 상수를 값으로 가질 수 없다.

 

Dart Enum

- 열거형

- bool(true, false)보다 많은 옵션을 가지고 싶을 때

enum EnumName{type A, type B, type C}
//실행하려면
EnumName.type A

 

mainAxisAlignment, crossAxisAlignment

UI를 구현하는 것이다 보니까 column, row와 같은 개념들이 많이 쓰인다.

하지만, 부끄럽지만 나는 이럴 때 수평과 수직이 코드로 쓸 때 헷갈리는 경험이 많았다.

column 과 row일 때 mainAxis와 crossAxis일 때가 각각 달라지기 때문에 혼동이었는데 아래의 이미지를 보고

이걸 외우고 column은 반대!로 생각하는게 편하겠다고 생각했다.

Slider Class

슬라이더 클래스에 대해서 이렇게 많은 속성들이 존재한다. 이러한 속성들은 #3의 포스트에서 어떻게 발견할 수 있는지 적어놓았다.

text에 string을 넣고 싶다면, height.to.String()을 사용하면 된다.

Text(
	height.toString(),
	style : kNumberTextStyle,
)
Slide(
  value : height.toDouble(),
  min : 120.0,
	max : 220.0,
	activeColor: Colors.pink,
	inactiveColor : Colors.grey,
	onChanged : (double newValue) {
	  height = newValue.round(); //움직이는 대로 키를 설정
}
),

 

🎨(팁) 이름 설정시 앞 문구를 통일시켜 찾기 쉽게 해줌 ex)kNumberTextStyle, kButtonTextStyle

 

Slider Theme

SliderTheme(
	data: SliderTheme.of(context).copyWith(
		thumbShape: RoundSliderThumbShape(enalbledThumbRadius : 15.0)
		// 동그라미부분 크기 늘리기
		overlayShape: RoundSliderOverlayShape(overlayRadius : 30.0)
		//눌렀을 때, 동그라미 크게 하나더 추가
		thumbcolor //동그라미 색깔 바꾸기
),

슬라이더의 테마를 위의 코드와 같이 움직이는 동그라미의 색, 크기 등을 바꿔줄 수 있다.

 

Composition

 

BASIC 하게 만들기

*FAB = FloatingActionButton

RawMaterialButton 쓰는 이유 FAB가 한 스크린에 하나 쓰이기를 권장하고 있기 때문

 

Navigating

https://flutter.dev/docs/cookbook/navigation/navigation-basics  

이제 앱에서는 누르면 페이지가 바뀌고 이런 설계를 해줘야 하기 때문에 Navigating이 필요하다.

이러한 네비게이팅에 대한 설명은 위의 공식문서를 보면 더 자세하게 나와있으니 꼭 참고하길 바람!

initialRoute:'/'
routes: {
    // When navigating to the "/" route, build the FirstScreen widget.
    '/': (context) => FirstScreen(),
    // When navigating to the "/second" route, build the SecondScreen widget.
    '/second': (context) => SecondScreen(),
  },

 

Dart Maps

Map<keyType, valuetype> mapname{
	key:Value
}

//실행
mapname[key]

 

Dart Ternary Operator(조건 연산자)

condition ? DoThisIfTrue : DoThisIfFalse