本記事の対象の方
- WindowsでFlutterの開発環境構築がしたい方
※筆者の備忘録もかねて本記事を書いていますので、エラーで詰まったところも載せています。
Flutter SDKのダウンロード
下記リンクからzipをDLします。
zipをDLし終えたら任意の場所に展開してください。私の場合C:\直下にflutterディレクトリを作成してそこに展開しました。flutterディレクトリ余分に作ってしまった、、、と展開した後思いましたが面倒だったのでそのまま進めています（笑）。
次にpathを通す必要があるので環境変数の編集をします。タスクバーの検索で「環境変数」と入力すると選択肢が出てきます。
ユーザー環境変数のPathをクリックすると「編集」ボタンが活性化します。画像のようにflutterのpathを追加します。
コマンドプロンプトで「flutter doctor」を実行して下記のように表示されればとりあえずpathが通っていることが確認できます。
C:\flutter\flutter>flutter doctor Running "flutter pub get" in flutter_tools... 12.1s Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.2.3, on Microsoft Windows [Version 10.0.19042.1110], locale ja-JP) [✗] Android toolchain - develop for Android devices ✗ 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/docs/get-started/install/windows#android-setup for detailed instructions). If the Android SDK has been installed to a custom location, please use `flutter config --android-sdk` to update to that location. [✓] Chrome - develop for the web [!] Android Studio (not installed) [✓] VS Code (version 1.58.2) [✓] Connected device (2 available) ! Doctor found issues in 2 categories.
Android Studioのインストール
下記リンクからインストーラーをDLします。
exeファイルをダウンロードした後に実行します。とりあえずNextを押して足りないものは後からインストールする方針でやったところ、下記エラーがcomponentダウンロード時にでました。
私のPCはCPUがRyzenなので「ハイパーバイザープラットホームの有効化」が必要なようでした。
私のようにエラーが出なければデフォルトでデバイスが登録されているようなので再生ボタンみたいなやつを起動すれば仮想のスマホ画面が立ち上がるはずです。
Flutterの設定
もう一度コマンドプロンプトで flutter doctor を実行します。
C:\flutter\flutter>flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.2.3, on Microsoft Windows [Version 10.0.19042.1110], locale ja-JP) [!] Android toolchain - develop for Android devices (Android SDK version 31.0.0) ✗ No Java Development Kit (JDK) found; You must have the environment variable JAVA_HOME set and the java binary in your PATH. You can download the JDK from https://www.oracle.com/technetwork/java/javase/downloads/. [✓] Chrome - develop for the web [!] Android Studio (not installed) [✓] VS Code (version 1.58.2) [✓] Connected device (2 available) ! Doctor found issues in 2 categories.
Android Studioをインストールしたのに「not installed」と出ているのでまずはこれを解消します。コマンドプロンプトで下記コマンドを実行します。
> flutter config --android-studio-dir="C:\Program Files\Android\Android Studio"
もう一度コマンドプロンプトで flutter doctor を実行します。
C:\flutter\flutter>flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.2.3, on Microsoft Windows [Version 10.0.19042.1110], locale ja-JP) [!] Android toolchain - develop for Android devices (Android SDK version 31.0.0) ✗ Android license status unknown. Run `flutter doctor --android-licenses` to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/windows#android-setup for more details. [✓] Chrome - develop for the web [✓] Android Studio [✓] VS Code (version 1.58.2) [✓] Connected device (2 available) ! Doctor found issues in 1 category.
Android Studioの部分が解消されて良い感じになりました。あとはライセンスがないといわれてるのでそれを解消します。Android StudioのConfigureをクリックして、Android SDK → SDK Tools → Android SDK Command-line Toolsにチェックしてください。またHide Obsolete Packagesのチェックを外して、Android SDK Toolsにもチェックしてください。
その後下記コマンドを実行します。
> flutter doctor --android-licenses
コマンドプロンプトで flutter doctor を実行します。
C:\flutter\flutter>flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.2.3, on Microsoft Windows [Version 10.0.19042.1110], locale ja-JP) [✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) [✓] Chrome - develop for the web [✓] Android Studio [✓] VS Code (version 1.58.2) [✓] Connected device (2 available) • No issues found!
これですべてチェックが付きました！
Vscodeの設定
Flutterのプラグインをインストールします。
Flutter Widget Snippetsをインストールします。正直これはなくても大丈夫ですが、開発に便利との情報があったので一緒に入れてます。
プロジェクトの作成
VScodeで「Ctrl + Shift + P」のショートカットキーを実行後、「flutter」と入力します。「Flutter: New Application Project」を選択します。
今回は「flutter-sample」ディレクトリを作成して選択しました。その後プロジェクト名を入力するとプロジェクトが作成されます。
エミュレーターの起動
VScodeのフッターからエミュレータを起動できます。先ほどAndroid Studioで作成したデバイスを選択します。その後コンソールで 「> flutter run」を実行するとサンプルアプリが表示されます。
これで環境構築完了です。
おまけ：Androidアプリのバックエンドについて
簡単なAndroidアプリ作成の記事でも近々上げようと思いますがバックエンドをどうするかまだ決めてないので少し先になりそうです。あんまり考えてもなので使いなれてるDjangoかFirebaseあたりにしようと思います。
コメント