Ant Kong

flutter_spinkit

대부분의 완성도 있는 시중의 앱들은 화면을 로드할 때 loading indicator가 실행되어서 로드 되는 시간 동안 유저가 자연스럽게 로딩을 느낄 수 있도록 만들어주고 있습니다. 이같은 Loading Indicator들을 다양한 스타일로 사용할 수 있도록 만들어 놓은 패키지가 flutter_spinkit 패키지 입니다. 

실제로, 공부를 하는 과정에서도, 파이어베이스를 사용할 때, 파이어베이스로 add, edit, delete, data load하는 과정에서 데이터베이스로 데이터가 들어갈 때의 속도 지연 때문에 앱 진행이 지연되는 경우가 많았는데, 그런 경우 flutter_spinkit를 활용해서 앱 중간 중간에 활용해준다면 매우 유용할 것 같네요!

먼저 import를 위해 국룰인 "pub add flutter_spinkit" 터미널에 입력해준다. 

import 'package:flutter_spinkit/flutter_spinkit.dart';

const spinkit = SpinKitRotatingCircle(
  color: Colors.white,
  size: 50.0,
);

 해당 방식을 사용해서 처리한다. 

만든 예시 자료 

를 넣어주고 돌리게 되면 에뮬레이터에 다음과 같은 화면이 나타나게 된다. 

1. Flutter SDK 다운로드

• 공식 사이트 다운로드 페이지로 이동하여 다운로드한다. 

https://docs.flutter.dev/get-started/install

• 현재, 자신의 운영체제에 맞는 것을 선택해서 다운 받으면 된다. 

2. Flutter SDK 압축 해제 및 폴더 셋팅

• 다운이 완료되었되면, 압축을 풀어준다. 

• 압축해제가 되었으면 flutter라고 압축해제 된 파일을 확인할 수 있다.

• 해당 파일을 오려내서 C:\src 폴더를 생성해서 flutter 폴더를 붙여넣기 해준다.

3. Flutter 환경변수 설정

• Windows 기준, 고급 시스템 설정을 선택한다.

• 해당 내용에서 환경 변수 버튼을 클릭한다.
• 사용자 변수와 시스템 변수가 있다. 시스템 변수 쪽에 변수가 Path인 것을 선택하고 [편집] 버튼을 클릭한다. 

• Flutter의 경로를 복사해와서 새로 만들기를 클릭 후, 해당 경로를 추가해주면 된다.

4. 안드로이드 스튜디오 설치

• 아래 URL 사이트로 들어가서 안드로이드 스튜디오 다운로드 버튼을 클릭하여 다운받는다.

https://developer.android.com/studio?gclid=EAIaIQobChMIoYfr35Lr9wIVwdCWCh2_wQRCEAAYASAAEgIOQPD_BwE&gclsrc=aw.ds 

• 다운 받은 파일은 더블 클릭하여 실행시켜주면 설치를 시작하게 된다.

• next,,, 반복 그리고 install을 눌러준다.

• do not import settings를 클릭해준다.

• don't send를 클릭해준다.

• next를 클릭해주고, finsh를 눌러주면 프로젝트를 만들기 위해서 다운로드를 시작하는 걸 확인할 수 있다.

• 설치가 완료되었다. Finsh 버튼을 클릭한다.

• 다운로드가 완료된 것을 확인할 수 있다.

5. Flutter, Dart 플러그인 설치

• 해당 화면에서 Plugins를 선택해서 Flutter를 설치해준다.

• 그리고 다음과 같은 문구가 등장한다.
  번역하면, 자동으로 Dart를 함께 설치하겠냐고 물어보는 문구이다!
  install을 눌러 함께 설치해주면 된다.

• Restart IDE를 눌러 재시작을 하면, 이후 Flutter Plugins가 반영된 것을 확인할 수 있다.

6. Flutter Project 생성하기

• New Flutter Project를 클릭한다. 

