Flutter開発環境を作る
Flutter開発環境の構築からハローワールドまでです.
環境
- Windows 10
- Pixel 3a
環境構築
Flutter SDKをダウンロード
zipファイル.
Flutter SDKをインストール
解凍して配置する.
例えばC:\src\flutterなど.C:\Program Filesなどには置かないこと.特権が必要になるので.
環境変数にパスを通す
C:\src\flutter\binを環境変数Pathに追加する.
flutter doctorを実行する
以下のように環境構築に必要な項目をチェックしてくれる.
>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.12.13+hotfix.5, on Microsoft Windows [Version 10.0.18363.476], locale en-US)
[X] Android toolchain - develop for Android devices
X Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/setup/#android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
You may also want to add it to your PATH environment variable.
[!] Android Studio (not installed)
[!] VS Code, 64-bit edition (version 1.40.1)
X Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
! No devices available
! Doctor found issues in 4 categories.
的な内容.不足しているものをインストール,用意する.
Android SDKをインストール
全部次へ次へ.
flutter doctorで確認すると.
>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.12.13+hotfix.5, on Microsoft Windows [Version 10.0.18363.476], locale en-US)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
X Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[!] Android Studio (version 3.5)
X Flutter plugin not installed; this adds Flutter specific functionality.
X Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code, 64-bit edition (version 1.40.1)
X Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
! No devices available
! Doctor found issues in 4 categories.
ライセンスに同意する
flutter doctor --android-licensesを実行してy(yes)を連打.
Android StudioにFlutterプラグインとDartプラグインをインストールする
Android Studioを起動して,左下のConfigureからPluginを選択する.
flutterを検索してインストール.
依存しているプラグインも一緒にインストールしてくれるようで,Dartもインストールしてくれる.OK.
Android Studioを再起動.
VS CodeにFlutter拡張機能をインストールする
実機をUSBで接続する
ただつなぐだけ.
flutter doctorで確認すると,すべての項目に｢✓｣がついていることがわかる.
>flutter doctor Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, v1.12.13+hotfix.5, on Microsoft Windows [Version 10.0.18363.476], locale en-US) [√] Android toolchain - develop for Android devices (Android SDK version 29.0.2) [√] Android Studio (version 3.5) [√] VS Code, 64-bit edition (version 1.41.0) [√] Connected device (1 available) • No issues found!
このように指示に従っていけば環境構築が完了するので,精神衛生上とてもよろしいと思いました. 私にとって環境構築は開発の鬼門なところがあるので,これはわかりやすくてとても良かった.
はろーFlutter的なdemoアプリを実行する
プロジェクトの作成
Android Studioを起動する.
File > New > New Flutter Projectを選択する.
プロジェクト作成ダイアログが開くのでFlutter Applicationを選択し,Nextをクリックする.
プロジェクト名やプロジェクトの保存先などを入力し,次へ. プロジェクト名には大文字を使えない.
最後にとりあえずドメインを入力してFinish.
これでプロジェクトが作成されます.
実機で動かす
実機をUSBでつなぎます.私はAndroidしか持っていないのでAndroidの場合しか知らないので申し訳ありません.
実機をつなぐとAndroid Studioの上部のデプロイ先を選択するドロップダウンに接続した機種が表示されるので,それを選択します.
最後は実行ボタンを押すだけです.
ビルドが始まり,実機に配置されるまでいささか時間がかかりますが,筋トレでもしながら待ちます.
配置が完了すると,以下のように+ボタンをタップするとカウントアップしていくアプリケーションが実行されます.
おわりに
Flutter自体の良さうんぬんについては置いておいて,とても良かったのは環境構築が非常に楽で,何が必要でどこまで準備できているのかがflutter doctorコマンドによって明確に示されることです.
これによって,環境構築における｢何がたりないんだ｣｢なんでできないんだ｣｢これで大丈夫なのか?｣といった不安がなく,自信を持って環境構築を終えられますし,そしてそれで動きます.
この環境構築の容易さはとても大きなメリットだと思いました.
メモ
Android StudioはCtrl+Alt+Lで自動整形.Ctrl+K,Dではない.
