1. File → New → New Flutter Project 들어가기!
Project name 은 대문자, 아래 바, 카멜 은 쓰며 쓸 수 없다.
2. 코드 로직 시작!
무조건 이렇게 처음 실행 할 거다.
3. 디자인 선택 하기 (MaterialApp vs CupertinoApp)
MaterialApp 이걸 쓰는 이유는 안드로이드로 개발하기위해서화면에 디버그 없애고 싶으면
debugShowCheckedModeBanner: false, 입력해준다.
4. home : Scaffold (뼈대 만들기)
5. body : , child 영역 만들어주기
코드설명
- SafeArea: 화면의 안전한 영역을 보장해주는 위젯으로, 시스템 UI에 의해 가려지지 않도록 보호합니다.
- Column과 Row: Column은 세로 방향으로 위젯들을 배치하며, Row는 가로 방향으로 배치합니다. 여기서는 Row가
mainAxisAlignment로 좌우 정렬을 관리합니다.
- Padding: 모든 앱에서 좌우 간격을 일정하게 주기 위해 16으로 설정하였습니다.
- Text 위젯: "Woman", "Kids", "Shoes", "Bag"라는 텍스트가 Row에 나열되고 있으며, 각 텍스트의 폰트 크기는 16입니다.
정리하면, SafeArea로 안전한 영역을 보호하고, Column과 Row로 레이아웃을 구성한 후, Padding으로 간격을 조정하여 네 가지 텍스트를 표시하는 구조입니다.
- spaceBetween
- spaceEvenly
6. Expanded, Image.asset, fit:
코드설명
- Expanded: 자식 위젯이 부모 위젯 내에서 남은 공간을 최대로 차지하게 만듭니다. 여기서는 이미지(
Image.asset)가 그 역할을 합니다.
- Image.asset: 주어진 경로의 이미지를 앱에 표시합니다.
fit: BoxFit.cover는 이미지를 컨테이너에 맞게 잘라내거나 확대하여 채우도록 설정합니다.
- SizedBox(height: 2): 두 이미지 사이에 2픽셀 높이의 간격을 넣기 위해 사용합니다. 이 경우
margin대신에 간단하게 크기를 설정하는 용도로SizedBox를 사용합니다.
정리하자면, 두 개의 이미지를 공간을 최대한 활용하여 화면에 표시하고, 그 사이에
SizedBox로 간격을 추가한 것입니다
- 이미지 폴더 만들기
pubspec.yaml
- assets 설정하기! (무조건 두칸 스페이스가 컨벤션이다!!)
- 스페이스 잘 못 띄어지면 오류가 난다.!
bulid.gradle처럼 Put get 해주고 실행 재시작하기!
Image 넣으면 필수 로직
7. Flutter Incepoor 활용하기
1. Console 창에 버튼 클릭하기
2. 옆 바에서 버튼 클릭하기
8. 완성 본
- 웹
- 안드로이드 웹
Share article
