Flutter 입문하기
1. 플러터 기초
2. 예제 앱 실행해보기
😃Flutter 기초 다지기
Flutter 프로젝트의 구성 및 패키지 사용방법에 대해 알아보자
🔽[ 프로젝트의 구조 ]
⌄lib 폴더
플러터 개발을 하기 위해 작성하는 다트 코드들을 넣어두는 곳
각 플랫폼 별 폴더
⌄andriod
⌄ios
⌄linux
⌄macos
⌄web
⌄window
플로터 자체적으로 개발할 수 없는 기능들
-각 플랫폼 내 네이티브 코드로 작성하여 사용함
❕pubspec.yaml
-프로젝트의 구성에 대해서 선언
-Dart SDK 버전
-Flutter SDK 버전 명시
-사용할 패키지들 추가
-앱 내에서 사용할 이미지, 폰트 파일
pubspec.lock
-추가한 패키지들 명시됨
🔽[ 패키지 사용 ]
► 패키지란?
개발자들이 쉽게 사용할 수 있도록 특정한 기능들이나 UI등을 미리 구현해 놓은 것
► 사용법
pub.dev 플러터 공식 패키지 저장소에서 추가를 하면 된다!
https://pub.dev/
-shimmer 패키지 페이지의 instaling탭에서 코드를 복사해서
-pubspec.yaml폴더의 dependencis: 의 항목 내에서 추가해주면 된다.
주의할 점!
반드시 같은 열을 맞춰서 작성해야 한다. 어긋나면 에러가 발생한다.
패키지의 버전이 맞지 않을 때엔 에러가 남
이럴 땐 플로터 터미널에서 'flutter pub add shimmer' 를 입력한다.
이게 더 좋은 방법으로 추가됨!
기능 별 파일
하나의 클래스는 별도의 파일로 뺀다. 규모가 커지는 앱들
🍀main.dart 살펴보기
앱의 구조
► widget 이란?
- UI를 구성하는 기본 요소
- 버튼, 아이콘, 글자, 이미지 등
- 플러터 main함수에서 그 내에서 runApp으로 앱이 실행이 됨 그 아래 위젯들이 있다.
► MeterialApp 이란?
- myApp클래스 내에서 실행됨. 앱의 기본적인 구조와 디자인을 잡아줌
- 페이지 전환 애니메이션, 기본 버튼들의 디자인 등
- 플러터 앱의 최상단에서 실행
- 모든 앱에서 반드시 한번은 사용된다! 1개만 존재한다!
- 구글에서 디자인한 가이드
251216 모닝스터디 참조
► MeterialApp vs CupertinoApp
- 앱 전체를 구성해주는 앱 / ios가이드에 따라서 앱 전체를 구성해주는 앱
► Scaffold 이란?
- 각 페이지 별로 구조를 잡아주는 위젯
- 커맨드+클릭 해서 소스를 보면 AppBar, BottomNavigation, FloatingActionButton등 다양한 구조들을 제공해 줌
- 직접 구현도 가능하지만 오래걸리기 때문에 사용한다.
기본 레이아웃을 나누는 위젯
Column은 수직, Row는 수평으로 위젯들을 배치
🔅ios시뮬레이터 실행
► 스토어 앱 만들어보기
- 레이아웃(화면의 구조를 분할)
- 수직, 수평
- 주로 Column 방향으로 위치함
- 레이아웃 별 필요한 위젯 구조화
-Column
-Row
-Text
-Text
-Text
-image
-image- 구현하기
[ 이미지 추가해주기 ]
프로젝트를 생성했으면, 강의 예제에 있는 이미지 파일들을 Git에서 다운로드 받기
'assets'라는 폴더 생성해주기. 두 이미지 파일을 끌어와서 추가해줌
pubspec.yaml에서 파일이 있음을 선언해주기
위젯을 구현하기 위한 빌드
1) 클래스에서 UI요소를 구현하기 위해 필수적으로 각 페이지에는 Scaffold()가 들어가야 한다.
2) main에서 처음 실행 될 페이지를 선언하고 ios 가상 디바이스에서 실행해본다.
3) Row로 배치될 텍스트를 먼저 생성해준다.
4) SafeArea위젯 body의 Column을 위젯으로 감싸준다. 주변 부분에 여백이 생기게 됨
개별적인 위젯을 만들어줘서 각 구역을 나눠준다고 생각하면 된다!
최상단에 몰려있던 텍스트 들이 상단 위젯 부분 아래에 위치하게 됨
5) Text위젯의 Style속성에 TextStyle클래스를 선언해서 글자를 변경할 수 있다.
- 글자 두께, 크기, 색상, 자간, 높이 등 변경 가능
6) Flutter Devtools 앱의 UI레이아웃 검사 밒 성능 모니터링 도구
- Text를 적절한 위치로 배치하기 위해 Text위젯이 차지하고 있는 공간을 확인
7) Spacer 위젯 Row나 Colrumn 위젯 사이의 간격을 조정하는데 사용
- 사용 가능한 모든 공간을 차지함
8) Padding 위젯 Spacer를 사용해 간격은 벌려주었지만 첫번째, 마지막 글자가 화면 끝에 딱 붙어있게 됨.
- 자식 위젯 주위에 여백. 빈 공간을 만들어 줌
Padding(
padding: EdgeInsets.all(16.0),
child: Text('Hello World!'),
)*EdgeInsets클래스: 상하좌우 여백을 나타내는 클래스
9) Image 위젯 이미지를 화면에 표시하기 위한 위젯
- 네트워크: 인터넷 이미지를 바로 사용
- Asset: 프로젝트에 추가해준 이미지 사용
- File: 디바이스 내 저장된 이미지 사용
- 메모리: 메모리 내에 있는 이미지 사용
(강의예제 이미지 다운로드. Asset)
https://github.com/this-is-spartaa/flutter-store-app/blob/main/assets/shoes.jpg
10) Expanded 위젯 이미지가 차지하는 높이가 원하는 것과 다를 때 Column 내에서 남은 공간을 차지하게 해야한다.
- Spacer와 마찬가지로 flex라는 속성을 가지고 있다.
- fit 속성: 원본 이미지의 비율 변화시킴. 3가지
11) SizeBox 위젯 width 및 height 크기를 가지는 빈 상자
- 상자 내 위젯을 배치할 수 있으며
- 빈 상자로도 사용가능
12) debug 배너 해제 가상 디바이스 우측 상단에 붙어있는 디버그 라벨
- 배포환경이 아닌 개발 시 기본적으로 나옴
- 목적: 디버그 모드에서는 다트 가상머신이 한번 더 컴파일을 하는 구조라 느리다. 이걸 표시한 것. 디버깅 모드로 발표할 때 등 사용
😆앱 완성
간단한 앱을 만들어보며 위젯의 개념을 이해하고 사용하는 방법을 익혔다.
텍스트와 이미지를 넣고 사이즈와 위치를 편집하는 기초적인 방법
251215 TIL
트러블슈팅
- 위젯이 텍스트면 텍스트, 이미지면 이미지로 클래스나 함수가 딱 나뉘는 것이 아니라 그 안에서 하나씩 쌓아가는 구조여서 구분하기가 아직 어려웠다.
해야할 것
- 2번 예제도 따라해보며 구조를 이해하고 어떤 기능을 잘 모르는지,
어떤 기능을 구현해보면 좋을지 고민해보아야 한다.
