タイトル通り最近流行り？のFlutterの勉強をしたいなと思い、いろいろ触っていこうかと思います。
Flutterは1つのソースコードでiOS/Android/Webアプリが同時に開発できるみたいですね！
その辺もまだまだ知識不足ですが、いろいろと触りながら学んでいきたいと思います。
環境準備
取り合えず必要なものは以下です。
・Flutter SDK
・Android Studio
それぞれインストール、設定を行っていきます。
■Flutter SDK
①Flutter SDKをダウンロード
下記公式サイトから
https://flutter.dev/docs/get-started/install
自分はWindowsなのでWindows版をダウンロードしました。
↓
②Flutter SDK解凍
先ほど①でダウンロードしたファイルを任意のフォルダに解凍します。
③Flutter SDKのパスを通す
解凍したFlutterフォルダの直下にbinがあります。
④flutter doctorコマンドで必要な環境を確認
Windowsであればコマンドプロンプトなどを開いて、パスを通したFlutterのbinフォルダに移動(GitBushなどでも可)
そこでflutter doctorを実行すると環境構築で他に何が必要かが表示されます。
・cd ~~~\flutter_windows_2.2.3-stable\flutter\bin
※自身が解凍したFlutterのbinフォルダ
・flutter doctor
足りないツールや設定があれば赤文字でx、黄色文字で!などで表示してくれます。
■Android Studio
①Android Studioインストーラをダウンロード
https://developer.android.com/studio/?hl=ja#downloads
自分のOSやbitバージョンにあったものをダウンロードしてください。
今回はWindows(64-bit)をダウンロードしていきます。
②Android Studioインストールを実行
先ほどダウンロードしてきたインストーラを実行してインストールを開始します。
特に設定などは変える必要はないので、説明に従って完了まで進めます。
↓
インストールが完了したらStart Android Studioにチェックを入れてFinishボタンを押下
自動でAndroid Studioが立ち上がります。
③Android Studioのセットアップ
Android Studioが立ち上がったら、必要な設定などはないので説明通り進めていきます。
↓
セットアップを進めていくと Welcome to Android Studio の画面に遷移します。
④Flutterプラグインのインストール
Welcome to Android Studio画面左側のPluginsを選択
検索からFlutterを検索してインストールします。
インストールが完了したらAndroid Studioを再起動してください。
⑤Android SDK Command-line Toolのインストール
Welcome to Android Studio画面で、More ActionsからSDK Managerを押下します。
Android SDK のSDK Toolsタブを選択。
Android SDK Command-line Toolにチェックを入れてOKボタンを押下。
Android SDK Command-line Toolのインストールはこれで完了です。
⑥Androidライセンスを承認する
ここまでの設定を完了してから、もう一度コンソールでFlutter doctorコマンドを実行すると、
先ほどxがついていたAndoroid toolchainが!になっているはずです。
確認出来たら、flutter doctor --android-licensesコマンドを実行してライセンスの認証を実施します。
諸々同意など求められますがすべてy(yes)でOKです。
⑦Android Studioのパス設定
再度Flutter doctorを実行するとAndroid Studioの箇所に黄色い!がついてて、not installedと表示されることがあります。
あれ、、Android Studioさっきインストールしたのになぁ、、
Flutter側にAndroid Studioを認識させる必要があるみたいです。
Flutterのconfigコマンドでパスの設定をしましょう。
$ flutter config --android-studio-dir="C:\Program Files\Android\Android Studio"
※自身がAndroid Studioをインストールしたフォルダを指定して上記コマンドを実行
最後にFlutter doctorを実行。
すべて緑色の√になりNo issues found!と表示されれば環境設定は完了です！
まとめ
まっさらな状態からでも必要なものはだいたいFlutterが準備してくれているので、環境設定はそんなに複雑ではなかったです。
少し長くなってしまったのでいったんここまでにして、次回は動作確認をしてみます！
■次回