Get Started with Flutter
Jun 5
내가 Flutter에 매력을 느낀 데에는 여러가지 이유가 있지만 대표적인 이유는 간결하고 직관적이라는 것이었다. HTML이나 CSS도 충분히 간결하지만 Flutter가 보여준 간결함이 더 직관적이라고 생각했기 때문이다.
Flutter는 Dart를 사용한다. Dart에 대해선 다들 많은 생각이 있을 거라고 생각하지만 자바스크립트를 하다가 Dart를 쓰는 입장에서는 그냥저냥 쓸만하다는 수준이다. 생각보다 직관적이고 생각보다 쉽게 사용할 수 있다.
문제는 Flutter 말고는 어디서도 Dart를 쓰지 않는다는건데 그냥 둘이 하나라고 생각하면 어떨까? (긍정)
Hello World
모든 코드는 Hello World에서 시작한다. 가장 간단한 형태의 Flutter 앱은 다음과 같다.
import 'package:flutter/material.dart'; void main() { runApp( Center( child: Text( 'Hello World!', textDirection: TextDirection.ltr, ) ) ) }
지금은 저 알 수 없는 괄호의 연속과, 함수에 매개변수로 다른 함수를 넘기는 형태가 굉장히 어색할 수 있지만 조금 익숙해지면 받아들일 수 있을 것이다.
Everything is Widget
리액트, 앵귤러, Vue 같은 프론트엔드 라이브러리를 다뤄본 사람이라면 컴포넌트 단위로 레이아웃을 쪼개는 것에 대해서 굉장히 익숙할 것이다. HTML 요소를 여러개 묶어서 컴포넌트를 만들듯, Flutter는 Widget을 여러개 묶어서 또 다른 Widget을 만든다.
그렇기 때문에 어떤 Widget을 사용할 수 있는 지에 대해서만 알고 있다면 생각보다 Flutter를 다루는 것이 어렵지 않다. 예를 들어, 이미지를 사용하고 싶다면 Image 위젯을 사용하면 된다.
Image.asset( `images/lake.jpg' )
텍스트를 사용하고 싶다면 Text 위젯을 사용하면 된다.
Text('Hello World')
Flutter에서 이미 구현해둔 다양한 위젯들이 있기 때문에 Built in 위젯들을 여러개 조합해서 더 큰 덩어리를 만들고, 더 큰 덩어리를 더 크게 만들어서 위젯들을 조합하여 사용할 수 있다.
Getting Started
아마 많은 웹 개발자들이 이 과정에서 많이 힘들어할 거라고 생각한다. 우선 Flutter를 사용하기 위해서는 아래와 같은 것들이 필요하다.
- Flutter (당연하다)
- Dart SDK (Flutter를 설치하면 함께 설치된다)
- Android Studio (필수는 아니지만 있으면 편하다)
- Xcode (Mac 유저 전용)
우선 Flutter SDK를 설치해보자. Flutter SDK는 Flutter 공식 홈페이지에서 설치할 수 있다. 윈도우 유저가 설치하기에는 더 쉽고, 맥 유저는 터미널을 열고 순서대로 따라하면 된다. Linux 유저나 Chromebook 유저는 알아서 잘 해보자.
설치 과정이 좀 당황스럽기는 하다. SDK를 zip 파일로 다운받아서 해당 파일을 압축풀기 해서 PATH를 연동하는 형식이라서 익숙하지 않다면 당황할 수 있다. 만약 본인이 어느정도 개발에 익숙한 사람이라면 GitHub에서 Stable Release를 계속 다운로드 받는 방식을 추천한다.
SDK 릴리즈에 대해서는 아래 링크를 참고하길 바란다. (마지막에 master 받는 방법도 제공한다)
Flutter SDK를 다 설치하고 나면 터미널에서
flutter 가 활성화되었을 것이다. Mac유저라면 기본 터미널을 사용하고, Windows 유저라면 Flutter를 설치하면서 함께 설치된 Flutter Terminal을 사용하면 된다.만약
flutter 명령어가 활성화되지 않았다면 PATH 문제일 가능성이 높다. 만약 그렇다면 PATH를 자세히 살펴보면 된다. (혹시 PATH 문제가 발생했다면 StackOverflow에 남기거나 이 글에 덧글로 남기면 디버깅을 해보도록 하겠다)Android Studio 설치
Flutter를 Google에서 만들다보니 현재로써는 Android Studio가 Flutter를 사용하기에 가장 좋은 에디터라고 생각한다. 만약 무거운 에디터를 사용하고싶지 않다면 Visual Studio Code를 설치하는 방법도 있지만 추천하지는 않는다. (굳이..)
그렇게 Android Studio를 전부 설치하고 아래와 같은 화면을 봤다면 Android Studio를 위한 준비가 끝난것이다.
재시작하라고 한다.
Light Theme가 되었네?! (아마 버그같다) 시작화면에 이제 Start a new Flutter Project가 노출된다. 참고로 테마는 Configure 내 Preference에서 다시 변경 가능하다.
만들고 싶은 아이템을 선택하자. 여기서는 Application
여기까지 오고 나면 Flutter SDK Path를 쓰라고 한다.
Flutter SDK Path에는 아까전에 다운로드 받았던 Flutter 압축폴더 경로를 쓰면 된다. 예를 들어 내 경우에는 아래와 같은 경로다.
여기까지 하면 Flutter 프로젝트를 시작할 준비가 되었다고 할 수 있다.
Simulator
Flutter가 기본적으로 앱을 만드는 라이브러리이다 보니 iOS 또는 Android 시뮬레이터를 사용할 수 있다. iOS는 MacOS에서만 사용 가능하고 Android는 모든 OS에서 사용 가능하다.
iOS
iOS 시뮬레이터는 Xcode 설치와 함께 설치되기 때문에 Xcode를 설치하고 난 후에 간단한 명령어를 통해 실행이 가능하다.
open -a Simulator
그 후에 Flutter 앱 디렉토리에서
flutter run 을 실행하면 시뮬레이터와 함께 노출된다.Android
Android는 Android Studio와 함께 시뮬레이터가 설치되지만 일부 설정이 추가로 필요하다.
- Enable VM acceleration on your machine.
- Launch Android Studio > Tools > Android > AVD Manager and select Create Virtual Device. (The Android submenu is only present when inside an Android project.)
- Choose a device definition and select Next.
- Select one or more system images for the Android versions you want to emulate, and select Next. An x86 or x86_64 image is recommended.
- Under Emulated Performance, select Hardware — GLES 2.0 to enable hardware acceleration.
- Verify the AVD configuration is correct, and select Finish.
- In Android Virtual Device Manager, click Run in the toolbar. The emulator starts up and displays the default canvas for your selected OS version and device.
추후에 Android Studio가 설치되는대로 스크린샷을 추가하도록 하겠다.
Android Studio
만약 여러분들이 Flutter로 앱을 만들 때 Android Studio 설정을 하지 않으면 아래와 같은 스텝을 개발할 때마다 거쳐야한다.
- 원하는 폴더에 이동한다
flutter run
- 코드를 수정할 때
r또는R로 핫리로드를 반복한다.
개발할 때 코드 새로고침을 위해 계속 왔다갔다 하는 건 굉장히 귀찮은 일이다. Android Studio 설정을 해두면 GUI에서 간단하게
run 과 핫 리로드가 가능하다.위의 설치 과정을 다 거쳤다면 Android Studio의 우측 상단에 Run 버튼과 핫 리로드 버튼이 생긴다.
우측 상단을 주목하자
버튼 셋이 있다.
끝
이 글에서는 Flutter의 가장 큰 특징인 Everything is Widget과 간단한 시작방법에 대해서 알아보았다. 다음 글에서는 레이아웃을 어떻게 구성하는 지에 대해서 다뤄보도록 하겠다.