（メモ）WindowsでFlutter Webを動かす

Flutterすら入れてなかったので、そこから始める。

# 参考

* [Install - Flutter](https://flutter.dev/docs/get-started/install)
* [Flutter Webを動かしたときにつまづいたこと - Qiita](https://qiita.com/Nkzn/items/402a29fe9bb517ce78aa)
* [Flutter for Webが発表されたので、早速動かしてみた!! - Qiita](https://qiita.com/Kata_Oka/items/944a6f00ec49eeec450b)

# 環境

* Windows 10 Pro 64bit 1809
* Android Studio 3.4
* VS Code 1.31.1

# Flutter環境の導入

手順は[公式](https://flutter.dev/docs/get-started/install)に則る。

## SDKの入手とインストール

このドキュメント執筆時点ではWindows版 v1.5.4 hotfix2。

SDKの展開先に関して、**do not install Flutter in a directory like C:\Program Files\ that requires elevated privileges**という注意書きに従うこと。無難に例示通りの"C:\src\flutter"に導入した。

なおzipの解凍にはかなり時間がかかる。

導入後、直下にある"flutter_console.bat"を実行する。

```

         ######## ##       ##     ## ######## ######## ######## ########
         ##       ##       ##     ##    ##       ##    ##       ##     ##
         ##       ##       ##     ##    ##       ##    ##       ##     ##
         ######   ##       ##     ##    ##       ##    ######   ########
         ##       ##       ##     ##    ##       ##    ##       ##   ##
         ##       ##       ##     ##    ##       ##    ##       ##    ##
         ##       ########  #######     ##       ##    ######## ##     ##


 WELCOME to the Flutter Console.
 ================================================================================

 Use the console below this message to interact with the "flutter" command.
 Run "flutter doctor" to check if your system is ready to run Flutter apps.
 Run "flutter create <app_name>" to create a new Flutter project.

 Run "flutter help" to see all available commands.

 Want to use an IDE to interact with Flutter? https://flutter.dev/ide-setup/

 Want to run the "flutter" command from any Command Prompt or PowerShell window?
 Add Flutter to your PATH: https://flutter.dev/setup-windows/#update-your-path

 ================================================================================
 ```

## 環境変数の編集

既存のユーザー環境変数のPATHに"path-to-flutter\flutter\bin"を追加する。

## flutter doctor実行

環境変数編集後、コンソールを開きなおして"flutter doctor"と打つ。

以下は私の環境での状況の例。

```
>flutter doctor


  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool anonymously reports feature usage statistics and crash    ║
  ║ reports to Google in order to help Google contribute improvements to       ║
  ║ Flutter over time.                                                         ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://github.com/flutter/flutter/wiki/Flutter-CLI-crash-reporting        ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://www.google.com/intl/en/policies/privacy/                           ║
  ║                                                                            ║
  ║ Use "flutter config --no-analytics" to disable analytics and crash         ║
  ║ reporting.                                                                 ║
  ╚════════════════════════════════════════════════════════════════════════════╝


Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.5.4-hotfix.2, on Microsoft Windows [Version 10.0.17763.437], locale ja-JP)

[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] Android Studio (version 2.2)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[!] 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.
[!] Android Studio (version 3.2)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Community Edition (version 2018.2)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code
    X Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] VS Code, 64-bit edition (version 1.31.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 8 categories.
```

Android Studio（上記の例だと複数指摘されているが、使うのは3.4）とVS Codeを利用するつもりなので、それぞれにプラグインを導入する。    

また上記ではAndroid toolchainのライセンス条項を承認してくれとあるので従った。

## Android Studioにプラグインを導入

[公式](https://flutter.dev/docs/get-started/editor?tab=androidstudio)の手順に則る。Android Stuido3.0以降、あるいはIntelliJの2017.1以降に対応。

File > Setting > Pluginsでプラグイン設定を開き、"flutter"で検索する。インストールしたらAndroid Studioを再起動する。

Flutterおよび依存するDartのプラグインが導入されているはず。

## VS Codeにプラグインを導入

こちらも[公式](https://flutter.dev/docs/get-started/editor?tab=vscode)の手順に則る。

環境変数の編集前から開いているのであれば、一度VS Codeを再起動する。

Ctrl + Shift + Xで拡張機能管理を呼び出し、"flutter"で検索する。

インストールしたらCtrl + Shift + Pでコマンドパレットを呼び出し、"doctor"で検索する。"Flutter: Run Flutter Doctor."という選択肢が出るはずなのでそれを選択する。

先述のコンソールの場合同様に、VS Codeの"出力"にflutter doctorの結果が出力される。

```
[flutter] flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.5.4-hotfix.2, on Microsoft Windows [Version 10.0.17763.437], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] Android Studio (version 2.2)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[√] Android Studio (version 3.4)
[!] Android Studio (version 3.2)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Community Edition (version 2018.2)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[√] VS Code
[√] VS Code, 64-bit edition (version 1.31.1)
[!] Connected device
    ! No devices available

! Doctor found issues in 5 categories.
exit code 0
```

# Flutter Webサンプルを動かす

[公式のGetting started](https://github.com/flutter/flutter_web#getting-started)及び[Flutter Webを動かしたときにつまづいたこと - Qiita](https://qiita.com/Nkzn/items/402a29fe9bb517ce78aa)を参照した。

## Flutter Webのクローン

[GitHub](https://github.com/flutter/flutter_web)よりソースコード一式をクローンする。

※執筆時点ではzipの中身が古かったので、プロジェクトをクローンする

## hello_worldサンプルの実行

### webdevのインストール

クローンしたflutter_webのサンプルアプリのディレクトリでコマンドを実行する。

```
> cd path-to-fullter_web/fullter_web/examples/hello_world
> flutter packages pub global activate webdev

...

Installed executable webdev.
Warning: Pub installs executables into C:\src\flutter\.pub-cache\bin, which is not on your path.
You can fix that by adding that directory to your system's "Path" environment variable.
A web search for "configure windows path" will show you how.
Activated webdev 2.0.5.
```

### 環境変数の編集

インストール時のwarningに従って、システム環境変数PATHにディレクトリを追加する。

更に、dartのディレクトリも同様にシステム環境変数PATHに追加する。（通常であればpath-to-flutter\flutter\bin\cache\dart-sdk\bin）

----

余談：環境変数PATHについては下記に従った

* Flutter:[Get started](https://flutter.dev/docs/get-started/install/windows)でユーザ環境変数（"Under User variables"）を指定
* Flutter Web:上記メッセージの通りシステム環境変数（"your system's "Path" environment variable"）を指定
* Dart:[Configuring PATH and Environment Variables](https://dartcode.org/docs/configuring-path-and-environment-variables/)でシステム環境変数（"the system environment variables"）を指定

----

追加後、コンソールを開きなおす。

### パッケージのアップデート

```
> cd /path/to/fullter_web/examples/hello_world
> flutter packages upgrade
! flutter_web 0.0.0 from path ..\..\packages\flutter_web
! flutter_web_ui 0.0.0 from path ..\..\packages\flutter_web_ui
Running "flutter packages upgrade" in hello_world...               25.0s
```

### サンプルの実行

webdeb serveを実行する。

```
> webdev serve
webdev could not run for this project.
The pubspec.yaml file has changed since the pubspec.lock file was generated, please run "pub get" again.
```

"pub get"をもう一度行えとのことなので、従う。

```
> pub get

...

Got dependencies!
Precompiling executables...
Precompiled build_runner:graph_inspector.
Precompiled build_runner:build_runner.
```

再度webdeb serveを実行する。

```
> webdev serve
[INFO] Serving `web` on http://localhost:8080
[INFO] Running build completed, took 16.0s
[INFO] Caching finalized dependency graph completed, took 132ms
[INFO] Succeeded after 16.1s with 548 outputs (3169 actions)
```

Chromeで[http://localhost:8080](http://localhost:8080)を開くと"Hello World"と表示されるはず。

![flutter_web_hello_world.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21354/582da76f-48e6-99f5-dbc8-c8573e433a93.png)