강의 예제 4번 BMI 계산기 앱 만들기
기능 구현에 앞서 앱의 기본 구조를 먼저 이해하고, 나누고,
각 폴더 별 기능을 순차적으로 구성하는 방법으로 차근 차근 진행해보려고 한다.
정말 기초의 기초를 시작해보자!

⭐️오늘의 목표

HomePage의 AppBar, GenderBox 까지 구현을 해보기!

BMI 계산기 앱 만들기

🔽 해당 앱에서 요구하는 기술

• 페이지 이동
• 테마
• 추가적인 위젯

Scaffold 위젯 내에서 상단의 AppBar와 Body부분의 GenderBox 위젯까지 구조를 짜보는 것을 목표로 한다!

---

1️⃣ 레이아웃 나누기

우선 메인화면인 HomePage의 가장 큰 구조를 파악해 보자면,

세로방향인 Calumn

Scaffold라는 큰 박스 안에
1. AppBar : 최상단에 위치해 있고,
하단의 Body부분에는
2. GenderBox : 성별을 선택하는 위젯,
3. SliderBox : 키를 조정하는 위젯,
4. SliderBox : 몸무게를 조정하는 위젯,
5. ElevatedButton : 선택을 완료하고 저장하는 버튼 위젯

5영역으로 레이아웃이 나뉘어져 있다.

가로방향인 ROW

1. AppBar
: 어플의 이름이 text 형식으로 가운데 존재함
2. GenderBox
: MALE / FEMALE 2가지 선택창 영역으로 나뉘어 있음
3. SliderBox
: 좌측상단에 text, 우측상단에 text
하단에 SlideBar
세로 방향으로 2가지 영역이 나뉘어 있음
4. SliderBox
: 3번과 동일한 구조로 좌측상단에 text, 우측상단에 text
하단에 SlideBar
세로 방향으로 2가지 영역이 나뉘어 있음
5. ElevatedButton
: 박스 영역 안에 text가 가운데 영역에 있음

내가 예상한 구현 방법과 실제 강의를 보면서 코드를 작성하며 어떤 점이 틀렸는지,
다른 방법이 있는지 비교분석을 해보고자 한다!

---

❓어떻게 구현이 되어있을까? 나의 생각을 글로 먼저 써보았다!

1. AppBar
: container 안에 text를 넣었을 때, text는 좌측 상단에 위치해 있을 것이다.
text가 가운데 위치하도록 Padding값을 적용해 상단, 좌측에 값을 넣어준다.
text는 font를 적용시키고, fontStyle에서 크기를 조정한다.

2. GenderBox
: MALE / FEMALE 로 나뉘어 있지만 구조는 동일하기에 icon과 text만 변경해서 동일하게 적용하면 될 것 이다.
container 안에 box를 2개 생성한 뒤 box의 size를 지정해준다.
각 box가 가로로 배치가 되도록 정렬을 해준다.
box의 내부는 2개 영역으로 나뉘어서 좌측 상단에 icon이 있고, 그 아래에 우측 하단에 text를 넣는다.

icon의 style에서 size와 color를 변경해준다.
text의 style에서 fontStyle과 size를 변경해준다.
icon과 text가 box가장자리에서 약간 떨어져 있으므로 2개를 묶어서 Padding값을 사방으로 동일하게 적용해준다.
box의 테두리를 만들어준다. color는 black이고, size는 1정도로 얇다.

각 box를 선택을 했을 때, 클릭한 box는 text의 색상이 진하게 변하도록 한다.

각 box가 완성이 되었으면, 좌측에 2개의 box가 붙어서 있을 것이라고 예상이 된다.
box사이에 간격값을 넣어주고, 2개의 box를 하나로 잡고 양쪽에 동일한 간격으로 떨어지게 값을 넣어준다.
상단의 AppBar와도 간격을 넣어준다.

3. SliderBox
: text가 3개가 container 안에 가로로 정렬되게 한다.
좌측 상단에 위치해 있을 것이라고 예상하며, 하단으로 정렬 시킨다.
'173'과 'cm'를 우측으로 이동시킨다.
각 text의 fontStyle 크기와 두께를 설정해준다.

sliderBox를 구현해준다.
slider가 움직일 때 값이 변경되는 함수가 필요하다.
함수에서 적용되는 값은 사람 키를 기준으로 120~230까지 적용시키면 될 것 같다.
변경된 현재 값이 적용이 된다.

숫자 text는 slider의 값에 따라 반영되어 변경 적용된다.
양 옆에 값을 줘서 가장자리에서 떨어질 수 있게 한다.
상단의 GenderBox와도 간격을 조정해준다.

