Flutter 배우기 #2 개발 환경 구축 및 기본 위젯 익히기

출처

https://www.youtube.com/watch?v=dnm7-MHDnBg

 

1. flutter 설치하기

https://docs.flutter.dev/get-started/install/windows/desktop

Start building Flutter native desktop apps on Windows

위의 사이트에서 내가 컴퓨터 사양에 맞게 다운받기

압축 해제 후 flutter폴더를 C:\src\flutter로 이동시킨다.

 

2. 환경변수 설정

제어판의 시스템 환경변수 편집에 들어가서 Path에 들어간다. 

그리고 C:\src\flutter\bin의 경로를 추가한다. 

cmd창에 flutter --version을 쳤을 때 제대로 나오면 설치 완료된 거다.

 

3. 안드로이드 스튜디오 설치하기

https://developer.android.com/studio?hl=ko

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android Developers

설치 후 SDK매니저에서 Android SDK의 SDK tools에 들어간다.

SDK Command line tools를 체크하고 APPLY

 

4. 실습하기

1)  Hello World출력하기

 

2) 버튼 누르면 Hello -> World로 바꾸기

 

5. 기본 위젯 배우기

이유는 잘 모르겠지만 다음과 같이 컴퓨터가 느려서 에뮬레이터가 잘 작동하지 않아 코드 실습으로 진행해 보았습니다.

1) Container : 아무것도 없는 위젯

2) Column : 수직방향으로 위젯들을 나란히 배치하는 위젯

3) Row : Column과 반대로 수평 방향으로 위젯들을 나란히 배치하는 위젯

4) Stack: 나열한 위젯들 겹치게 한다.

이를 실습한 코드

5) SingleChildScrollView : 스크롤이 가능한 위젯

6) ListView : 리스트를 표시하는 위젯

7) ListTitle : 단일행 리스트 아이템 만들기

- Leading : 왼쪽

- Title : 중앙

- Trailing : 오른쪽

8) GridView : 열수를 지정하여 그리드 형태로 표시하는 위젯

9) PageView : 여러 페이지를 좌우로 슬라이드하여 넘길 수 있도록 해주는 페이지

10) AppBar, TabBar, Tab, TabBar

- 이 위젯들은 조합하여 PageView와 유사하지만 탭이 연동되는 화면을 구성

11) BottomNavigationBar : 하단에 2-5개의 탭 메뉴를 구성할 수 있는 위젯

- Scaffold의 프롶퍼티 중에서 Bottom NavigationBar 프로퍼티를 정의

6. 위치, 정렬, 크기를 위한 위젯

1) Center : 중앙으로 이동시키는 위젯

 

2) Padding : EdgeInsets함수

- all()함수 : 네 방향 모두 같은 값 지정
- only() 함수 : 원하는 방향에만 값을 지정
- Ex. EdgeInsets.only({left:[왼쪽], top:[위], right:[오른쪽], bottom:[아래]})
- fromLTRB() 함수 : 네 방향의 값을 각각 지정
- Ex. EdgeInsets.fromLTRB([왼쪽], [위], [오른쪽], [아래])

 

3) ALign : 자식 위젯의 정렬 방향을 정할 수 있는 위젯

- 원하는 방향으로 위젯 정렬할 때 사용

- 자식 위젯을 정렬하기 위해서는 방향 정의

 

4) Expanded : 자식위젯의 크기를 최대한으로 확장시켜주는 위젯

 

5) SizedBox 

- Width : 가로길이

- Height : 세로길이

 

7. 버튼 계열 위젯

1)  Elevated Button : 입체감 가진 버튼 위젯

2) TextButton : 평평한 버튼 위젯

3) IconButton : 아이콘 표시 버튼 위젯

4) FloatingActionButton : 입체감 있는 둥근 버튼 위젯

 

8. 화면 표시용 위젯 

1) Text : 글자를 표시하는 위젯

2) Image : 이미지를 표시하는 위젯

3) Progress : 로딩중이거나 오래걸리는 작업을 할때 사용자에게 진행중임을 보여주는 용도로 사용하는 위젯

- CorcularProgressIndicator() : 둥근 형태의 프로그레스바

- LinearProgressIndicator() : 선 형태의 프로그레스바

9. 입력용 위젯

1) TextField : 글자를 입력받는 위젯

- InputDecoration 클래스와 함께 사용하면 힌트 메시지나 외각선 등의 꾸밈 효과를 간단하게 줄 수 있다.

2) CheckBox와 Switch

- 체크박스, 라디오버튼, 스위치를 표현하는 위젯

- CheckBox와 Switch는 모양만 다를 뿐 사용방법은 동일

3) DropDownButton : 여러 아이템 중 하나를 고를 수 있는 코모박스 형태의 위젯