技術的備忘録

基本自分用備忘録

Flutter VSCode 環境構築 mac編››

FlutterSDKをインストール

1.公式のmacOSを選択 flutter.dev 2.公式の手順通りにすすめる

$ mkdir ~/development
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_2.2.2-stable.zip

3.bash_profileを編集

$ sudo vi ~/.bash_profile

4.以下の列を追加

export PATH=${HOME}/development/flutter/bin:$PATH

5.ターミナルを終了し、起動し直す

6.flutterコマンドのパスが通っていることを確認

$ which flutter
(以下が表示される)
/Users/{name}/development/flutter/bin/flutter

(update確認)
$ flutter upgrade

AndroidStudioインストール

1.公式からダウンロード developer.android.com 2.インストール

3.AndroidStudio起動

4.AndroidSDKを適当にダウンロード f:id:syoch:20210618220033p:plain

5.flutter doctorコマンドでソフトウェア確認 - Android Licenseに同意

$ flutter doctor --android-licenses
  • 自分の環境では、古いSDKが残っていたので、ライセンス同意コマンドの実行に失敗した
  • 古いSDKとかBuildToolsを一度アンインストールして、再インストール後、ライセンス同意コマンドの実行に成功

  • 不足しているソフトウェアを確認

$ flutter doctor

f:id:syoch:20210618220042p:plain

XCodeインストール

flutter.dev 1.AppStoreからXcodeをインストール

2.ターミナルで以下のコマンドを実行

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch

3.以下のコマンドでライセンスに同意

$ sudo xcodebuild -license
~~~スペース何回か~~~
$ agree

cocoapodsのインストール

guides.cocoapods.org 1.ターミナルで以下のコマンドを実行

$ sudo gem install cocoapods

2.flutter doctorで確認 f:id:syoch:20210618220048p:plain

VSCode

  • 拡張機能の「Flutter」と「Dart」をインストール

    実行確認

  • ターミナルで以下のコマンドを実行していく
  • flutter create my_app
  • cd my_app
  • flutter run
  • 以上の手順でブラウザでの動作が確認できる