flutter 시작하기

Recommanded Free YOUTUBE Lecture: <% selectedImage[1] %>

yundream
2020-09-26
2019-06-15
83671

소개

모바일 애플리케이션은 포기한지 오래다. 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 SDK를 설치하라고 나온다. 설치하자.

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

Android studio는 처음 설치해보는 거라서, 뭐가 뭔지 잘 모르겠지만 잘 설치된 것 같긴 하다. 이제 Flutter plugin을 설치한다.

Android Studio 실행
File > Settings > Plugins 메뉴 선택
Marketplace 탭을 선택해서 flutter를 찾아서 Install 한다.

Flutter Application 실행

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

Flutter Application을 선택한다.

Project name : helloworld로 했다.
Flutter SDK path : Flutter SDK 설치경로다. 설치하지 않았다면, install 링크를 클릭해서 바로 설치할 수 있다.
Project location : 프로젝트 위치
Description : 프로젝트 간단 설명

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

실행도 잘 되는 것 같다.

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 클래스는 머티리얼 디자인을 사용하는 앱을 위해서 사용한다.

문제해결

flutter doctor 명령으로 문제원인을 찾을 수 있다.

Android toolchain 에러

# flutter doctor 
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.9, on Linux, locale ko_KR.UTF-8)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    ✗ Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit
      https://flutter.dev/setup/#android-setup for detailed instructions.

Android license status unkinown 에러다. 상세 내용을 확인해보자.

# flutter doctor --android-licenses
Android sdkmanager tool not found
(/home/yundream/Android/Sdk/tools/bin/sdkmanager).
Try re-installing or updating your Android SDK,
visit https://flutter.dev/setup/#android-setup for detailed instructions.

"sdkmanger tool" 설치가 안돼있다고 나온다. 안드로이드 스튜디오의 "SDK Manager"에서 툴체인을 설치하면 된다.

SDK Manager > System Settings > Android SDK로 이동
SDK Tools 탭 선택
Hide Obsolete Packages를 Uncheck 하면 추가설치 할 수 있는 툴들이 뜬다.
Android SDK Tools(Obsolete)를 선택한다.

설치가 끝났다면 다시 테스트 해보자.

flutter doctor                   
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.9, on Linux, locale ko_KR.UTF-8)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[✓] Android Studio (version 3.6)

빨간선은 없어졌는데, 여전히 경고메시지가 뜬다. 가이드에 나온데로 flutter doctor를 실행하자.

# flutter doctor --android-licenses
5 of 6 SDK package licenses not accepted. 100% Computing updates...             
Review licenses that have not been accepted (y/N)?

"y"누르면 라이센스 accept 된다.

# flutter doctor                   
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.9, on Linux, locale ko_KR.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Android Studio (version 3.6)

깔끔하게 처리됐다.

디바이스를 실행 할 수 없을 때

# flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.9, on Linux, locale ko_KR.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Android Studio (version 3.6)
[!] Connected device
    ! No devices available

연결된 디바이스가 없다는 경고다. 사용 할 수 있는 (가상)디바이스가 있는지 확인해 보자.

# flutter emulators
No emulators available.

To create a new emulator, run 'flutter emulators --create [--name xyz]'.

You can find more information on managing emulators at the links below:
  https://developer.android.com/studio/run/managing-avds
  https://developer.android.com/studio/command-line/avdmanager

사용 할 수 있는 가상 디바이스가 없다. 안드로이드 스튜디오의 AVD Manager로 가상 디바이스를 만들어주면 된다.

정리

개발환경 설정이 어려울 것으로 예상했는데, 굉장히 쉬웠다.
Dart 언어는 처음 보는데, 깔끔한 것 같다. C 언어 스러워서(요즘 써먹고 있는 Go와도 유사한 느낌적 느낌이고) 눈에 쏙 들어오는 듯.
JIT(just-in-time compiler)을 지원한다는데, 테스트해봐야 겠다.
위치데이터를 수집하는 앱을 만들어봐야 겠다.
Android Studio 이거 자원 엄청 먹네. VS Code 쪽으로 살펴봐야 겠다.
Vim으로도 가능하지 않을까..

Search For:

BY TAGS

Contents

소개

IDE

Dart 설치 & Flutter 설치 ?

Dart 설치

flutter sdk 설치

Android Studio 설치

Flutter Application 실행

Hello World

문제해결

Android toolchain 에러

디바이스를 실행 할 수 없을 때

정리

Recent Posts

Archive Posts

Tags

About

Get in Touch

Categories

Search For:

BY TAGS

flutter 시작하기

Contents

소개

IDE

Dart 설치 & Flutter 설치 ?

Dart 설치

flutter sdk 설치

Android Studio 설치

Flutter Application 실행

Hello World

문제해결

Android toolchain 에러

디바이스를 실행 할 수 없을 때

정리

Recent Posts

Archive Posts

Tags

About

Get in Touch

Categories

Subscribe