[Flutter] Flutter 설치방법

Flutter를 사용하기 위해 안드로이드 스튜디오를 설치하던 도중 에러가 발생했다.

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/macos#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.

바로

Android toolchain - develop for Android devices

라는 에러가 발생했는데,
에러 그대로 Android SDK를 사용할 수 없어서 나타나는 에러인 것 같다.
구글링한 결과 안드로이드 스튜디오에서 몇 가지 설정을 통해 해결할 수 있었다.


안드로이드 스튜디오의

SDK Manager

에 들어가면 위와 같은 페이지가 열리는데,

SDK Tools -> Hide Obsolete Packages 체크를 해제

하면

Android SDK Command-line Tools (latest)
Android SDK Tools (Obsolete)

위 두 옵션이 보인다.
설치하여 적용 후 다시 flutter doctor 명령어를 입력했더니 이번에는

Android toolchain - develop for Android devices (Android SDK version 34.0.0)     
! Some Android licenses not accepted. 
To resolve this, run: flutter doctor --android-licenses

이러한 warning이 나타났다.
허가되지 않은 안드로이드 라이센스가 있다고 하며, "

flutter doctor --android-licenses

"를 입력하라고 한다.

위 과정까지 끝내고 나서야 모든 항목에 초록불이 켜졌다.
이제 flutter를 사용할 수 있다.

사실 설치 과정이 꽤 복잡하여 정리를 해보았다.
필자는 macOS를 사용중이라 mac에 집중하여 설치 방법을 소개하려고 한다.

Flutter 설치에는 두 가지 단계가 있다.

  1. SDK 설치
    • 먼저 flutter.dev 사이트에 접속 후 Get Started 버튼을 찾아 들어가면 운영체제마다 Install을 할 수 있도록 안내되어 있다.
      => 해당 방법은 .zip 파일을 설치해 경로를 설정하는 등등의 과정이 필요하다.
    • 더 쉽게 설치하려면 homebrew를 이용하자 (mac)
    • 터미널을 실행한 후 $brew install --cask flutter
    • 별다른 에러가 없다면 잘 설치된 것이다.
  2. 시뮬레이터 설치
    • 시뮬레이터 설치가 굉장히 까다롭다.
    • IOS, Android 등 OS마다 전부 설치 방법이 다르다…
    • 그냥 공식문서 보고 잘 따라해보자. Install 페이지를 찾았다면 우측 목차에 [iOS setup / Android setup] 두 목차가 있을 것이다.
    • 필자는 iOS, Android 둘 다 셋팅해보려 한다.
    • 설치가 완료되면 $flutter doctor 명령어로 플러터를 시작할 수 있는 상태인지 확인해보자.
    • 모든 준비사항이 완료되어야 시작 가능하다.

 

'Mobile' 카테고리의 다른 글

[Flutter] Flutter의 동작 방식  (0) 2023.10.10
[Dart] Class 및 다양한 Class 속성에 대해  (0) 2023.10.10
[Dart] Dart의 Function 사용법  (0) 2023.10.10
[Dart] Dart의 Data Types  (0) 2023.10.09
[Dart] Dart의 변수 정의  (3) 2023.10.09

Google에서 개발한 오픈 소스 UI 소프트웨어 개발 키트
Dart의 프레임워크이며 모바일 앱, 웹, Linux 등 여러 플랫폼에 대해 개발이 가능하다.

동작 원리

네이티브 앱은 운영체제가 렌더링에 관여한다.
그러나

Flutter 혹은 Dart는 운영체제와 직접적으로 소통하지 않는다.

Flutter에서는 실제로 버튼을 만들어내는 등과 같은 행위는 할 수 없다.
그렇다면 어떻게 UI를 만들어내는 것일까?

위 구조를 살펴보면 Framework 하단에 C/C++로 이루어진 엔진이 존재한다.
네이티브 앱은 운영체제(IOS, AOS 등)와 직접적인 상호작용을 통해 모바일 앱 상의 화면을 그려내지만 Flutter는 엔진이 렌더링을 한다.

그렇다. Dart/Flutter로 작성된 코드를 해당 화면을 그려주는 것은 바로 엔진이다.

그리고 운영체제와 엔진 사이에서 인터페이스 역할을 해주는 것이 Embedder이다.

Embedder는 각 플랫폼에 맞게 애플리케이션이 원활하게 실행될 수 있도록 지원하며,
플러터의 크로스 플랫폼 개발을 가능하게 한다.

