概要

Flutterアプリ開発するための自分用メモ。環境構築～Visual Studio Code上でサンプルアプリを作成して動かすまでを行った。

概要
背景と目的
詳細
まとめと今後の課題

背景と目的

最近、Flutterでアプリを作成しなければならなくなった。そのため、環境構築からサンプルアプリの動作確認までを行ってみる。

詳細

環境

Windows 11
PowerShell 7.4.2
- 古かったので最新にアップデート
git version 2.31.1.windows.1
Android Studio 2023.3.1.18(Jellyfish)
- 古かったので最新にアップデート
Visual Studio Code 1.89.4
Flutter extension for VS Code v3.90.0

winget install --id Microsoft.Powershell --source winget

Flutterのインストール

https://docs.flutter.dev/get-started/install

上記リンクに従い、VSCodeで、Flutterの新規プロジェクトを作成し、

が出たらDownload SDKを選択し、保存先を訊かれるので以下のディレクトリを指定。

C:\dev

実行結果は以下。

Checking Dart SDK version... 
Downloading Dart SDK from Flutter engine ... 
Expanding downloaded archive with PowerShell...
Building flutter tool... 
Running pub upgrade... 
Resolving dependencies...
Downloading packages...
Got dependencies.
Downloading Material fonts...                                      434ms
Downloading Gradle Wrapper...                                       15ms
Downloading package sky_engine...                                   92ms
Downloading flutter_patched_sdk tools...                           335ms
Downloading flutter_patched_sdk_product tools...                   260ms
Downloading windows-x64 tools...                                 2,538ms
Downloading windows-x64/font-subset tools...                       246ms
[!] Flutter (Channel stable, 3.22.2, on Microsoft Windows [Version 10.0.22631.3672], locale ja-JP)
    • Flutter version 3.22.2 on channel stable at C:\dev\flutter
    ! The flutter binary is not on your path. Consider adding C:\dev\flutter\bin to your path.
    ! The dart binary is not on your path. Consider adding C:\dev\flutter\bin to your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 761747bfc5 (5 days ago), 2024-06-05 22:15:13 +0200
    • Engine revision edd8546116
    • Dart version 3.4.3
    • DevTools version 2.34.3
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[√] Windows Version (Installed version of Windows is version 10 or higher)

[X] Android toolchain - develop for Android devices
    • Android SDK at C:\Users\conqu\AppData\Local\Android\sdk
    X cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Build Tools 2019 16.11.32)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools
    • Visual Studio Build Tools 2019 version 16.11.34301.259
    • Windows 10 SDK version 10.0.19041.0

[!] Android Studio (version 4.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    X Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[√] VS Code (version 1.89.1)
    • VS Code at C:\Users\conqu\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.90.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22631.3672]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 125.0.6422.142
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 125.0.2535.92

[√] Network resources
    • All expected network resources are available.

! Doctor found issues in 3 categories.
exit code 0

パスの設定

自分で、環境変数PATHに

C:\dev\flutter\bin

を追加した。これでflutterコマンドが使えるようになる。

Android Studioの設定

https://docs.flutter.dev/get-started/install/windows/mobile#configure-android-development

Android SDK Platform, API 34.0.5
Android SDK Command-line Tools
Android SDK Build-Tools
Android SDK Platform-Tools
Android Emulator

開発用Android Device

手持ちのSH-M24をPCに接続。開発者オプション > USBデバッグを有効化し、

flutter devices

を実行。ちゃんと認識された。

Found 4 connected devices:
  SH M24 (mobile)   • 354570320521424 • android-arm64  • Android 14 (API 34)
  Windows (desktop) • windows         • windows-x64    • Microsoft Windows [Version 10.0.22631.3672]
  Chrome (web)      • chrome          • web-javascript • Google Chrome 125.0.6422.142
  Edge (web)        • edge            • web-javascript • Microsoft Edge 125.0.2535.92

Flutter doctor

最後に、確認。

PS C:\Users\{USERNAME}> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.22.2, on Microsoft Windows [Version 10.0.22631.3672], locale ja-JP)
[✓] Windows Version (Installed version of Windows is version 10 or higher)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0-rc4)
[✓] Chrome - develop for the web
[✓] Visual Studio - develop Windows apps (Visual Studio Build Tools 2019 16.11.32)
[✓] Android Studio (version 2023.3)
[✓] VS Code (version 1.90.0)
[✓] Connected device (3 available)
[✓] Network resources

• No issues found!

Visual Studio Code上でサンプルアプリを作成

https://docs.flutter.dev/get-started/test-drive

上記リンクにしたがう。

コマンドパレットから、

Flutter: New Project

を選び、Applicationを選択。プロジェクト名は、Flutter_application_1。プロジェクトディレクトリを選択すると、プロジェクト名のフォルダができて、その中に必要ファイル一式が生成された。iosやlinuxやwindowsというフォルダがある。

lib/main.dartというファイルを開くと、コードが書かれている。参考リンクにコメントを読めと書いてあるので、一応目を通すが、とりあえず動かしたいので、コマンドパレットから、

Flutter: Select Device

を選び、先ほど接続確認できた実機を選択。メニューバーの

実行 > デバッグの開始

を選択。デバッグが実行し始めるが、初回はそれなりに時間がかかる。数分を要した。数分後、以下の画面が表示されて無事実行できたことが確認できた。

参考リンクには、ホットリロードの確認の手順があるのでやっておく。109行目のpushedをclickedに変更。

ファイルを保存すると自動でリビルドが走り、以下が表示された。これで、ひとまずサンプルアプリの動作確認はOK。

プロキシ

android/gradle.properties

systemProp.http.proxyHost=
systemProp.http.proxyPort=
systemProp.http.proxyUser=
systemProp.http.proxyPassword=
systemProp.https.proxyHost=
systemProp.https.proxyPort=
systemProp.https.proxyUser=
systemProp.https.proxyPassword=

gradle.bat

@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
set DEFAULT_JVM_OPTS="-Djdk.http.auth.tunneling.disabledSchemes=\"\""