📖 Flutter 레이아웃

📌 Column // 위에서 아래로 세로로 쌓는 박스
----------------------------------------------------------------
📌 Row // 왼쪽에서 오른쪽으로 가로로 나열하는 박스
----------------------------------------------------------------
📌 프로젝트에 이미지 추가하는 과정
     ├── 이미지 파일 추가하기
     ├── assets 폴더 만들기
     └── Pubspec.yaml에 등록하기
----------------------------------------------------------------
📌 StatelessWidget 에러 해결법 // build가 없으면 에러남
----------------------------------------------------------------
📌 Text // Text('문자열')
----------------------------------------------------------------
📌 Text 스타일 속성
     ├── fontWeight // 글자 굵기
     ├── fontSize // 글자 크기
     ├── Color // 글자 색상
     ├── letterSpacing // 글자와 글자 사이 간격
     └── height //  글자 줄 간 간격
----------------------------------------------------------------
📌 SafeArea // 자동으로 여백 (Padding)을 넣어줌
     └── 휴대폰마다 상단이나 하단이 조금씩 달라서 글자나 버튼이 겹칠 수 있음
----------------------------------------------------------------
📌 Flutter DevTools // 앱을 검사하고 모니터링할 수 있는 도구
     ├── 위젯 구조 확인 // 지금 앱 화면에 어떤 위젯들이 들거아 있는지 트리 형태로 보여줌
     ├── UI 디버깅 // 버튼이 안보이거나 레이아웃이 깨졌을 때 실제로 어떤 크기, 위치로 그려지고 있는지 확인 가능
     ├── 성능 체크 // 병목 구간을 찾을 때 유용
     └── 네트워크, 로그 확인 // API 호출 결과나 콘솔 로그 확인 가능
----------------------------------------------------------------
📌 Spacer // Row나 Column 안에서 빈 공간 차지하는 위젯
     ├── Spacer를 중간에 넣어두면 남은 공간을 차지해서 벌어져 보임
     └── Spacer(flex : 2)처럼 flex 갑을 주면 Spacer 보다 2배 넓게 공간 차지
----------------------------------------------------------------
📌 Padding // 위젯 주변에 여백을 넣어주는 위젯
     ├── EdgeInsets.all(값) // 모든 방향에 같은 크기의 여백
     ├── EdgeInsets.symmetric(horizontal: 값) // 좌우에만 여백
     ├── EdgeInsets.symmetric(vertical: 값) // 위아래만 여백
     └── EdgeInsets.only(left: 값, ...) // 원하는 방향만 골라서 여백
----------------------------------------------------------------
📌 Image // 화면에 이미지를 보여주는 위젯
     ├── 네트워크 이미지 // Image.network
     ├── 에셋 이미지 (프로젝트 안에 저장된 파일) // Image.asset
     └── 파일 이미지 (내 폰/ PC 안에 저장된 파일) // Image.file(File())
----------------------------------------------------------------
📌 Image Fit 속성 // 이미지를 어떻게 공간 안에 맞출지 정하는 옵션
     ├── Contain 
     │      ├── 원본 사진의 비율 그대로 유지
     │      ├── 액자 안에 전체가 다 보이도록 축소/확대
     │      └── 여백 생길 수 있음
     ├── Fill
     │      ├── 원본 사진의 비율 무시
     │      ├── 액자를 꽉 채워서 늘림
     │      └── 사진 찌그러질 수 있음
     └── Cover
            ├── 원본 사진 비율 유지
            ├── 액자를 꽉 채우도록 크게 확대
            └── 사진 일부가 잘릴 수 있음
----------------------------------------------------------------
📌 Expanded // Row, Column 안에서 남은 공간을 자동으로 차지하게 만드는 위젯
----------------------------------------------------------------
📌 SizedBox // 이름 그대로 크기가 있는 박스 위젯
----------------------------------------------------------------
📌 Debug 배너 // Flutter 앱을 실행하면 위에 Debug 글자 보임
     └── debugShowCheckedModeBanner : false 입력