[Flutter] #2 Hello Flutter 만들기
들어가는 글: 어떤 언어(플랫폼)을 배우던 Hello XXX 는 친숙하시죠? 오늘은 세상에서 가장 간단한 플러터 앱을 만들어 봅니다. 소스는 10줄 남짓인데 그럴싸한 앱 화면이 나옵니다.
1. 첫 플러터 앱 생성
안드로이드 스튜디오를 시작하고,
새로 생성된 (Start a new Flutter project)를 눌러봅니다.
그리고나서 Flutter Application을 선택합니다. 나머지는 일단 크게 신경안쓰셔도 됩니다. 그 다음
- Project name: hello_flutter
- Flutter SDK path: <SDK 설치한 폴더>
- Project location: 적당한 곳. 예) d:\work\agit\flutter-dev
- Description: Hello Flutter
나머지는 적당히 입력하세요.
Platform channel language 라는 항목은 안드로이드와 iOS 각각 native code 연동을 의미합니다. 현재 중요한 것은 아니니 skip 합니다.
[Finish]를 누르면 첫 프로젝트가 생성됩니다.
2. 소스 코드를 분석하기 전에
오늘은 가장 단순한 플러터 앱을 만들어봅니다. 오늘은 이 파일에만 집중하세요
- 파일: lib/main.dart
이름이 좀 이상하지 않나요? main은 일반적인 애플리케이션의 시작점이라 이해가 됩니다만 lib 이라는 단어는 보통 library의 약자로 내가 참조하는 외부(third party) 라이브러리의 저장소를 의미하거든요. 예를 들면 junit.jar 같은 파일들이 lib 폴더에 들어가죠. 물론 안드로이드를 개발할때 그레이들(gradle)로 빌드하므로 직접 개발자가 그 폴더에 넣지는 않지만요.
하지만 플러터에서는 lib 폴더가 개발의 시작점입니다. 그 이유는 차차 설명드릴께요.
Hello Flutter 앱의 실행결과는 다음과 같습니다.
3. Hello Flutter 소스 코드
다음의 코드는 github에도 올려놓았습니다.
- 소스: https://github.com/yudong80/flutter-dev/tree/master/hello_flutter
(간편하게 flutter-dev 저장소를 git clone 해놓으시면 나머지 소스도 손쉽게 받아볼 수 있습니다. 아직은 hello_flutter 밖에 없지만요. 깃헙 주소는 이 글 마지막에 따로 적어두었습니다.)
/lib/main.dart 파일
오늘은 여기에 있는 내용을 하나씩 뜯어봅니다.
1) import 문
import 'package:flutter/material.dart';
이 문장은 플러터 앱에서 안드로이드의 '머터리얼 디자인'에 맞는 앱을 만들겠다는 의미입니다. 대표적으로 타이틀바(AppBar), body(본체) 와 floatingActionBar(플로팅 액션 바) 등을 가질 수 있습니다. 가장 단순하게 앱을 시작하는 방법입니다.
앞으로 외부 라이브러리 혹은 다른 dart 파일을 참조할때도 import 문을 써야 합니다. 어떻게 달라지는지는 상황에 따라 말씀드릴께요.
2) main 함수
void main() => runApp(MyApp())
사실 안드로이드 앱에는 AndroidManifest.xml 이 있어서 앱의 대표적인 속성들을 정의하는데요, 플러터에서는 main() 함수가 그 역할을 합니다. 마지 자바 애플리케이션에서 "Hello World"를 출력하는 장면이 생각나네요. 동일하다고 생각하시면 됩니다.
runApp() 함수에 내가 처음 표시하려는 위젯(Widget)을 넣어주면 됩니다.
위젯?
3) StatelessWidget
class MyApp extends StatelessWidget
모든 플러터의 UI 컴포넌트는 위젯(Widget)으로 이루어져 있습니다. 안드로이드처럼 Activity, Layout, View 등으로 계층화되어 있지 않고 그냥 Widget 입니다. 그것이 안드로이드 네이티브 앱하고는 다른 첫번째 설계 관점입니다.
모든 UI 컴포넌트는 위젯(Widget)이다.
> 그리고 모든 위젯은 StatelessWidget 혹은 StatefulWidget 이다.
오늘은 무상태 위젯에 대해 알아보고 다음엔 상태 위젯도 다뤄보도록 하겠습니다. 무상태 위젯은 단순하게 화면만 표시하기 때문에 한번 표시하면 그 내용을 변경할 수 없습니다. 그 만큼 사용법도 단순하지요.
4) build() 함수
@override Widget build(BuildContext context)
오늘은 간단하게 build() 함수에서 내가 하는 위젯을 만들어서 반환해주면 플러터 프레임워크가 그 위젯을 표시해준다. 이렇게만 설명하겠습니다. StatefulWidget 클래스의 build() 메서드를 들어가보면 소스 코드가 비어 있습니다. 이렇게요.
5) MaterialApp 클래스
- title: 'Hello Flutter'
오늘은 앱 이름을 지정할 수 있다는 것만 언급합니다. 만약 다른 이름으로 지정하면 홈에 표시되는 앱의 이름을 변경할 수 있습니다. 예를 들면 "Flutter Demo "과 같이요.
6) 드디어 Scaffold 클래스
- home: Scaffold(
appBar: AppBar(title: Text('Hello Flutter!!')),
body: Center(child: Text('Let\'s get it Flutter'))
오늘의 핵심은 Scaffold 클래스를 설명하는 것입니다. 앞서 플러터가 위젯으로 구성되어 있다고 했기 때문에 단순하게 Text 위젯만 붙일수도 있습니다. 그러면 흰 화면에 (Hello Flutter) 이렇게 글자만 덩그러니 나오게 됩니다. 이런 것은 누구도 원하지 않지요.
개발자가 조금만 작업해도 그럴싸한 첫 화면이 나왔으면 좋겠습니다. 그래서 MaterialApp 와 Scaffold 클래스를 사용하는 것입니다. 초급 과정이기 때문에 Scaffold를 가장 먼저 사용합니다.
오늘은 앱바(혹은 타이틀 바)와 몸체(body)를 지정합니다. 보이는 그대로 입니다.
Scaffold의 appBar 속성에는 AppBar 객체를 넣을꺼야. 그 객체의 title 속성은 Text 위젯이고 그 내용은 'Hello Flutter!!' 야.
한편 body 속성에는 Center 위젯을 넣을꺼야. Center에는 Text 위젯을 넣을 것이고 그 내용은 'Let's get it Flutter' 야.
해석이 되시나요?
결론
오늘은 이 앱의 소스 코드를 받아서 실행해보세요. 그리고 앱의 내용과 코드의 내용이 쉽게 읽히는지 생각해보세요. 앞으로 다른 간단한 앱들도 그렇게 진행해보겠습니다.
이전까지의 안드로이드(iOS) 앱 개발과는 다른 묘미를 느낄 수 있으실거에요.
다음엔 계산기 앱을 차근차근 만들어보도록 하겠습니다.
감사합니다.
2019.5.11