• Flutter를 클릭하고 Flutter Project 주소를 입력해준다. 

• C:\src 밑에 flutterwork 폴더를 만든다. 
  해당 폴더에서 실제 프로젝트를 구동하는 소스를 담아둘 것이다.

• Flutter 프로젝트 생성을 위한 기본 설정을 한다.
  • Project name : flutter_app
  • Project location : C:\src\flutterwork\flutter_app
  • Description : A new Flutter project
  • Project type : Application
  • Organization : com.example
  • Android language : Kotlin, Swift
  • Platforms : Android, iOS

• 기다리고 있으면 프로젝트 생성이 완료된 것을 확인할 수 있다.

• 밑에 터미널을 열어서 Flutter가 잘 깔아졌는지 확인하는 명령어를 입력해서 확인해준다.
  명령어 : flutter doctor

• [flutter doctor 오류 수정]
  명령어를 실행하면 아래와 같은 경고를 확인할 수 있을 것이다.
  에러1) cmdline-tools component is missing

• 에러2) Android license status unknown.
  
  • 이 경고는 toolchain이 연결되지 않았다는 오류 그리고, JDK가 없다는 경고이다.
    Flutter로 앱을 만들기 위해서는 필수로 JDK가 설치되어있어야한다. 
    JDK는 Android Studio를 설치할 때 같이 설치되었다.
    근데 셋팅이 제대로 되어있지 않아서 연결을 하지 못해 발생한 오류이다. JDK 환경변수 설정을 해야한다.
    경로 : C:\Program Files\Android\Android Studio\jre\bin

File > Settings > Appearance & Behavior > System Settings > Android SDK > SDK Tools (~~~~latest 선택)

• 오류가 해결된 것을 확인할 수 있다. 

• 에러3) Visual Studio - develop for Windows
  https://visualstudio.microsoft.com/ko/downloads/

• 만약에, 아래와 같은 에러가 발생한다면, vswhere 파일을 바꿔주는 작업을 해야한다.  

• 주소 : C:\Program Files (x86)\Microsoft Visual Studio\Installer
  위의 주소에 있는 vswhere 파일을 삭제하고 아래 사이트에 들어가 있는 github 폴더 안의 vswhere 폴더로 바꿔준다.

참고했던 사이트 : https://github.com/flutter/flutter/issues/103622

Android Studio 에서 Android Emulator를 설치하려고 했다
그런데 아래와 같은 에러 메시지가 발생했다

찾아보니 AMD CPU에서 가상화 관련하여 발생하는 문제라고 한다

해결방법

1. Window 가상화 관련 옵션 끄기
   제어판 > 프로그램 > Windows 기능 켜기/끄기로 가서 화살표 표시한 부분을 전부 체크해제한다.
   
   그런데 나는 다 해제가 되어있었다
2. AMD Bios 가상화 설정
3. 설정전

컴퓨터 부팅시 "DEL" 또는 "F2"등의 바이오스 진입 키를 이용해 BIOS에 진입한다. 메인보드 제조사마다 바이오스 진입 설정키는 다를 수 있다. asrock의 경우 "DEL"키로 진입이 가능하다고 한다.


Advanced(고급) > CPU구성(CPU Features) > SVM Mode(가상화설정) - 사용안함을 사용함(Disabled->Enabled)으로 변경 (Enabled(활성화)> F10으로 저장 후 재부팅> 완료


완료후 윈도우 상에서 작업관리자의 성능부분에 CPU탭을보면 가상화가 사용으로 변경된것을 확인할 수 있다.

설정후

1. [File] > [New] > [New Flutter Project] 클릭

2. 프로젝트 타입을 플러터로 선택한 뒤 Flutter SDK path 옆에 ... 버튼 클릭

3. 기존 플러터를 설치했던 경로 지정!!!! (이부분은 안드로이드 SDK와 다르다) 

4. 경로 확인 후 Next 클릭

6. 생성 완료