【備忘録】Flutter入門-MacでFlutter環境を整える-

FlutterはGoogleが提供するアプリ作成の際に使うことができるUIツールキットです. 今回は,

MacでFlutterを用いたアプリ開発を行うための環境構築

の備忘録です.

MacでのFlutter環境構築には, さまざまなものをインストールしていきます. (Windowsでも同じですが笑)

整理すると,

  • 開発する言語はDart2
  • 統合環境開発はAndroid Studio
  • Android Studioで使用するUIキットツールがFlutter
  • iOSアプリ開発にはXcodeが必要
  • Android端末での動作確認のためにAndroidのシュミレーターや実機が必要
  • iOS端末での動作確認のためにiOSのシュミレーターや実機が必要

となります. これらの関係をある程度理解していないと, 自分が一体いま何をインストールしているのか, 混乱することになります.

MacでFlutterを用いたiOSアプリを開発する場合, 以下のような準備が必要になります.

  1. Flutter SDKをダウンロードする
  2. Android Studioをインストールする
  3. Android StudioでFlutterを使えるようにする
  4. Xcodeをインストールする
  5. 開発したアプリをAndroidのシュミレーターで試せるようにする
  6. 開発したアプリをiOSのシュミレーターで試せるようにする
Pierrotのアイコン画像Pierrot

今回は実機で動かす設定はしません. 後日記事にしていきます.

目次

Flutter SDKをダウンロードする

Flutter SDKをダウンロードする

これに関しては本家に詳細なやり方が載っています. ここではこれを基にして, インストールしていきます.

最初に, flutter_macos_*.**.*-stable.zipをダウンロードします. *部分はバージョンが入ります.

Flutter
2020/07/19時点でのバージョンは1.17.5

これを展開して, 適当なフォルダに入れます. 例えば,

/Users/user_name

あたりがよいでしょう. ここに展開したflutterフォルダを置きます.

user_nameは人によって違います. 多くの方は個人名が入っているはずです.

Pathを通す

次に, flutterがここにあることをMacに認識させます. そのためにPathを通しておきます.

Catalina以降のOSであれば, /Users/user_nameにある.zshrcファイルに次の一行を書き加えます. Catalina以前の場合は, ~/.bash_profileに付け加えます.

export PATH=”$PATH:/Users/user_name/flutter/bin”

これをターミナルで行っていきましょう. (ファイル操作で行うことも可能です.)

まずは, flutterを置いたディレクトリに移動します.

cd /Users/user_name

次に, /Users/user_nameにある.zshrcに書き込みを行います.

echo 'export PATH="$PATH:/Users/user_name/flutter/bin"' >> ~/.zshrc

万が一, .zshrcがなくても自動的に生成されます.

今入力した設定を反映させます.

source ~/.zshrc

設定が有効になったか確認してみましょう. Pathが帰ってくれば成功です.

which flutter
Flutter
おまけ

.zshrcファイルは隠しファイルのため, 通常は見ることができません. 不可視ファイルの表示・非表示は

command + shift + . (ピリオド)

で行うことができます. 今回の場合, /Users/user_nameで「command+shift+.」を押すと,

Flutter

と見えるようになります. これをテキストエディタで開いて, 先ほどの一文を付け加えてもかまいません.

万が一これでも.zshrcファイルが見つからない場合, それは元々ないということです.

その場合は新しく作ります. ターミナルを開き, ディレクトリを /Users/user_nameに移動します.

cd /Users/user_name

その後, .zshrcファイルを作成します.

touch .zshrc

これで/Users/user_nameに.zshrcファイルが作成されます.

Flutterの設定は終了です.

Android Studioをインストールする

Android Studioをインストールする

まずは, Android Studioのダウンロードページにいき, Mac用をダウンロードしましょう.

https://developer.android.com/studio?hl=ja

Flutter

普通のアプリのインストールと同じです.

Flutter

Android Studio.appを起動し, Setup Wirdにしたがってsetupしていきます.

Flutter

UIテーマを選んだり, 必要なファイルをダウンロードしたりします. 少し時間がかかります.

Flutter

ここまでくればSetupは完了です.

Flutter

Homebrewを用いて, Android Studioをインストールする

Homebrew Caskでもインストールが可能です. Homebrewの説明とインストールは以下を参照してください.

Homebrewをインストールしたら, ターミナルで

brew cask install android-studio

とすれば簡単にインストールができます.

普通にインストールした場合と同様, 初回起動時は初期設定があります.

Android StudioでFlutterを使えるようにする

Flutterのpluginを追加する

Android Studioを起動させます.

トップ画面から,「Configure」→「Plugins」と進みます.

Flutter
Flutter

Flutterのpluginをインストールします.

Flutter

Dart Pluginも一緒にインストールされます.

Android Studioの初期設定

デフォルトのままでも使えますが, 少しだけ設定を変えておきます. トップ画面から,「Configure」→「Preferences」と進みます.

Flutter

「Editor」→「General」→「Appearance」

  • Show line numbers(行番号の表示)
  • Show method separators(メソッドの区切りを表示)
  • Show whitespaces(空白の表示)

すべてチェックを入れておきます. コードの視認性があがります.

Flutter

同じく, 「Editor」→「General」→「Appearance」

  • Show closing labels in Dart source code()

にもチェックを入れておきます.

Flutter

これは,

Flutter

のように最後にlabelを表示してくれます. これはあると便利ですので, ぜひチェックを入れておきましょう.

次に, 「Editor」→「Code Style」→「File Encodings」EncodingがUTF-8になっているかを確認しておきます.

Flutter

Macはデフォルトでなっているはずです.

開発したアプリをAndroidのシュミレーターで試せるようにする

Android Studioから行います. Android Studioを起動して,

「Configure」→「AVD Manager」

を選択します.

Flutter

「+ Create Virtual Device…」からシュミレーターを作成します.

Flutter

「Phone」から好きな機種を選択します. Pixelなど売れているデバイスがよいでしょう.

Flutter

さまざまな種類がありますが, 「x86 Images」から,

API Level 28以上, Google Inc., x86_64

のものを選択します.

Flutter

License AgreementをAcceptし, シュミレーターをダウンロードします.

Flutter

インストールはそれなりに時間がかかります.

Flutter

構成確認はそのままでかまいません.

Flutter

これでシュミレーターの設定が完了しました. 実際に▶を押してシュミレーターを起動してみましょう.

Flutter

シュミレーターが起動されれば, インストールは成功です. 使っているパソコンのスペックによっては時間がかかります.

Flutter

Xcodeをインストールする

XcodeはAppleStoreからインストールできます. ダウンロード容量が大きいので, 時間に余裕があるときに行うとよいでしょう.

開発したアプリをiOSのシュミレーターで試せるようにする

iOSのシュミレーターはXcodeを入れた時点でインストールされています.

「Xcode」→「Open Developer Tool」→「Simulator」

から起動できます.

Xcode

ターミナルであれば,

open -a Simulator

で起動させることができます.

おわりに

次回以降は, 自分の勉強の備忘録も兼ねてFlutterで簡単なアプリ(しばらくはアプリと呼べるものですらないでしょうが笑)を作成していきます.

コメント

コメントする

目次
閉じる