Flutterすら入れてなかったので、そこから始める。
参考
環境
- Windows 10 Pro 64bit 1809
- Android Studio 3.4
- VS Code 1.31.1
Flutter環境の導入
手順は公式に則る。
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にプラグインを導入
公式の手順に則る。Android Stuido3.0以降、あるいはIntelliJの2017.1以降に対応。
File > Setting > Pluginsでプラグイン設定を開き、"flutter"で検索する。インストールしたらAndroid Studioを再起動する。
Flutterおよび依存するDartのプラグインが導入されているはず。
VS Codeにプラグインを導入
こちらも公式の手順に則る。
環境変数の編集前から開いているのであれば、一度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及びFlutter Webを動かしたときにつまづいたこと - Qiitaを参照した。
Flutter Webのクローン
GitHubよりソースコード一式をクローンする。
※執筆時点では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でユーザ環境変数（"Under User variables"）を指定
- Flutter Web:上記メッセージの通りシステム環境変数（"your system's "Path" environment variable"）を指定
- Dart: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を開くと"Hello World"と表示されるはず。
