転職したらスマレジだった件

スマレジのエンジニアやまてのテックブログです。マジレス大歓迎です。

Flutter の環境構築 ① Flutter のインストール 〜 PATH を通す

はじめに

Flutter 開発環境の構築について、遭遇したエラーなどのつまずいた点、分からなくて調べた点などを含めて書き出します。

環境

目次

1. Flutter のインストール

Flutter SDK を以下のページからダウンロードします。

docs.flutter.dev

SDK(Software Development Kit)…ソフトウェア開発キット

私の使用している MacBookPro は Intel チップであるため、 Intel を選択します。

ダウンロードした zip ファイルを解凍して、ユーザーディレクトリ直下に development ディレクトリを作成して、その中に解凍後の flutter ディレクトリを移動させます。(私の場合、/Users/r_yamate/development/flutter)

2. PATH を通す

次に flutter コマンドを使用できるようにするために PATH を通します。

2-1. PATH を通す前に、「PATH が通っていない」とは

PATH を通す前に、PATH を通すということがよくわかっていない人(自分)のために、「PATH が通っていない」状態を確認します。

「PATH が通っていない」状態は、flutter コマンドを実行するためのプログラムがどこにあるのかコンピューターがわかっていない状態です。

Flutter のバージョンを確認するコマンドを実行してみます。

flutter --version
  • 実行時ログ

      $ flutter --version
      zsh: command not found: flutter
    

現時点、 flutter コマンドを実行するための PATH は通ってないので、見つかりません。

続いて、以下のコマンドを実行します。

~/development/flutter/bin/flutter --version
$ ~/development/flutter/bin/flutter --version
Flutter 3.3.10 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 135454af32 (5 weeks ago) • 2022-12-15 07:36:55 -0800
Engine • revision 3316dd8728
Tools • Dart 2.18.6 • DevTools 2.15.0

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
  ║ statistics and basic crash reports. This data is used to help improve      ║
  ║ Flutter tools over time.                                                   ║
  ║                                                                            ║
  ║ Flutter tool analytics are not sent on the very first run. To disable      ║
  ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
  ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
  ║ event will be sent, and then no further information will be sent by the    ║
  ║ Flutter tool.                                                              ║
  ║                                                                            ║
  ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
  ║ Note: The Google Privacy Policy describes how data is handled in this      ║
  ║ service.                                                                   ║
  ║                                                                            ║
  ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
  ║ crash reports to Google.                                                   ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://flutter.dev/docs/reference/crash-reporting                         ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://policies.google.com/privacy                                        ║
  ╚════════════════════════════════════════════════════════════════════════════╝

コマンドで PATH を伝えることでプログラムの場所がわかるため、実行されます。

このように PATH が通っていないと、コマンドを実行するためのプログラムがどこにあるのかコンピューターがわかっていないので、ファイルの場所をコマンドを実行するたび伝える必要があります。

どこからでも flutter コマンドを実行するために、プログラムの場所を伝えて(PATH を通して)おこう、ということになります。

2-2. PATH を通す

それでは、PATH を通します。

docs.flutter.dev

下記コマンドで、使用しているシェルを確認します。

echo $SHELL
  • 実行時ログ

      $ echo $SHELL
      /bin/zsh
    

/bin/zsh と表示されれば、 zsh を使用しています。zsh は、最近の macOS(Catalina(10.15)以降) の標準シェルです。

下記のコマンドを実行して、 PATH を通します。

echo export PATH=\"\$PATH:\$HOME/development/flutter/bin\" >> ~/.zshrc

~/.zshrc ファイルに export PATH="$PATH:$HOME/development/flutter/bin" を追記する、というコマンドです。 $HOME は、 ホームディレクトリです。

追記したら、下記のコマンドで変更を反映します。

source ~/.zshrc

Flutter のバージョンを確認するコマンドを実行してみます。

flutter --version
  • 実行時ログ

      $ flutter --version
      Flutter 3.3.10 • channel stable • https://github.com/flutter/flutter.git
      Framework • revision 135454af32 (5 weeks ago) • 2022-12-15 07:36:55 -0800
      Engine • revision 3316dd8728
      Tools • Dart 2.18.6 • DevTools 2.15.0
    

Flutter の PATH が通りました!

3. Flutter の実行に必要なものの確認

Flutter の実行に必要なものを下記のコマンドで確認します。

flutter doctor
  • 実行時ログ

      $ flutter doctor
      Doctor summary (to see all details, run flutter doctor -v):
      [✓] Flutter (Channel stable, 3.3.10, on macOS 12.6.1 21G217 darwin-x64, locale ja-JP)
      [!] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
          ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
      [✗] Xcode - develop for iOS and macOS
          ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
            Download at: https://developer.apple.com/xcode/download/
            Or install Xcode via the App Store.
            Once installed, run:
              sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
              sudo xcodebuild -runFirstLaunch
          ✗ CocoaPods not installed.
              CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
              Without CocoaPods, plugins will not work on iOS or macOS.
              For more info, see https://flutter.dev/platform-plugins
            To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
      [✓] Chrome - develop for the web
      [!] Android Studio (version 2022.1)
          ✗ Unable to find bundled Java version.
      [✓] VS Code (version 1.74.3)
      [✓] Connected device (2 available)
      [✓] HTTP Host Availability
    
      ! Doctor found issues in 3 categories.
    

    www.DeepL.com/Translator(無料版)での翻訳は以下の通りです。

      $ flutter doctor
      ドクターの概要(すべての詳細を見るには、flutter doctor -vを実行してください)。
      [✓] Flutter (Channel stable, 3.3.10, on macOS 12.6.1 21G217 darwin-x64, locale ja-JP)
      [!] Android toolchain - Androidデバイス用に開発する(Android SDKバージョン33.0.1)
          ! 一部のAndroidライセンスが受け付けられません。 これを解決するには、次のように実行してください: flutter doctor --android-licenses
      [Xcode - iOSとmacOS向けに開発する。
          iOSの開発には、Xcodeの完全なインストールが必要です。
            ダウンロードはこちら: https://developer.apple.com/xcode/download/
            または、App StoreからXcodeをインストールします。
            インストールしたら、実行します。
              sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer を実行します。
              sudo xcodebuild -runFirstLaunch
          ✗ CocoaPodsがインストールされていません。
              CocoaPodsは、Dart側でプラグインを使用した際に反応するiOSやmacOSプラットフォーム側のプラグインコードを取得するために使用されます。
              CocoaPodsがないと、iOSやmacOSでプラグインが動作しません。
              詳しくは、https://flutter.dev/platform-plugins を参照してください。
            インストール方法は、https://guides.cocoapods.org/using/getting-started.html#installation を参照してください。
      [✓] Chrome - ウェブ用に開発する。
      [Android Studio (バージョン2022.1)
          ✗ バンドルされている Java のバージョンを見つけることができません。
      [VS Code (バージョン1.74.3)
      [✓] 接続されているデバイス(2台利用可能)
      [✓] HTTP ホストの利用可能状況
    
      ! ドクターは3つのカテゴリーで問題を発見しました。
    
      www.DeepL.com/Translator(無料版)で翻訳しました。
    

記載のある項目を書き出すと、以下の通りです。

チェックマークがついていない項目をインストールします。

おわりに

今回は、Flutter のインストール から PATH を通すところまで書きました。

次回は、Flutter の実行に必要なもろもろのインストールを書き出します。

ryamate.hatenablog.com

ありがとうございました。

参考

docs.flutter.dev

migisanblog.com



特に家族との日々を一番大事にしながら、自分のキャリアも後悔なく楽しんで積み上げていきたいです。