Flutter + VScode로 Linux 앱 만들기 (환경 구축)

소개



전 3회로 나누어 Flutter로 Linux의 GUI 앱을 작성하는 순서를 정리하고 있습니다.
개발 환경은 VScode를 사용하여 타이머 앱을 만듭니다.

제1회 환경 구축편(이번은 여기)
제 2 회 화면 작성편
제 3 회 완성편

이번에는 Flutter 설치부터 샘플 앱 실행까지의 기사입니다.

Flutter를 처음으로 며칠의 완전 초보자가 기사를 쓰고 있으므로, 실수가 있으면 지적·코멘트 받을 수 있으면 도움이 됩니다.

환경



우분투(18.04.1)
Flutter(2.0.1)
VScode(1.42.1) 도입됨

1.Flutter 설치



기본적으로 공식 방법을 참고로 진행합니다.

htps : // f ぅ라고 r. v / cs / ts / r d / in s tar / l / x
에서 Flutter SDK를 다운로드합니다.

다운로드한 내용을 확장합니다.
Flutter 버전은 다운로드한 버전에 맞춰야 합니다.
$ mkdir  ~/development
$ tar xf ./flutter_linux_2.0.1-stable.tar.xz -C ~/development

환경 경로


~/.bashrc 를 열고 마지막에 경로를 추가합니다.
$ vi ~/.bashrc

export PATH="$PATH:~/development/flutter/bin"

환경 경로 정보를 업데이트합니다.
$ source ~/.bashrc

경로가 통과했는지 확인합니다.
$ flutter --version
Flutter 2.0.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision c5a4b4029c (2 days ago) • 2021-03-04 09:47:48 -0800
Engine • revision 40441def69
Tools • Dart 2.12.0

2. 빌드 환경 작성



앱을 만드는 데 필요한 것을 설치합니다.
$ sudo apt install clang curl pkg-config ninja-build cmake libgtk-3-dev libblkid-dev liblzma-dev unzip

Flutter의 빌드 타겟을 Linux로 만듭니다.
$ flutter config --enable-linux-desktop

환경에 문제가 있는지 다음 명령으로 확인할 수 있습니다.
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.1, on Linux, locale ja_JP.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/docs/get-started/install/linux#android-setup
      for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[✗] Chrome - develop for the web (Cannot find Chrome executable at
    google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Linux toolchain - develop for Linux desktop
[!] Android Studio (not installed)
[✓] VS Code (version 1.42.1)
[✓] Connected device (1 available)

! Doctor found issues in 3 categories.

3. 프로젝트 작성 및 실행



프로젝트를 만듭니다.
$ mkdir app
$ cd app
$ flutter create .

app가 프로젝트 이름입니다. 프로젝트 이름에 따라 다음과 같은 오류가 발생합니다.
이 경우 이름을 바꿉니다. (원인을 잘 모르기 때문에 아는 분은 가르쳐 주시면 도움이 됩니다.)
"XXXXXX" is not a valid Dart package name.
See https://dart.dev/tools/pub/pubspec#name for more information.

작성한 프로젝트를 VScode에서 열면 다음과 같습니다.


VScode 설정 [옵션]



Flutter 확장 기능이 있으므로 VScode에 설치합니다.


실행



다음 명령으로 실행합니다.
$ flutter run -d linux



Flutter에는 핫 리로드라고 하는 기능이 있어, 실행중에 소스 코드를 변경·저장한 후, 터미널상에서 r 를 실시하는 것으로 즉시 변경한 내용이 화면에 반영됩니다.

릴리스 빌드


$ flutter build linux

build/linux/release/bundle/에 출력됩니다.

끝에



생각보다 쉽게 ​​환경을 만들 수있었습니다.
다음 번부터 UI 주위의 작성에 들어가므로, 좋으면 꼭 읽어 주세요.

끝까지 읽어 주셔서 감사합니다.
다음에 다시 만나요.

참고



Flutter 공식 사이트
[Flutter] 데스크탑 환경 구축 for Linux
Flutter 입문 [환경 구축~Todo 앱]L

좋은 웹페이지 즐겨찾기