Flutter for web 環境構築手順

概要

• 自己学習で､Flutter for webを動かす必要があった為､行う｡
• Flutter for webのサンプルアプリを動かすまでの環境構築手順｡
• サンプルアプリ(hello world)をビルドし､Webブラウザで動作が確認できれば完了｡

事前準備

• 事前準備は不要｡今回､OSはWindowsで進行(macOS､Linux向けも用意されている｡)｡
• 作業者の環境によって､必要なアプリケーションが異なるので注意｡
• 公式の手順に沿って､詰まった部分を明記｡

作業内容

公式スタートガイド

Flutter Get started	Flutterの公式スタートガイド
Flutter for web Getting started	Flutter for webの公式スタートガイド

• Flutter → Flutter for webの順で進行｡

Flutter Get startedに従って進行

• 基本は､Flutter Get startedに沿って進行｡
• [Set up your Android device]は､実機がなければエミュレータで代用可能なので､任意で進行｡
• [Set up an editor]は､任意のエディタで進行(VS Codeは導入がスムーズ｡Android Studio, IntelliJは試してないので分からない｡)｡

Flutter Get started完了後､Flutter for web Getting startedに従って進行

• 基本は､Flutter for web Getting startedに沿って進行｡
• [Run the hello_world example]まで行い､サンプルアプリ(hello world)をビルドし､Webブラウザで動作が確認できれば完了｡

環境構築でハマった点

Flutterのディレクトリ配置

• 結論､どこでも良さそう(結果的に問題は出なかった｡)｡
• ホームディレクトリ配下にdevelopフォルダを作成し､develop配下にflutterフォルダを配置(~/develop/flutter)
• 環境構築後に､フォルダを移動するとVS Codeのflutter doctorが実行出来ない｡その際､フォルダの場所を指定できるのでflutterフォルダを指定してあげると､動く｡

flutter console

• コマンドプロンプトではなく､flutterフォルダ内のflutter_console.batをダブルクリックでflutter consoleで立ち上げ､flutter consoleでflutter doctorしないといけない(公式スタートガイドにも書いてある)｡

Flutterのflutter doctorのエラー

まずはじめに､flutter doctorすると下記のエラーが出た｡

 Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.5.4-hotfix.2, on Microsoft Windows [Version
    6.1.7601], locale ja-JP)
[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)
[!] Connected device
    ! No devices available

! Doctor found issues in 3 categories.

最初のエラーは､「Android SDKが見つかりません。」と出ている｡
Android SDKはAndroid Studioをインストールすることで手に入るので､エラー内容に書いてあるとおり､https://developer.android.com/studio/index.html
からAndroid Studioをインストールする｡

[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インストール後､もう一度flutter doctorするとエラー内容が変化している｡

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.5.4-hotfix.2, on Microsoft Windows [Version
    6.1.7601], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)

    X Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit
      https://flutter.dev/setup/#android-setup for detailed instructions.
[!] Android Studio (version 3.4)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
    ! No devices available

! Doctor found issues in 3 categories.

先程と同じところを詳しく見ると､今度は､「Androidのライセンスステータスは不明です。」と出ている｡

[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)

    X Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit
      https://flutter.dev/setup/#android-setup for detailed instructions.

そのため､flutter doctor --android-licensesでライセンスを更新する｡

次は､「Android SDKの新しいバージョンが必要です。更新するには、次のコマンドを実行してください。」と言われるので､エラー内容のコマンドを実行する｡

A newer version of the Android SDK is required. To update, run:
C:\Users\admin\AppData\Local\Android\sdk\tools\bin\sdkmanager --update

C:\Users\admin\AppData\Local\Android\sdk\tools\bin\sdkmanager --updateを実行｡

今度は､「NoClassDefFoundError」というエラーが出た｡

Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
        at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
        at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
        at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(AndroidSdkHandler.java:81)
        at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:73)
        at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:48)
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
        at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:583)
        at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:178)
        at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:521)
        ... 5 more

実は､このエラーにかなり悩まされた｡

どのバージョンのJavaがインストールされているかを確認できますjava -versionか？Android SDKはJava 8を必要とし、Java 9ではまだ動作しないと思います
引用URL：meteor/meteor#9510

sdkmanager --``uddateコマンドの際にJavaのクラスを呼び出しているみたいだが､私が持っていたのはjava12の為､すでに該当のモジュールは削除されているようで動作しないようだった｡

--add-modulesを使い､一時的にモジュールを利用できるみたいだがjava9で非推奨となり､java11で削除されている？みたいで使えなかった｡

結果的には､Oracle jdk8をインストールし､システム環境変数のJAVA_HOME(jdkのフォルダパス)とPath(jdk/binのフォルダパス)を変更し､再度､flutter doctor --android-licensesを実行すると上手くいった｡ライセンスの確認を求められるので､終わるまで全てyes｡
(実は､ここでもOracleのjdkは有料化になったため､ダウンロードできないと勘違いしハマっていた…正しくは､商用利用の場合は有料になるようで個人開発では無料で使えるようだ｡詳細は､Oracleのライセンス規約を読むといい)

再度､flutter doctor
残るエラーは､Android Studioのプラグインとデバイス接続｡

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.5.4-hotfix.2, on Microsoft Windows [Version
6.1.7601], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[!] Android Studio (version 3.4)
X Flutter plugin not installed; this adds Flutter specific functionality.
X Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
! No devices available

! Doctor found issues in 2 categories.

Android Studioのプラグインは､Android Studio > File > Settings > PluginsでDartとflutterのプラグインをインストールすることで解消された｡

デバイス接続は､エミュレータでも代用可なのでそのまま進んで問題なかった｡

Flutter Get startedのSet up the Android emulator

Android Studio のVMアクセラレーションの有効の仕方がわからなかった｡

下記の手順で有効にできた(手順内のEmulated Performanceを設定すればできた｡)｡
Android Studio > Tool > AVD Manager > Create Virtual Device > デバイス選択(適当にNexus6) > Nougat x86をダウンロード > Finish
先程作ったエミュレータの鉛筆マーク(設定) > Emulated Performance > Graphicsを Hardwareを選択 > Finish

VScodeのflutter doctor

ハマったわけではないが､はじめいくつかエラーが出ていたがVScodeを再起動後､再度､flutter doctorするとエラーはなくなった｡

Connected device

これもハマったわけではないが､エミュレータを起動していないときは､接続されていないと出るが､問題ない(起動すれば､エラーは消える｡)｡

Flutter webのRun the hello_world exampleの3.Build and serve the example locally.でエラー

webdev serveコマンドを打つと､エラー｡
私の場合は､C:\Users\admin\develop\flutter\bin\cache\dart-sdk\binをPathに追加し､flutter consloleを再起動し解決(パスは､各自配置場所によって､微妙に変わります)｡

'dart' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
'pub' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

環境構築完了！

[Run the hello_world example]まで行い､サンプルアプリ(hello world)をビルドし､Webブラウザで動作が確認できれば完了です｡

ここまでだとFlutter webの凄さはまだ分かってませんが､一旦環境構築は完了しました！！！！