FlutterはGoogleが提供するアプリ作成の際に使うことができるUIツールキットです. 今回は,
MacでFlutterを用いたアプリ開発を行うための環境構築
の備忘録です.
MacでのFlutter環境構築には, さまざまなものをインストールしていきます. (Windowsでも同じですが笑)
整理すると,
- 開発する言語はDart2
- 統合環境開発はAndroid Studio
- Android Studioで使用するUIキットツールがFlutter
- iOSアプリ開発にはXcodeが必要
- Android端末での動作確認のためにAndroidのシュミレーターや実機が必要
- iOS端末での動作確認のためにiOSのシュミレーターや実機が必要
となります. これらの関係をある程度理解していないと, 自分が一体いま何をインストールしているのか, 混乱することになります.
MacでFlutterを用いたiOSアプリを開発する場合, 以下のような準備が必要になります.
- Flutter SDKをダウンロードする
- Android Studioをインストールする
- Android StudioでFlutterを使えるようにする
- Xcodeをインストールする
- 開発したアプリをAndroidのシュミレーターで試せるようにする
- 開発したアプリをiOSのシュミレーターで試せるようにする
Pierrot今回は実機で動かす設定はしません. 後日記事にしていきます.
Flutter SDKをダウンロードする
Flutter SDKをダウンロードする
これに関しては本家に詳細なやり方が載っています. ここではこれを基にして, インストールしていきます.
最初に, flutter_macos_*.**.*-stable.zipをダウンロードします. *部分はバージョンが入ります.
これを展開して, 適当なフォルダに入れます. 例えば,
/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
.zshrcファイルは隠しファイルのため, 通常は見ることができません. 不可視ファイルの表示・非表示は
command + shift + . (ピリオド)
で行うことができます. 今回の場合, /Users/user_nameで「command+shift+.」を押すと,
と見えるようになります. これをテキストエディタで開いて, 先ほどの一文を付け加えてもかまいません.
万が一これでも.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
普通のアプリのインストールと同じです.
Android Studio.appを起動し, Setup Wirdにしたがってsetupしていきます.
UIテーマを選んだり, 必要なファイルをダウンロードしたりします. 少し時間がかかります.
ここまでくればSetupは完了です.
Homebrewを用いて, Android Studioをインストールする
Homebrew Caskでもインストールが可能です. Homebrewの説明とインストールは以下を参照してください.
Homebrewをインストールしたら, ターミナルで
brew cask install android-studioとすれば簡単にインストールができます.
普通にインストールした場合と同様, 初回起動時は初期設定があります.
Android StudioでFlutterを使えるようにする
Flutterのpluginを追加する
Android Studioを起動させます.
トップ画面から,「Configure」→「Plugins」と進みます.
Flutterのpluginをインストールします.
Dart Pluginも一緒にインストールされます.
Android Studioの初期設定
デフォルトのままでも使えますが, 少しだけ設定を変えておきます. トップ画面から,「Configure」→「Preferences」と進みます.
「Editor」→「General」→「Appearance」の
- Show line numbers(行番号の表示)
- Show method separators(メソッドの区切りを表示)
- Show whitespaces(空白の表示)
はすべてチェックを入れておきます. コードの視認性があがります.
同じく, 「Editor」→「General」→「Appearance」の
- Show closing labels in Dart source code()
にもチェックを入れておきます.
これは,
のように最後にlabelを表示してくれます. これはあると便利ですので, ぜひチェックを入れておきましょう.
次に, 「Editor」→「Code Style」→「File Encodings」でEncodingがUTF-8になっているかを確認しておきます.
Macはデフォルトでなっているはずです.
開発したアプリをAndroidのシュミレーターで試せるようにする
Android Studioから行います. Android Studioを起動して,
「Configure」→「AVD Manager」
を選択します.
「+ Create Virtual Device…」からシュミレーターを作成します.
「Phone」から好きな機種を選択します. Pixelなど売れているデバイスがよいでしょう.
さまざまな種類がありますが, 「x86 Images」から,
API Level 28以上, Google Inc., x86_64
のものを選択します.
License AgreementをAcceptし, シュミレーターをダウンロードします.
インストールはそれなりに時間がかかります.
構成確認はそのままでかまいません.
これでシュミレーターの設定が完了しました. 実際に▶を押してシュミレーターを起動してみましょう.
シュミレーターが起動されれば, インストールは成功です. 使っているパソコンのスペックによっては時間がかかります.
Xcodeをインストールする
XcodeはAppleStoreからインストールできます. ダウンロード容量が大きいので, 時間に余裕があるときに行うとよいでしょう.
開発したアプリをiOSのシュミレーターで試せるようにする
iOSのシュミレーターはXcodeを入れた時点でインストールされています.
「Xcode」→「Open Developer Tool」→「Simulator」
から起動できます.
ターミナルであれば,
open -a Simulatorで起動させることができます.
おわりに
次回以降は, 自分の勉強の備忘録も兼ねてFlutterで簡単なアプリ(しばらくはアプリと呼べるものですらないでしょうが笑)を作成していきます.
コメント