Flutter로 앱 만들기 공부

 

코딩애플로 Flutter로 앱 만들기 공부한거 메모

 

 

하나의 코드베이스로 아이폰 & 안드로이드 앱 둘 다 만들 수 있는 플러터

웹 페이지, 윈도우 데스크탑 프로그램도 만들 수 있긴 함

 

Dart 언어 씀(JavaScript와 비슷)

 

레이아웃, 스타일, 기능개발 Dart 언어로 모두 가능

 

장점: 빠른 시간에 완성도 높은 결과물 만들 수 있다

 

 

세팅하기

1. Flutter SDK 다운 후 압축 풀기
2. 안드로이드 스튜디오 설치(m1 맥북은 ARM), 설치 중 Virtual Device는 나중에 설치
   1. plugin에서 Flutter 플러그인 설치
   2. SDK Manager에서 SDK Tools에서 Android SDK Command-line Tools 설치
3. 환경변수 등록
   1. 윈도우) 검색 - 시스템 환경 변수 편집 - 환경 변수 - Path 눌러서 편집 - 새로 만들기 - flutter bin 폴더 경로 추가
   2. 맥북) 터미널이 zsh면 touch ~/.zshrc 와 open ~/.zshrc 입력, bash면 touch ~/.bash_profile 과 open ~/.bash_profile 입력  후 텍스트 편집기 뜨면 export PATH="$PATH:플러터폴더경로/bin"
4. 크롬 브라우저, 터미널에서 flutter doctor 입력

 

안드로이드 스튜디오에서 New Flutter Project

 

어떤 플랫폼

 

여기가 메인페이지

 

 

analysis_options.yaml 열어서

rules: 4줄 추가 (Lint 끄기)

 

main.dart에 void main() 아래 다 지우기

 

stless 탭 치고 MyApp 적기

 

위젯 짜집기로 앱 디자인함

ex) 글자 넣으려면 Text('글자')

 

위젯 4가지

1. 글자: Text('글자')
2. 아이콘: Icon(Icons.아이콘이름)
3. 네모박스: Container() 혹은 SizedBox()
   • Container(width: 50, height: 50, color: Colors.orange)
     • 플러터의 사이즈 단위는 LP (50LP == 1.2cm)
     • 하지만 위 코드 치면 화면 다 차는 박스가 만들어지는데
     • Center() ← 내 자식 위젯의 기준점을 중앙으로 설정
       • Center( child: Container(width: 50, height: 50, color: Colors.orange), )
       • 위젯( child: 위젯() )
4. 이미지: Image.asset('경로')
   1. assets 폴더 만들어서 이미지 넣기
   2. 이미지 등록해야 하는데
      1. pubspec.yaml 파일에 flutter: 에다가

에러나서 const 지움. 경로는 assets/ 넣는게 정확함

 

---

 

레이아웃 만들기

 

MaterialApp()도 위젯

 

아이폰 기본 앱 스타일 원하면 Cupertino어쩌구() 사용

 

커스터마이징 하려면 MaterialApp() 쓰면 됨

 

상중하 나눠주는 Scaffold() 위젯

 

여러 위젯 가로 배치

Row( children: [ ] )

rules에 맨 아래줄 추가하기

 

세로 배치는

Column( children: [ ] )

 

중앙 정렬은

mainAxisAlignment: MainAxisAlignment.center, ← display: flex와 유사

위에는 가로축 정렬이고

세로축은

crossAxisAlignment: CrossAxisAlignment.center,

 

Column은 mainAxis가 세로라서

 

컨트롤 스페이스 누르면 자동완성 뜸

---

 

 

위와 같이 하면,

 

BottomAppBar 높이 조절은? Container 안에 Row 하면 됨

그리고 height 주면 됨

 

이미 height 잘 나와서 굳이 안함. height 안먹기도하고.

 

width, height, child만 필요한 박스는 SizedBox() 쓰면 좋고

그 외엔 Container()

 

 

박스에 여백 주는 법은

margin: EdgeInsets.all(20) 주니까

 

padding도 줄 수 있음

 

일부 여백 주려면

EdgeInsets.fromLTRB( , , , )

 

나머지 박스 스타일은 decoration 안에 넣기

에러나는데 BoxDecoration 켜면 Colors 두 번 못줘서 그럼

 

 

박스 위치 정렬

Center() 안에 담으면 정중앙 정렬됨

 

정중앙 싫으면 Align 써서

 

박스 width 가로로 꽉 차게는(부모 안 넘게)?

width: double.infinity

---

 

Text()

글자 디자인은 style: TextStyle()

 

텍스트 색상

1. Colors.컬러명
2. Color(0xffaaaaaa)
3. Color.fromRGBO(r, g, b, opacity)

 

필요 시 검색해서 사용하기

두께 (100 부터 900 까지)

 

버튼 디자인

1. TextButton()
2. IconButton()
3. ElevatedButton()

버튼엔 child: 와 onPressed: 넣어야 잘보임

IconButton() 은 icon: 과 onPressed:

 

 

AppBar 디자인하는 법은

title: 왼쪽 제목

 

