Flutter 開発環境の構築

macOS Big Sur にて、Android StudioとCursorがインストールされている環境に Flutter をセットアップする。(※環境は、stera terminal (JT-C60) のアプリを開発するためのセットアップとなっていますので、通常のインストール方法と異なる部分があるかも知れませんのでご注意ください)

1.Flutter をインストールする

Cursorの左ペインにある VSCode のマーケットプレイスから、Flutterを検索し、インストールボタンを押下する。

cmd+shift+pで、コマンドパレットを表示して”flutter new project”とタイプして実行する。

画面左下に、

image

が表示されるので、”Download SDK”をクリックして、SDKをインストールする。

2.環境変数を設定する

.zprofile ファイルのPATHに ~/flutter/bin を追加する。

$ echo 'export PATH=~/flutter/bin:$PATH' >> .zprofile

設定したファイルを有効にするため、source を実行する。

$ source .zprofile

3.Flutter の診断ツールを実行

Flutter の診断ツールを実行して、開発環境で不足しているものを確認する。

$ flutter doctor

素の macOS Big Sur の場合、Android devices や Xcode のCocoaPods あたりが不足しているとのエラーメッセージが表示される。

1つ目のアラートは、ライセンスがアクセプトされていないためなので、次のコマンドを実行してください。各SDK Packageのアクセプトを聞かれますので、全て「y」を入力してください。(※Android SDK Command-line Toolsがインストールされていないとエラーになりますので、事前にAndroid Studioからインストールしておいて下さい)

flutter doctor --android-licenses

2つ目のエラーは、CocoaPodsのバージョンが古いためにエラーとなっていますので、下記のコマンドを実行してください。

brew install cocoapods

CocoaPodsのインストールが完了したら、linkを貼り直す。

brew link --overwrite cocoapods

※最後に「flutter doctor」を実行して、全てのアラートやエラーが解消されていることを確認する

4.Android Studio で SDK をインストールする

Android Studio の初期画面の右下にある「Configure」から「SDK Manager」を選択します。

リストの中から、「Android 8.1 (Oreo)」を選択し、「OK」をクリックしてSDKをインストールします。(あとは画面の指示に従ってインストールしてください)

5.Virtual Device(Android エミュレータ)を作成する

Android Studio の起動画面の右上にあるメニューから「Virtual Device Manager」を選択します。

image

画面に左上にある「+」をクリックします。

image

画面下部にある「New Hardware Profile」をクリックします。

image

次の画面「Configure Hardware Profile」にある入力項目を設定します。(※スクロールして下記の項目全てを設定して下さい)

Device Name : stera terminal (JT-C60)

Screen Size : 7

Resolution : 720 x 1280

Supported device states : Portrait にだけ、チェックを入れる

Cameras : Back-facing camera にだけ、チェックを入れる

Sensors : 全てチェックを外す

全て入力したら、画面右下にある「Finish」をクリックする。

image

次の画面「System Image」から、「Oreo (API Level 27、Android 8.1) 」をのダウンロードをクリックする。

image

ダウンロードが開始すると、下記の画面が表示されるので完了まで待って「Finish」をクリックする。

image

「System Image」画面が表示sれたら、先程の「Oreo (API Level 27、Android 8.1) 」を選択し、「Next」をクリックします。

image

次の画面「Android Virtual Device (AVD)」の左下にある「Finish」をクリックします。

image

6.アプリのテンプレートを作成する

下記のコマンドを入力して、アプリのテンプレートを作成します。

$ flutter create my_app

7.Android Studio にプライグインをインストールする

Android Studioの初期画面の右下にある「Configure」の「Plugin」を選択します。

image

次の画面「Plugin」から、「Flutter」を検索してインストール(Dartも一緒にインストールされます)し、Android Studioを再起動します。

image

Android Stuioが再起動したら、「Open an eisting Android Studio project」を選択して、先ほど作成した「my_app」を開きます。

image

画面上部の中央付近にあるドロップボックスから「Open stera terminal (JT-C60)」を選択して、エミュレータを実行します。

8.DNSの設定を変更する

エミュレータからインターネットへのアクセスができるように、macosのDNSサーバーに下記のアドレスを指定します。

8.8.8.8

以上で、基本的な開発環境のセットアップは終了です。