こんにちは！Takuya.B（@TB_IQ）です。

アプリ開発者としてFlutterの学習を始めました。本日はFlutterのインストールから実際にサンプルプロジェクトを作成するところまでの手順をご紹介します。

MacとWindowsとで手順が少々異なるそうですが、本記事ではMacでの手順についてご紹介します。私のMacOSバージョンは MacOS Big Sur version 11.3 です。

ちなみに私の場合、公式サイトの手順に沿うことで特にエラーが発生することなく導入することができました。

Flutterのインストール方法

まずはダウンロード

まずはFlutter、厳密にはFlutterのSDKをダウンロードしましょう。

以下のページでSDK(2021年5月26日時点: flutter_macos_2.2.0-stable.zip)をダウンロードしてください。

zipファイルの解凍

SDK(zipファイル)をダウンロードしたら解凍しましょう。大抵の場合、Downloadsディレクトリに保存されているかと思います。

unzip ~/Downloads/flutter_macos_2.2.0-stable.zip

コマンドを使わなくてもファインダーなどでクリックして解凍しても構いません。

パスを通す

Downloadsディレクトリでは誤って削除してしまう可能性もあるため、ホームディレクトリ配下などに移動しておきましょう。公式サイトの手順に沿って、ホームディレクトリにsourcesディレクトリを作成し、その中に解凍したディレクトリを移動しておきます。

mkdir ~/sources
mv ~/Downloads/flutter ~/sources

次に、実際にパスを通していきます。パスを通すためには.zshrc に以下のどちらかを記述して反映する必要があります。ターミナル上で vi ~/.zshrc を入力し以下を追記してください。

そもそも .zshrc が存在しない場合は、touch ~/.zshrc でまず作成してください。

export PATH="$PATH:`pwd`/flutter/bin"
# もしくは
export PATH="$PATH:~/sources/flutter/bin"

もしくは、ターミナル上で以下を入力しても .zshrc に追記することができます。

echo 'export PATH="$PATH:`pwd`/flutter/bin"' >> ~/.zshrc
# もしくは 
echo 'export PATH="$PATH:~/sources/flutter/bin"' >> ~/.zshrc

最後に .zshrc の内容を反映します。

# .zshrcの内容を反映
source ~/.zshrc

これでflutterを使えるようになりました。

必要なアプリケーションのインストール等

これでflutterの導入は完了しましたが、実際にアプリケーション開発をする際にはエミュレータなどでアプリの動作チェックをする必要がでてきます。

したがって、次に開発に必要になアプリケーションをインストールする必要があります。

必要なアプリケーションが既に揃っているかどうかは以下コマンドを入力することでチェックすることができます。

flutter doctor

注意ですが、私の環境では最初このコマンドを入力しても正常に動作しませんでした。理由はESETでした。アンチウイルスソフトを使用していると正常に動作しないことがあるため、うまく動かない方は一時的にアンチウイルスソフトの設定をオフにして再度試してみてください。

さて、flutter doctor を入力すると、私の環境では以下が表示されました。

[✓] Flutter (Channel stable, 2.2.0, on macOS 11.3 20E232 darwin-x64, locale
    ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2021.1.1)
[✓] Connected device (2 available)

ここでワーニング[!] や エラー[✗] が表示されている場合は解消する必要があります。

これらの項目が何を指しているのかはざっくり

• Flutter: さっきインストールしたやつ！
• Android toolchain: Android開発に必要そう
• Xcode: iOSアプリ開発に必要なやつ
• Chrome: 多分皆さん既に使っているはず
• Android Studio: Androidアプリ開発に必要なやつ
• Intellij IDEA: Flutterが推奨しているエディタ
• Connected device: よくわからんけどデバイス？

私の環境では上から2つ目の Android toolchain でワーニングが発生していましたが、記載されている通りにコマンドflutter doctor —android-licenses を入力すると無事解消することができました。

flutter precache を入力すると必要なファイル類をダウンロードすることができます。

プロジェクト作成方法

では、最後にflutterプロジェクトの作成方法についての説明です。

プロジェクトを作成したいディレクトリ内で以下コマンドを入力してください。

# テンプレート
flutter create `プロジェクト名`

# sample という名前のプロジェクトを作る場合
flutter create sample

これでプロジェクトを作成することができました。

プロジェクトディレクトリ内にiOS, Androidディレクトリが存在するので、.xcworkspaceをクリックしてXcodeを起動して、エミュレータや実機で動作検証をすることが可能(Androidに関しては未確認)

あとがき

さて、本日はFlutterの導入からサンプルプロジェクトの作成方法までの手順をご紹介しました。

次回はエミュレータを用いて実際にアプリをビルドするまでの手順について見ていこうと思います。

というわけで、次回もよしなに！