이제 예시로 애플리케이션 동작 Flow를 살펴보면 아래와 같다.
https://flutter-ko.dev/resources/faq#run-android

  1. 사용자가 앱을 실행함
  2. C / C++로 구현된 엔진이 각각의 운영체제에서 이해할 수 있는 표현으로 컴파일됨
  3. 엔진이 Dart 코드를 실행시킴

단점

Native 자원을 사용하지 못해 실제 운영체제로부터 화면이 그려지는게 아니라 Flutter 엔진에 의해 렌더링됨.
즉, 네이티브에서 사용 가능한 위젯을 사용할 수 없음

마무리

포스팅이 단점으로 끝나는 것 같지만, Flutter 엔진은 실로 강력한 기능을 지원해서 네이티브 위젯의 필요성을 못느낄 정도라고 한다.

또한 각 운영체제에서 앱이 실행될 수 있게 해주는 Embedder의 존재로 인해 크로스 플랫폼이 가능하다는 것은 정말 강력한 장점이라고 생각한다.

현재 시점에 제대로 된 플러터 개발을 시작하지 않아서 느낌만 가지고 말할 수는 없지만 플러터로 개발된 다양한 웹앱을 보니 정말 자연스러운 것 같다.

이제부터 세부적인 사항에 대해 차차 알아보려고 한다.

'Mobile' 카테고리의 다른 글

[Flutter] Flutter 설치방법  (0) 2023.10.12
[Dart] Class 및 다양한 Class 속성에 대해  (0) 2023.10.10
[Dart] Dart의 Function 사용법  (0) 2023.10.10
[Dart] Dart의 Data Types  (0) 2023.10.09
[Dart] Dart의 변수 정의  (3) 2023.10.09

Dart의 변수를 정의하는 방법에 대해 공부한 내용.
변수 정의에 앞서 알아야 할 것은 Dart는 main 함수로부터 시작이 된다는 것이다.
필자는 현재 C#으로 개발을 오래 해왔기 때문에 변수의 타입을 지정하는 것에 익숙하다. (그러나 C#과는 또 다르다.)

이번에 게시할 내용은 NomadCoder에 무료 강의 기반이다.

변수 타입

void main() {
    //1. 변수 타입 or var
    //변수의 타입 혹은 var를 사용하는 경우는 나중에 변경 가능하다.
    //말 그대로 변수이다.
    int i = 12;
    var name = 'la';
    i = 123123123123;
    name = 'lalalala';
}

Final

//2. final - 한번만 변수 값을 할당하고 싶을 때 사용한다.
void main() {
    final name = 'JP';
    name = 'JPP'; //에러 발생
}

dynamic

void main() {
    //3. dynamic - 타입에 상관없이 변수 값을 할당 가능하게 한다.
    //아래 세 가지 변수 할당 전부 가능
    dynamic name;
    name = 'JP';
    name = 1212;
    name = true;

    //dynamic으로 정의된 변수는 아래와 같이 조건문으로 타입을 검사하면
    //해당 타입에 맞는 메서드를 호출해 사용할 수 있다.
    if(name is String) {
        name.length
    }
}

const

void main () {
    //4. const - 알고 있는 값에 대해 상수 값을 정의한다.
    const name = 'JP';
    name = 'JPP'; //상수 값은 변경될 수 없으므로 에러 발생

    //fetchAPI 함수의 값을 알 수 없으므로 에러 발생
    const name2 = fetchAPI(); 
}

null safety

void main() {
    //5. null safety - null 값을 참조하지 못하게 해준다.
    String name = 'JP';
    // 에러 발생
    name = null; 

    String? name2 = 'JP';
    // 정상 동작
    name = null; 
    // name 값이 null이 될 수 있어서 에러 발생
    name.isEmpty; 
    // 정상 동작 - name != null이 아닐 경우에만 isEmpty 동작
    name?.isEmpty;
    // name?.isEmpty와 같은 동작 결과 
    if(name != null) {
        name.isEmpty
    }
}

late

void main() {
    //6. late - 변수의 값을 나중에 초기화한다.
    // late는 API 호출 후 리턴 값을 정의하는데 주로 사용한다.
    late name;
    name = 'JP';

    late final String name;
    name = 'JP';
    name = 'JPJP'; //에러 발생
}

'Mobile' 카테고리의 다른 글

[Flutter] Flutter 설치방법  (0) 2023.10.12
[Flutter] Flutter의 동작 방식  (0) 2023.10.10
[Dart] Class 및 다양한 Class 속성에 대해  (0) 2023.10.10
[Dart] Dart의 Function 사용법  (0) 2023.10.10
[Dart] Dart의 Data Types  (0) 2023.10.09

+ Recent posts

티스토리툴바