Flutter環境構築手順書(Mac)

Flutter SDK インストール

• flutterファイルをダウンロード

  • https://docs.flutter.dev/get-started/install/macos/mobile-ios

• 通常ダウンロードフォルダにダウンロードされているはずなので、developmentフォルダに解凍する

  $ unzip ~/Downloads/flutter_macos_arm64_3.24.1-stable.zip \
         -d ~/development/
  

• PATHを通す

  $ vim ~/.zshrc
  
  // 以下を.zshrcに追加
  export PATH=$HOME/development/flutter/bin:$PATH
  
  $ which flutter
  /Users/ユーザ名/development/flutter/bin/flutter
  
  $ which dart
  /Users/ユーザ名/development/flutter/bin/dart
  
  $ flutter --version
  Flutter 3.24.1 • channel stable • https://github.com/flutter/flutter.git
  Framework • revision 5874a72aa4 (3 days ago) • 2024-08-20 16:46:00 -0500
  Engine • revision c9b9d5780d
  Tools • Dart 3.5.1 • DevTools 2.37.2
  
  // これでOK
  

fvmインストール

$ brew tap leoafarias/fvm
$ brew install fvm

💡 .tool-versionsにrubyのバージョンを指定していないと動かない場合があるよ！

$ vim ~/.tool-versions

// 以下の記述をファイル内に追加
ruby 3.1.5

Xcodeをインストール

• App Storeからインストールしてね
• インストールしたら…

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch
// agreeって入力してね

• エミュレータをインストールする

  • Xcodeを開き、「Xcode」→「Settings」→「Platforms」タブに移動する

  • iOSをget

    

うまく行ったか確認する

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.1, on macOS 14.6.1 23G93 darwin-arm64, locale ja-JP)
[✗] 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/to/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.

[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.92.0)
[✓] Connected device (3 available)
[✓] Network resources

! Doctor found issues in 2 categories.

👍

実際にシミュレートしてみる

• サンプルプロジェクトの作成

$ mkdir sample
$ cd sample
$ fvm flutter create . --project-name sample --platforms android,ios --org com.sample

• シミュレータの起動

$ open -a Simulator

• プロジェクトの起動

$ flutter run

右下の「+」ボタン押してカウントアップできたらOK!!!