Flutter, Dart 정리
Flutter는 크로스플랫폼에서 개발할 수 있는 프레임워크고 Dart 언어를 사용한다.
vscode에서 Flutter를 사용해 앱개발을 하기 위해 공부한 내용을 정리했다.
설치
우선 설치를 해보자.
MAC
본 환경은 Macbook Air M2 칩셋을 사용하기 때문에 윈도우 설치법은 코딩애플 등의 flutter 설치법을 참고하길 바란다.
1. Homebrew
우선, 맥북 유저의 경우 homebrew는 대부분 설치 되어있을 것이다.
만약, 설치가 되어 있지 않다면, (🍺)(https://brew.sh/ko/) 를 참고하여 설치하기 바란다.
2. Flutter
homebrew 설치기 되었으면, terminal을 열어서 flutter 설치를 진행해보자.
brew install --cask flutter위 명령어를 사용하면 flutter와 dart언어까지 설치가 되었고, flutter 설치를 위한 doctor 명령어를 실행해서 필수로 설치해야할 나머지 과정을 진행해보자.
flutter doctordoctor 명령어를 실행하면 아마도 아래와 같은 상황일 것이다.
우리는 이제 Android SDK와 Xcode, CocoaPods를 설치하면 된다.
3. Android Studio
Android Studio도 brew 명령어를 통해서 쉽게 설치 가능하다.
terminal에서 아래의 명령어를 입력하여 Android Studio를 설치하자.
brew install --cask android-studio기본 세팅대로 모두 설치를 진행하면 되고
이 창이 떴다면, Plugins 에 들어가자
Plugins에서 Dart, Flutter를 검색하여 설치를 진행하자.
Android Studio는 이것으로 마무리하고, 다음은 Xcode와 설치로 넘어가겠다.
4. Xcode
Xcode는 App Store에서 설치하면 된다.
기본적인 설치법 대로 진행하면 되는데
해당 창이 떳다면, iOS를 체크하고 설치를 진행하자.
시간이 좀 걸릴 수도 있으니 차분히 기다리자.
설치가 완료 되었다면 다음은 Cocoapods 설치를 진행하자.
5. Cocoapods
brew 명령어를 통해 간단하게 설치할 수 있으며, 명령어는 아래와 같다.
brew install cocoapods모든 설치가 마무리 되었고, 이제 flutter doctor 명령어를 실행에 필요한 모든 파일이 설치되었는지 확인해보자.
No issues found!라고 뜬다면, 모두 설치가 된것이다.
튜토리얼 시작 !
vscode 환경에서 flutter를 실행하기 위해서 extension 항목에서 flutter를 검색해서 설치해주자.
flutter extension을 설치하였으면, command + shift + p 단축키를 눌러 Command palette를 실행시키고, flutter를 검색해 Flutter: New Project를 누른다.
우리는 Mobile App을 만들어 볼 것이기 때문에 Application을 선택.
이후, 프로젝트 파일을 저장할 폴더를 지정해주면 기본 프레임이 나타날 것이다.
이제 우리는 다시 Command Palette에서 Flutter: Select Device를 눌러서 앱을 실행시키기 원하는 에뮬레이터를 선택할 수 있다.
iOS 시뮬레이터를 선택해보자.
그러면 아래와 같은 시뮬레이터가 실행 될 것이다.
앱을 실행시키려면 main.dart 파일의 run버튼을 눌르면 된다.
앱을 실행시켜보자.
잘 실행이 되었다.
안드로이드 시뮬레이터 역시 동일한 방법을 진행하면 된다.
이제 앱개발을 위한 모든 준비를 마쳤다.