Flutter 개발 환경 설치
모바일 앱 개발을 위한 프레임워크. 데스크탑과 웹에도 적용 가능합니다.
이제 저는 구글 플레이 스토어에 새로운 안드로이드 SDK를 사용하여 앱을 업데이트해야 하기 때문에, 몇 년 전에 작성한 이 오래된 가이드를 다듬고 다시 출판해야 합니다.
플레이 스토어 앱 페이지의 일부입니다.
이 가이드는 2022년 8월에 처음 작성되었고, 2024년 4월에 업데이트 및 출판되었습니다. 따라서 일부 오래된 정보가 포함될 수 있습니다.
방법
리눅스 PC에 Flutter를 설치하는 단계
개발 도구 설치
https://docs.flutter.dev/get-started/install/linux/android
도구 확인
which bash file mkdir rm which
패키지 설치
sudo apt-get update -y && sudo apt-get upgrade -y;
sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa
안드로이드 앱 개발을 위한 패키지 설치
sudo apt-get install \
libc6:i386 libncurses5:i386 \
libstdc++6:i386 lib32z1 \
libbz2-1.0:i386
리눅스 앱 개발을 위한 패키지 설치
sudo apt-get install \
clang cmake git \
ninja-build pkg-config \
libgtk-3-dev liblzma-dev \
libstdc++-12-dev
VSCode 설치
https://code.visualstudio.com/docs/setup/linux
리눅스용 VSCode 데비안 패키지를 다운로드하는 링크가 있습니다: https://go.microsoft.com/fwlink/?LinkID=760868
그리고 다음과 같이 설치합니다:
sudo apt install ./<file>.deb
# 오래된 리눅스 배포판을 사용하는 경우 다음 명령어를 실행해야 합니다:
# sudo dpkg -i <file>.deb
# sudo apt-get install -f # 의존성 설치
“setup/linux” 페이지에도 다른 리눅스 배포판이 있습니다.
VSCode용 Flutter 확장 프로그램 설치: https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
VS Code Quick Open (Ctrl+P)을 실행하고 다음 명령어를 붙여넣고 엔터를 누릅니다.
ext install Dart-Code.flutter
크롬 설치
웹 개발을 위해 크롬 설치:
https://www.google.com/chrome/dr/download/
안드로이드 스튜디오 설치
https://developer.android.com/studio/install#linux
64비트 우분투에서 필요한 라이브러리
sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386
우분투 24.04 기반 OS에서:
sudo apt-get install libc6:i386 libncurses6:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386
최신 버전의 스튜디오를 다운로드: https://developer.android.com/studio
“{설치 홈}/bin"으로 이동하고 다음을 입력합니다:
./studio.sh
xed ~/.bash_profile
export PATH=$PATH:~/Apps/android-studio/bin
KVM 가속 모드 활성화
https://developer.android.com/studio/run/emulator-acceleration?utm_source=android-studio#vm-linux
sudo apt-get install cpu-checker
egrep -c '(vmx|svm)' /proc/cpuinfo
출력이 1 이상인 경우 가상화가 지원됩니다. 출력이 0인 경우 CPU가 하드웨어 가상화를 지원하지 않습니다.
예상 출력:
INFO: /dev/kvm exists
KVM 가속이 사용 가능합니다
리눅스에서 KVM 설치 다음 명령어를 사용하여 KVM을 설치합니다:
Cosmic (18.10) 또는 이후 버전:
sudo apt-get install qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils
Flutter SDK 설치
SDK 설치: https://docs.flutter.dev/get-started/install/linux
https://docs.flutter.dev/get-started/install/linux/android
수동으로 설치하거나 VSCode를 통해 설치할 수 있습니다.
수동 설치 참고:
다운로드: https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.3.2-stable.tar.xz
cd prj
tar xf ~/Downloads/flutter_linux_3.3.2-stable.tar.xz
export PATH=$PATH:~/prj/flutter/bin
which flutter
flutter precache
flutter config --no-analytics
flutter config
VSCode 참고:
VS Code 명령어 (Ctrl+p)
ext install Dart-Code.flutter
명령 팔레트 (Ctrl+Shift+p)에서 “flutter"를 입력합니다.
“Flutter: New Project"를 선택합니다.
VS Code는 컴퓨터에 Flutter SDK가 있는지 확인하라는 메시지를 표시합니다.
Flutter SDK가 설치되어 있다면 “Locate SDK"를 클릭합니다.
Flutter SDK가 설치되어 있지 않다면 “Download SDK"를 클릭합니다.
이 옵션은 개발 도구 사전 요구사항에 따라 Git이 설치되지 않은 경우 Flutter 설치 페이지로 이동합니다.
“Which Flutter template?“이라는 메시지가 표시되면 무시하고 Esc를 누릅니다. 개발 환경 설정을 확인한 후 테스트 프로젝트를 생성할 수 있습니다.
~/Apps에 설치한 후:
echo 'export PATH="~/Apps/flutter/bin:$PATH"' >> ~/.bash_profile
source ~/.bash_profile
텔레메트리 보고를 비활성화하려면 다음 터미널 명령어를 실행합니다:
dart --disable-analytics
안드로이드 스튜디오 설치
“{설치 홈}/bin"으로 이동하고 다음을 입력합니다:
./studio.sh
xed ~/.bash_profile
export PATH=$PATH:/home/yourname/Apps/android-studio/bin
https://docs.flutter.dev/get-started/editor
-
VS Code를 시작합니다.
-
뷰 > 명령 팔레트…를 선택합니다.
-
“install"을 입력하고, 확장 프로그램: 확장 프로그램 설치를 선택합니다.
-
확장 프로그램 검색 필드에 “flutter"를 입력하고, 목록에서 Flutter를 선택한 후 설치합니다. 이 작업은 필요한 Dart 플러그인도 설치합니다.
-
뷰 > 명령 팔레트 (Ctrl+Shift+P)를 선택합니다.
-
“doctor"를 입력하고, Flutter: Flutter Doctor 실행을 선택합니다. (또는 터미널 창에서 flutter doctor를 실행합니다.)
-
출력 창에서 문제가 있는지 확인합니다. 다른 출력 옵션에서 Flutter를 드롭다운 메뉴에서 선택해야 합니다.
점검
flutter doctor
[!] Android toolchain - Android 기기용 개발 (Android SDK 버전 34.0.0)
✗ cmdline-tools 구성이 누락됨
`path/to/sdkmanager --install "cmdline-tools;latest"` 실행
자세한 내용은 https://developer.android.com/studio/command-line을 참조하십시오.
✗ Android 라이선스 상태가 알려지지 않음.
`flutter doctor --android-licenses`를 실행하여 SDK 라이선스를 수락하십시오.
자세한 내용은 https://flutter.dev/docs/get-started/install/linux#android-setup을 참조하십시오.
[✗] Chrome - 웹용 개발 (google-chrome 실행 파일을 찾을 수 없음)
! Chrome을 찾을 수 없습니다. CHROME_EXECUTABLE을 Chrome 실행 파일로 설정해 보십시오.
[✓] Linux toolchain - Linux 데스크탑용 개발
cmdline-tools 설치:
- 안드로이드 스튜디오를 열고,
- SDK(더 보기에서),
- Android SDK cmdline-tools 최신 버전을 선택하고,
- 적용을 클릭합니다
라이선스 수락
flutter doctor --android-licenses
크롬을 사용하는 경우:
which chrome
export CHROME_EXECUTABLE=/usr/lib/chromium/chrome
Flutter 버전 확인 및 업그레이드
Flutter 버전 확인:
flutter --version
Flutter 버전 업그레이드를 위해 다음을 실행합니다:
flutter upgrade
새 Flutter 프로젝트 생성
- 뷰 > 명령 팔레트 (Ctrl+Shift+P)를 선택합니다.
- “flutter"를 입력하고, “Flutter: New Project"를 선택합니다.
- 애플리케이션을 선택합니다.
- 새 프로젝트 폴더의 부모 디렉토리를 생성하거나 선택합니다.
- 프로젝트 이름을 입력하고, 예를 들어 my_app을 입력한 후 Enter를 누릅니다.
- 프로젝트 생성이 완료되고 main.dart 파일이 나타날 때까지 기다립니다.
Flutter에서 디버깅
ctrl+p
>flutter: select device
로깅
https://docs.flutter.dev/testing/code-debugging#logging
stderr.writeln(‘print me’);
import 'dart:developer' as developer;
void main() {
developer.log('log me', name: 'my.app.category');
developer.log('log me 1', name: 'my.other.category');
developer.log('log me 2', name: 'my.other.category');
}
---
import 'dart:convert';
import 'dart:developer' as developer;
void main() {
var myCustomObject = MyCustomObject();
developer.log(
'log me',
name: 'my.app.category',
error: jsonEncode(myCustomObject),
);
}
브레이크포인트
import 'dart:developer';
void someFunction(double offset) {
debugger(when: offset > 30.0);
// …
}
기기로 배포
앱의 APK를 생성하고 아래 명령어를 실행해 보세요
프로젝트 정리
flutter clean
패키지 설치
flutter pub get
APK 빌드
flutter build apk --release
APK를 찾기 위해 컴퓨터에서
your project name\build\app\outputs\flutter-apk(on release mode)
이 APK를 복사하고 모바일 기기에 설치합니다.
Dart에서 잠시 멈추기
비동기 코드에서
await Future.delayed(Duration(seconds: 1));
동기 코드에서
import 'dart:io';
sleep(Duration(seconds:1));
유용한 링크
유용한 패키지
https://pub.dev/packages/flutter_easyloading
https://pub.dev/packages/flutter_spinkit
VSCode 확장 프로그램
https://medium.com/codex/my-top-5-flutter-extensions-for-vs-code-f36936518ff8
아이콘: https://api.flutter.dev/flutter/material/Icons-class.html
모든 아이콘: https://fonts.google.com/icons?selected=Material+Icons
==== 인터넷에서 데이터 가져오기 ====
https://docs.flutter.dev/cookbook/networking/authenticated-requests
관련: 안드로이드 앱 빌드 및 배포
웹 Flutter 앱
- 빌드: https://docs.flutter.dev/platform-integration/web/building
- 다양한 환경에 배포: https://docs.flutter.dev/deployment
VSCode Live 서버 플러그인
