Contents
Flutter란?
Flutter(플러터)는 단일 코드로 데스크탑(Windows, MacOS, Linux)와 모바일(Android, iOS), 웹에서 모두 동작하는 앱을 개발할 수 있는 구글에서 개발한 무료 오픈 소스 UI 프레임워크입니다. (참고로 Windows용 앱 개발을 위한 SDK는 2.1 버전 부터 안정화(stable) 버전을 제공하고 있습니다. macOS 및 Linux의 경우는 3 버전 이상 부터 안정화(stable) 버전을 사용할 수 있습니다.)
플러터는 상당히 많은 모듈화된 위젯들을 제공하고 있으며 이를 이용해서 Widget tree1를 쌓아가면서 유저 인터페이스를 구현하는 방식으로 앱을 개발할 수 있습니다.
Flutter 장/단점(개인적 견해)
- 장점
- 크로스 플랫폼 지원.
- 핫 리로드 기능(코드 수정후 컴파일 과정을 거치지 않고 빠르게 UI를 확인할 수 있음)
- UI 안정성(Flutter는 C++ 그래픽 라이브러리(Skia)를 사용하여 UI를 직접 Screen Canvas에서 그림으로서 비교적 안정적인 UI 처리를 할 수 있음)
- 단점
- 각 플랫폼별 플러그인 개발에 필요한 언어(C/C++, Swift 등)를 습득해야함.
- 플러터 개발을 위한 적합한 아키텍쳐를 개발자(?)가 선택해야함. (플러터 개발을 위한 추천 아키텍쳐가 없는것 같음)
Flutter 3.0 설치를 위한 환경
- OS : Windows 10 or later(64bit), x86-64 기반
- 디스크 용량 : 1.64GB(IDE/도구를 위한 디스크 공간은 포함하지 않음)
- 도구 : 플러터는 아래의 도구를 필요로 합니다.
- Windows PowerShell 5.0 이상(윈도우 10 이상부터는 이미 설치 되어 있음)
- 윈도우용 Git (Git을 이용하여 최신 버전을 업데이트 하고자 하는 사용자)
- Visual Studio 2019 이상 또는 Visual Studio Build Tools 2019 이상(설치시 Desktop development with C++”을 선택)
Flutter 설치
- Flutter SDK 설치
- Flutter SDK를 다운받아 설치 합니다. (SDK 릴리즈)
- 주의 : 특수 문자나 공백이 포함된 경로에 Flutter를 설치 하지 마세요.
- 주의 : C:\Program Files\ 등과 같이 권한 상승이 필요한 디렉토리에 Flutter를 설치 하지 마세요.
- Git을 통해 안정화 버전을 다운받습니다.
- C:\Flutter>git clone https://github.com/flutter/flutter.git -b stable
- Flutter SDK를 다운받아 설치 합니다. (SDK 릴리즈)
- 환경 변수에 경로 설정
- 윈도우 하단의 검색 시작 표시줄에서 ‘env’를 입력합니다.
- 『[로그인 사용자 계정]에 대한 사용자 변수』에서 『Path』 항목을 선택하고 편집 버튼을 누릅니다.
- flutter\bin 경로를 추가합니다.
- 개발을 위한 환경 점검
- flutter doctor를 이용하여 flutter 개발 환경의 문제점을 파악하고 해결할 수 있습니다.
1
C:\> flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.0.0, on Microsoft Windows [Version 10.0.19044.1706], locale en-US) [✓] Chrome - develop for the web [✓] Visual Studio - develop for Windows (Visual Studio Professional 2022 17.2.0) [✓] VS Code (version 1.67.2) [✓] Connected device (3 available) [✓] HTTP Host Availability • No issues found!
- flutter devices 를 이용하여 추가 되어 있는 플랫폼를 확인 할 수 있다.
1
C:\> flutter devices 2 connected devices: Chrome (web) • chrome • web-javascript • Google Chrome 105.0.5195.127 Edge (web) • edge • web-javascript • Microsoft Edge 105.0.1343.53
- flutter config를 이용하여 개발에서 제외 하고자하는 플랫폼을 지정할 수 있습니다.
- --no-enable-windows-desktop
- --no-enable-linux-desktop
- --no-enable-macos-desktop
- --no-enable-web
- --no-enable-android
- --no-enable-ios
1
C:\> flutter config --no-enable-ios
- 반대로 flutter config를 이용하여 개발에 포함하고 싶은 플랫폼을 지정할 수도 있습니다.
- --enable-windows-desktop
- --enable-linux-desktop
- --enable-macos-desktop
- --enable-web
- --enable-android
- --enable-ios
1
C:\> flutter config --enable-ios
앱 생성 및 실행
아래와 같이 명령을 입력하여 앱을 생성합니다.
1
2
> flutter create my_app
> cd my_app
아래와 같이 명령을 입력하여 앱을 실행합니다.
1
> flutter run -d windows (또는 macos, linux 등)
(* 참고 : d 플래그를 입력하지 않으면 flutter run에서 선택할 수 있는 대상이 나옵니다.)
Launching lib\main.dart on Windows in debug mode…
Exception: No Windows desktop project configured. See
https://docs.flutter.dev/desktop#add-desktop-support-to-an-existing-flutter-app to learn about adding Windows support to a project.
와 같은 오류 발생시 “flutter create .” 명령 입력후 다시 위의 명령을 수행하면 된다.
(* 참고 : flutter create –platforms=windows 으로 미리 설정해주면 오류가 발생되지 않음)
배포 앱 빌드 및 배포
릴리즈 파일을 생성하려면 아래와 같이 입력합니다.
1
> flutter build windows (또는 macos, linux 등)
배포시 build\windows\runner\Release 내의 파일 모두와 아래의 파일들을 함께 배포합니다.
1
2
3
4
5
6
7
8
9
10
11
Release
│ flutter_windows.dll
│ msvcp140.dll
│ my_app.exe
│ vcruntime140.dll
│ vcruntime140_1.dll
│
└───data
│ │ app.so
│ │ icudtl.dat
...
기존 flutter 앱에 다른 지원 디바이스 추가
기존 flutter 프로젝트에 윈도우, 맥, 리눅스 등 다른 데스크탑 지원을 추가하려면 아래와 같이 명령어를 입력합니다.
1
> flutter create --platforms=windows,macos,linux
기타 명령
다른 개발자가 개발한 프로그램을 불러왔을 때 패키지가 나의 PC에는 없을 수가 있는데, 이는 아래의 명령으로 패키지를 쉽게 가져올 수가 있습니다.
1
> flutter pub get
Widget Tree : React의 component tree 또는 Html DOM tree와 같은 개념으로 UI Compoent를 모두 사각형으로 분해합니다 ↩