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
Reference
이 문제에 관하여(Flutter + VScode로 Linux 앱 만들기 (환경 구축)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/fia/items/435b72b9ef6ca9e0410c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ mkdir ~/development
$ tar xf ./flutter_linux_2.0.1-stable.tar.xz -C ~/development
$ 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
앱을 만드는 데 필요한 것을 설치합니다.
$ 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
Reference
이 문제에 관하여(Flutter + VScode로 Linux 앱 만들기 (환경 구축)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/fia/items/435b72b9ef6ca9e0410c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ mkdir app
$ cd app
$ flutter create .
"XXXXXX" is not a valid Dart package name.
See https://dart.dev/tools/pub/pubspec#name for more information.
$ flutter run -d linux
$ flutter build linux
생각보다 쉽게 환경을 만들 수있었습니다.
다음 번부터 UI 주위의 작성에 들어가므로, 좋으면 꼭 읽어 주세요.
끝까지 읽어 주셔서 감사합니다.
다음에 다시 만나요.
참고
Flutter 공식 사이트
[Flutter] 데스크탑 환경 구축 for Linux
Flutter 입문 [환경 구축~Todo 앱]L
Reference
이 문제에 관하여(Flutter + VScode로 Linux 앱 만들기 (환경 구축)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/fia/items/435b72b9ef6ca9e0410c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Flutter + VScode로 Linux 앱 만들기 (환경 구축)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/fia/items/435b72b9ef6ca9e0410c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)