230517
우여곡절 끝에
모든 error를 잡고
flutter 환경 세팅이 끝났다.
이제 실제로 Project를 만들어
학습 및 구현을 해보자.
1. Flutter Create Project
flutter의 모든 환경 세팅이 끝났다면VScode에서 2가지 방법으로project가 생성 가능하다.( Window 기준이다. )
✨ Ctrl + Shift + P ( 명령 팔레트 )
위와 같이 명령 팔레트에서
flutter를 검색하면아래에 Flutter : New Project를 볼 수 있다.클릭!( Flutter : Run Flutter Doctor도 가능하다! )
우리는 Application을 만들어야 하기 때문에
맨 위의 Application 클릭!
만약 다른 목적의 template가 필요한 경우에는
선택하면 된다.
그리고 Project를 저장할
directory 선택!
마지막으로
Project 이름을 정해주고 Enter를 누르면
생성이 완료된다.
✨ 터미널에서 생성
내가 원하는 곳에
directory를 새로 생성하거나
이동해준다.
flutter create <프로젝트 이름>그리고 위의 명령어를 입력!
나는 C 드라이브에 바로 만들어 보겠다.
위와 같이 경로를 보여주고
생성이 완료된다.
정말 쉽다.
2. VScode Extention ( 확장 )
VScode의 확장에 들어간다.( 굉장이 코딩에 유용한 도구들을 설치할 수 있다. )
✨ Dart
가장 먼저 설치해야할것은Dart extention이다.
flutter의 기본이 되는 언어로매우 매우 중요하다!
✨ Flutter
flutter extension은
어마어마하고 굉장한 debuging 환경을 제공하고
개발자 도구 또한 엄청 많다.
요것도 정말 필수이다.
💡 Simulator
VScode에서 우리가 설치한 시뮬레이터를
켜는 방법은 간단하다.
VScode의 맨 하단에 보면
각자의 현재 사용중인 기기가 보일 것이다.
그것을 클릭하면 변경이 가능한데
여기서 우리가 설치한
Android emulator라 던지, web, ios등의
모든 가상 기기로 변경 할 수 있다.
내가 설치한 Android emulator를 클릭하면?
위와 같은 가상의
Android 운영체제를 사용하는
기기가 VScode에 나타난다.
( 나는 이때 좀 설렜다.. )
자 이제 프로젝트를 만들었고
기본적인 VScode의 확장 프로그램도 설치했고
이뮬레이터까지 켰으니
flutter의 프로젝트 생성시만들어 주는 기본적인 코드로
앱을 실행해 보자.
기본적으로 프로젝트 생성시만들어지는 directory중에서
lib/main.dart를 열고
오른쪽 위의
디버깅 모드 실행 버튼을 누르면
위와 같이 앱이 실행되는 것을 확인할 수 있다.
VScode의 장점은 터미널에서 run <project name> 할 수 있지만
훌륭한 디버깅 모드 실행 버튼 하나로바로 확인이 가능하다는 점이다.
또한 Widget Inspector를 통해
각각의 요소들을 자세히 볼 수 있다.
만약 디버깅 모드 실행시
Widget Inspector이 바로 실행되지않는다면,
맨 상단의 미니 도구모음에서
파란색 돋보기 모양의 아이콘을
클릭하면 된다.
3. Hello World
기본적인 "Hello World"를 출력하기 전에
중요한 포인트를 짚고 넘어가겠다.
위 코드는 flutter 프로젝트 생성시 기본으로
생성되는 main.dart를
main() 만 남기고 다 지운 코드이다.
여기서 runApp()이란 함수는
위의 import된 패키지에서 가져온다.
이 runApp()이란 함수는
하나의 인자 Widget이라는 것만 받는데
이 Widget이라는 것이 정말 중요하다.
3-1. Widget
Flutter는 모든것이 Widget으로 이루어져 있다.앱을 구성하는 요소, 기능, 심지어 프레임까지..
우리는 이러한 Widget을조립해 앱의 UI를 만들게 되는것이다.
https://docs.flutter.dev/ui/widgets
Widget catalog
A catalog of some of Flutter's rich set of widgets.
docs.flutter.dev
위 사이트에는 Flutter 공식 Widget들이 있다.
프로그래밍 관점에서 보면
Widget은 Class에서 출발한다.
만약 App { } 라는 class를
Widget으로 만들기 위해서는
Flutter SDK에 있는 3개의 core Widget중 하나를 상속( extend )받아야 한다.
위와 같이 App라는 class에
StatelessWidget을 상속받았더니
비로소 Widget이 되었다.
그리고 error의 위치가 바뀌었는데
build 메소드가 필요하다고 한다.
build 메소드는 무었을 return하던
그것을 화면에 보여주는 메소드 이다.
즉 나의 Widget의 UI를 만드는 메소드이다.
❗ StatelessWidget을 상속 받을 경우
bulid 메소드를 반드시 작성해야한다.
상속받은 클래스에
build() 를 자동완성으로 작성하면
위와 같은 코드가 작성된다.
이때 중요한 포인트는
우리는 runApp(App());에 필요한
widget을 만드는 중이고
우리가 만드는 App()의 위젯은
root가 App() 라는 것이다.
즉, 모든 화면과 버튼 등등의 모든 것들이
App Widget으로부터 온다는 말이다.
이러한 root가 되는 Widget은
두 개의 옵션 중 하나를 return해야 한다.
하나는 material 앱을 return하는 것이고
하나는 cupertino 앱을 return하는 것이다.
material은 구글의 디자인 시스템
cupertino는 애플의 디자인 시스템을 의미한다.
이러한 행동은 우리가 어떤 family 스타일을 사용할지
flutter에게 알려주는 것이다.
❗ 만약 본인이 커스터마이징한 스타일로 하고 싶어도
위의 2가지 중에서 선택을하고 변경을 해야한다.
하지만 flutter는 구글이 만들었음으로
material로 시작하는것을 추천한다.
MaterialApp 또한
그냥 쓸 수 없다.
위와 같이 Key? key, Widget? home, String? initialRoute등등의
여러 요소 중 하나를 넣어야 하는데
우리는 Widget이 필요함으로 home을 넣어보자.
그럼 위와 같이 굉장히 안이쁘게 나오는데
이때 눈치챈 사람들도 있겠지만
구역을 정의해줘야한다.
웹을 조금 아는 사람들은 무었을 의미하는지
바로 이해할것이다.
이러한 구역을 flutter에서는 scaffold라고 한다.
scaffold는 navigation bar를 구현하게 해주고
buttom tab bar나 상단 버튼,
화면 중앙 정렬 등을 해준다.
코드는 위와 같이 바꿀 수 있는데
이러한 Scaffold를 살펴보면
또 Widget이 등장하고
우리는 body를 사용할것이다.
이렇게 home 위젯은 Scaffold
scaffold 위젯은 body
body의 Text에 'Hello world!'를 적용할 수 있다.
결과 화면을 보면
잘 보일지 모르겠지만
왼쪽 상단에 Hello world!가 출력되었다.
뭔가 Text가 잘리기도 했고
보기도 불편하니
다시 Scaffold를 보면
appBar라는게 있다.
AppBar를 적어서 살펴보면
또 title이라는 위젯이 있다.
위젯의 지옥이다.
위와 같이
AppBar를 title의 Text로 정의하고Scaffold의 body를 Text로 정의해서 결과를 보면?
위와 같이 깔끔하게
Title로 Hello Flutter가
body에 Hello world! 가 출력된것을 확인할 수 있다.
만약 Hello world!가 가운데에 출력되게 하고 싶다면
body를 건들면 된다.
위와 같이 가운데로 오는것을 확인할 수 있다.
'Hello App > Flutter' 카테고리의 다른 글
| Flutter _ Button Section (0) | 2023.05.20 |
|---|---|
| Flutter _ Header (0) | 2023.05.18 |
| Flutter _ VScode cmd 터미널 pub get error & Unable to find git in your PATH (0) | 2023.05.17 |
| Flutter_ 설치 (0) | 2023.05.16 |
| Flutter (0) | 2023.05.15 |