leading: 왼쪽에 넣을 아이콘

 

 

actions: [우측아이콘들]

 

 

레이아웃 혼자서도 잘 짜려면?

1. 예시 디자인 준비
2. 예시 화면에 네모 그리기 (빈 공간 없게 네모 그리기)
3. 바깥 네모부터 하나하나 위젯으로
4. 마무리 디자인

---

 

박스 폭을 %로 주기: Flexible

박스 하나를 넓게 채우기: Expanded

 

박스 폭을 50%로 설정하려면?

→ Flexible() 로 감싸기

 

 

Row() 안에서 박스 하나만 꽉 채우려면? Expanded() ← flex: 1 가진 Flexible 박스랑 똑같음

 

 

박스 디자인 의도와 다르면

1. 사이즈
2. 박스 위치
3. DevTools 확인

---

 

커스텀 위젯 ← 레이아웃용 위젯들이 너무 길 때

 

stless 치고 탭키

class 작명하고 return 옆에 축약할 레이아웃 넣기

 

 

이제

이렇게 쓸 수 있음

 

커스텀 위젯은 class(변수, 함수 보관하는)로 만든다

 

 

변수, 함수 문법으로도 축약 가능하다

 

평생 안바뀔 로고, 상단바, 하단바 같은 것들은 변수 함수로 축약해도 상관없으나

바뀌는거는 성능 이슈 생기므로

커스텀 위젯(class 문법)으로 만든다

 

커스텀 위젯은 state 관리 힘들어질 수도 있으므로

재사용 많은 UI들이나 큰 페이지들을 커스텀 위젯으로 만든다

 

이렇게 위젯 많다고 스크롤바 자동으로 생기지 않음

그러므로 ListView() 안에 넣어서 스크롤바 생기게 한다

스크롤 위치 감시도 가능하고 메모리 절약 기능(성능 개선)도 있음

---

 

ListTile() 쓰면

이런거 만들기 쉬움

 

근데 목록이 여러개면?

반복문 써야함 

 

ListView.builder() 위젯 넣고 파라미터 2개 입력하기

itemCount: 리스트수

itemBuilder: (context, i){ return 반복할위젯 }

 

 

Dart 기본 함수 print 써서 출력

alt + 4 터미널창에서 디버깅

---

 

 

const 지우면 린트 에러 없어짐

 

근데

이렇게 했을 때 버튼은 그대로 1이 나온다

재렌더링이 안되어서 그럼

 

재렌더링은 state 쓰면 됨

 

데이터 잠깐 저장하는 곳은 변수다

Flutter에서는 변수 아니면 state

 

일반 변수는 그냥 변수

state는 값이 변할 때 그 값 가진 위젯이 자동 재렌더링됨

 

state 만드는 방법은,

StatefulWidget 만들기

stful 탭키

state는 StatefulWidget 안에서만 생성 가능하다

 

근데

StatelessWidget 변환하면 됨

변환하고 그냥 변수 만들듯 하면 됨

 

근데 왜 재렌더링 안될까?

state 변경하려면 그냥 변경하면 안되고

setState((){ 여기서 })

 

앱 이름도

이렇게 할 순 있지만 앱 이름은 그냥 하드코딩하는게 좋음

 

자주 바뀌는 데이터들,

바뀌면 바로바로 보여야하는 데이터들을 state로 만들면 좋다

 

이름 옆에 '좋아요' 버튼과 좋아요 개수 카운트하려면?

각각의 좋아요 개수 기록할 공간

---

 

버튼 누르면 Dialog(모달) 띄우기

위와 같이 하면 안되는데

보통 첫페이지는 Scaffold() 부터 시작하기 때문에

MaterialApp() 끝나는 괄호까지 바깥으로 보낸다

 

context 란?

커스텀 위젯 만들 때마다 생김

부모 위젯들의 정보를 담고 있는 변수

부모 중에 MaterialApp 있는지 찾아주세요

 

showDialog()

Scaffold.of()

Navigator.pop()

Theme.of()

와 같은 함수들은 context 입력해서 써야함

 

showDialog()는

MaterialApp이 들어있는 context를 입력해야 잘 동작하는 함수

 

Builder 라는 위젯으로 감싸는 방법도 있음

 

Dialog() 내부 디자인

 

부모 위젯의 state를 자식 위젯이 쓰고 싶다면?

부모 → 자식 state 전송하는 방법은

1. 보내기
   • 자식위젯(작명: 보낼state)
2. 등록하기
   • 2 곳에 등록
3. 사용하기

보내기

등록하기

const 지우거나 var 대신 final(수정 안됨) 쓰기

부모가 보낸 state는 read-only가 좋음

사용하기

 

 Dart 문법

클래스 만들 때,

class 안에 클래스명(파라미터) 이런거 넣을 수 있는데

그렇가 하면

DialogUI() 쓸 때 파라미터 입력 가능

중괄호 넣으면 선택적 파라미터

 

자식이 부모로 state 전송은 안되고

옆 위젯끼리도 state 전송 안되고

부모 → 자식만 가능

많은 곳에서 쓰는 state는 MyApp 이런 곳에 넣는다

---