4. SliderBox
: 3번과 동일한 구조로 적용되며 text와 최대 반영값을 변경해준다.
함수에서 적용되는 값은 사람 몸무게를 기준으로 30~150까지 적용시키면 될 것 같다.

5. ElevatedButton
: box에 height와 color를 지정해준다.
box안에 text가 좌측 상단에 위치할 것이라고 예상.
text를 상, 좌에 값을 줘서 가운데로 위치시켜준다.
text의 fontStyle과 크기, color를 설정해준다.

box의 상하좌우가 떨어지도록 값을 적용시킨다.

공통
스마트폰의 기종에 따라 화면의 사이즈가 다를텐데 비율이 다를 때 오류가 생길 부분을 고려해서 구조를 짜야 한다고 생각한다.
그리고 공통적으로 적용되는 부분이 뭔지 파악을 하고 큰 그림부터 그려나갈 수 있게 생각을 해야겠다.

---

⁉️ Flutter내에서 코드를 작성할 때 해야할 순서

[ 환경구성 ]
1. 각 폴더를 만들어주기
: main 기본폴더 / HomePage 폴더 / ResultPage 폴더
ㄴ 각 Page폴더에 하위폴더로 wigets폴더를 생성

2. 필요한 Font와 image들을 폴더에 넣어주고, pubspec.yaml에서 적용을 시켜준다.

[ 코드를 작성 한다면? ]
1. main.dart 파일의 예제코드를 제거
1-1. 적용할 테마가 있다면 ThemaData 클래스를 정의해서 속성에 적용시킨다.

2. HomePage부터 구현을 시켜주는데 레이아웃으로 나눈 widget을 생성하고 배치시킨뒤, text와 icon들이 들어갈 순서를 먼저 잡아준다.

3. 위젯 별로 큰 틀이 잡혔다면 AppBar에서 부터 순차적으로 코드를 넣어서 완성 시켜준다.

---

⁉️ 어떤 구조와 함수가 들어갔을까?

1. AppBar

2-3. GenderBox 위젯 구조

• 가로배치 Row 사용
• children은 Container, Icon, Text 위젯 사용
• Container 안에서 Icon과 Text의 배치는 Column
• Stack 구조로 자식 위젯들을 겹칠 때 사용함. Positioned위젯을 사용

4. SliderBox

5. ElevatedButton

---

251217 TIL

😲 [ 트러블 슈팅 ]

❗️[ 문제점 발생 ]
AppBar까지 구현을 하고 gender_box폴더를 만들어서 기본 위젯 구성을 확인하며 진행하려고 했지만 어쩐지 시뮬레이터에서 구현이 안된다.
Container안의 높이, 너비 값을 주지 않아서 생긴 문제라고 생각이 들어 값을 주었지만 여전히 문제는 해결되지 않았다.

❗️[ 문제 원인 ]
home_page폴더에서 body영역 내에 gender_box를 호출해주지 않아서 생긴 기초적인 문제였다.

❗️[ 해결 ]

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("BMI CALCULATOR")),
      body: Column(
        children: [
          GenderBox(), // 젠더박스 폴더를 홈페이지 폴더에 적용시킴
          
        ],
      ),
    );
  }
}

구조를 짤 때 미리 위젯들의 큰 틀을 잡아놓고, 위치를 확인하는 용도로
간단한 text정도를 입력해 놓고 하나하나 완성을 해 나가는게 순서였다.

오늘은 정말 기초적인 구조를 파악하고 구현을 해보려고 노력을 했다.
하지만 헤매는 부분이 많아 시간낭비가 심했고,
빠른 문제 해결을 위한 방법을 찾아내야겠다.
아직까지는 구조도 짜고 호출을 하는 방식이 너무 낯설어서 걱정이 되지만
최대한 많은 코드를 쳐보고 다양한 기능들을 구현해보며 성장하는 모습을 보이고 싶다!

---

• 강의와 차이점!!
  전체적인 위젯의 기본 테마를 먼저 다 구성한 다음 디테일한 부분을 진행하였다.
  젠더박스를 구성할 때 내부를 컬럼이나 로우 둘 중 아무거나 사용해도 상관 없다. 그 안에서 배치를 어떻게 해주느냐의 문제

(지금은 구조를 연습하느라 강의 예제와 다르게 진행중이지만!)

• 테마를 먼저 적용하는게 낫다.
  생길 수 있는 문제점: 텍스트의 경우 텍스트스타일로 컬러를 지정할 수도 있지만 테마가 바뀌면 지정이 안됨
  color: thema.of(context).를 써서 적용시키는게 맞다.
  다양한 값들을 설정해줄 수 있다! 자동으로 색상을 뽑아줌
  1번 강의에 테마데이터 정의하는 방법 참조