메뉴

문서정보

목차

소개

모바일 애플리케이션은 포기한지 오래다. Java는 왠지 싫고, iOS 쪽도 별로 관심이 없고. 그냥 언젠가는 지금 알고 있는 HTML, Javascript, CSS 와 같은 웹 기술로 모바일 애플리케이션 개발이 가능해지면 그때 무임승차해야지 하는 자세였다. 그래서 관심을(만) 가지고 있던게 Progress Web App이였다.

그러다가 flutter라는 프레임워크에 대한 이야기를 듣게 됐다. 프레임워크 중 하나라고 생각 할 수 있긴 하겠는데, Dart 언어 기반이라는게 마음에 들었다. Dart는 Codementor에서 2018 배우면 안될 언어 중 하나로 당당히 선정되기도 했는데, 사용해야 할 곳이 명확해지면 언어도 살아날 것 같은 느낌이고 무엇보다 코드가 정감이(Go, C 스타일이라서...) 있어서 배워볼만하지 싶다는 생각이 들었다.

그래서 시작하기로 했다. 참고로 난 아직까지 모바일 애플리케이션을 개발해 본적이 없다. 완전히 밑바닥 부터 시작한다.

IDE

Android Studio, Intellij, Visual Studio Code의 3파전인 것 같다. 의견이 분분하긴 한데, 가벼움을 장점으로 VS Code가 약간 더 우세한 것 같다. 개인적으로 가벼운 것을 좋아하기 때문에 VS Code를 설치하려고 했었다. 그런데 이것 저것 수동으로 설치해야 하는 것들이 많아서 포기했다. VS Code는 flutter 개발 환경에 익숙해지면 도전하기로 했다.

Dart 설치 & Flutter 설치 ?

처음에는 VS Code로 하려다가 삽질을 좀 했는데, Android Studio에서 알아서 설치해 주더라. 그냥 Android studio로 설치하기로 했다. 밑에 이건 그냥 기록용으로 남기는 거다. 참고만 하고 바로 다음장 "Android Studio 설치"로 넘어가자.

Dart 설치

Flutter는 Dart 언어 기반의 프레임워크다. 따라서 Dart 를 우선 설치해야 한다.
$ sudo apt-get update
$ sudo apt-get install apt-transport-https
$ sudo sh -c 'curl https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -'
$ sudo sh -c 'curl https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list > /etc/apt/sources.list.d/dart_stable.list'
$ sudo apt-get update
$ sudo apt-get install dart
$ dart --version
Dart VM version: 2.4.0 (Unknown timestamp) on "linux_x64"
(2018년 7월)현재 Dart 최신 버전은 2.4.0이다.

flutter sdk 설치

Get the Flutter SDK 문서를 참고했다. flutter_linux_v1.5.4-hotfix.2-stable.tar.xz 를 다운로드해서 압축을 풀고 /usr/local 디렉토리로 복사했다.
# mv flutter_linux_v1.5.4-hotfix.2-stable.tar.xz /usr/local
# cd /usr/local
# unxz flutter_linux_v1.5.4-hotfix.2-stable.tar.xz
# tar -xvf flutter_linux_v1.5.4-hotfix.2-stable.tar
/usr/local/flutter/bin을 PATH에 등록했다.
export PATH=/usr/local/flutter/bin:$PATH

flutter doctor 명령을 실행해서 flutter이 제대로 설치됐는지 확인한다.
$ flutter doctor

Oops; flutter has exited unexpectedly.
Sending crash report to Google.
Crash report sent (report ID: 8182b3292bddc30e)
Crash report written to /tmp/flutter_01.log;
please let us know at https://github.com/flutter/flutter/issues.
.. 에러발생 /tmp/flutter_01.log를 확인해봤다.
$ cat /tmp/flutter_01.log
Flutter crash report; please file at https://github.com/flutter/flutter/issues.

## command

flutter doctor

## exception

FileSystemException: FileSystemException: Cannot open file, path = '/usr/local/flutter/bin/cache/lockfile' (OS Error: Permission denied, errno = 13)

이하 생략 ......
음 파일 권한 오류다. flutter sdk를 HOME 디렉토리에 설치하는 방법도 있는데, 귀찮아서 디렉토리 권한을 수정하고 실행을 했다.
$ sudo chown yundream.yundream -R /usr/local/flutter
$ flutter doctor        
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Linux, locale ko_KR.UTF-8)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/setup/#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
      You may also want to add it to your PATH environment variable.

[!] Android Studio (not installed)
[!] Connected device
    ! No devices available

! Doctor found issues in 3 categories.
이제 Android studio를 설치하면 되는 것 같다.

Android Studio 설치

developer.android.com에서 리눅스 패키지를 다운로드 했다. /usr/local 디렉토리에서 압축을 풀고 실행 해봤다.

 Android Studio Setup Wizard

 Android Studio Setup Wizard

Android SDK를 설치하라고 나온다. 설치하자.

 SDK 설치

 SDK 설치

설치 SDK 버전이 나온다. 최신버전 API 29설치하면 된다. Next 버튼을 클릭하면 열심히 설치를 한다.

 시작화면

 시작화면

Android studio는 처음 설치해보는 거라서, 뭐가 뭔지 잘 모르겠지만 잘 설치된 것 같긴 하다. 이제 Flutter plugin을 설치한다.
  1. Android Studio 실행
  2. File > Settings > Plugins 메뉴 선택
  3. Marketplace 탭을 선택해서 flutter를 찾아서 Install 한다.

 Flutter plugin 인스톨

 Flutter plugin 인스톨

Flutter Application 실행

설치는 끝난 것 같으니 Flutter 애플리케이션을 만들어보자. File > New > New Flutter Project를 클릭하자.

 Flutter Application

 Flutter Application

Flutter Application을 선택한다.

 Flutter Application 설정

 Flutter Application 설정

기타 몇 개 설정을 끝내면 프로젝트가 만들어진다.

 테스트 Application

 테스트 Application

실행도 잘 되는 것 같다.

Hello World

Hello World 프로그램을 만들어봤다.
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

음. Flutter 사이트에 있는 코드를 그대로 가져다 썼는데, 문법이 좀 낯설다. 보기 쉽게 수정했다.
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}
C/C++ 언어와 비슷하다.

import를 이용해서 특정 라이브러리를 사용 할 수 있다. Dart 파일은 하나 이상의 import 문이 있을 수 있다. 내장된 dart 라이브러리는 dart:scheme 로 참조 할 수 있다.

이 코드는 Flutter 애플리케이션을 만들기 위해서 flutter 패키지를 import 했다. flutter 패키지는 단일 코드로 모바일, 웹, 데스크톱에서 작동하는 애플리케이션을 개발 할 수 있도록 도와주는 구글의 portable UI toolkit이다.

runApp은 flutter에서 제공하는 함수를 위젯을 화면에 붙이기(attach)위해서 사용한다.

StatelessWidget클래스로 부터 상속된 MyApp 을 만들었다. Flutter은 Stateless와 Stateful 두 가지 타입의 위젯이 존재한다. Stateless 위젯은 위젯이 로드될 때 한번만 그려지고, 이후 이벤트나 사용자 액션에 의해서 위젯이 다시그려지지 않는다. 변하지 않는 컨텐츠를 화면에 그릴때 사용하는 위젯이다.

MaterialApp 클래스는 머티리얼 디자인을 사용하는 앱을 위해서 사용한다.

 Hello world

 Hello world

정리