Windows10にFlutter_webを導入してAVD上で動かしてみる

はじめに

Windows10 で Flutter の導入から Flutter_web サンプルの起動まで書いていこうかとおもいます。
Flutter_webを触ってみようかと思っている方の助けになればなと。

参考
Flutter Webを動かしたときにつまづいたこと(こちらのほうが分かりやすい説)
Flutter
Flutter_web

Flutter導入

1. 公式(Flutter_download)からダウンロードし、圧縮ファイルを C:\src 配下に解凍
   C:\src\flutter となっていれば大丈夫です。
   なっていない場合はflutterディレクトリ移動。
2. C:\src\flutter\binにパスを通す
3. Android Studioをインストールして、起動画面からconfigure>Pluginsと進んでFlutterと検索
   Flutter(language)を追加。(同時にDartも入ります)
4. Configure>AVD ManagerからVirtualDeviceを追加
5. VSCodeをインストールし、Flutter(DartCode)のextensionを追加
6. powershellでC:\src\flutterに移動して
   flutter doctor --android-licences
   を叩き、ライセンス内容に同意していく
7. flutter doctorを叩きすべての項目にチェックが付いたか確認する
8. C:\Users\user\AndroidStudioProject\flutter_app(project_name)\gradlew.batを実行するとビルドが通るようになります
9. SDKツールをリンクを参考にAndroid StudioにSDKを追加

公式のTest driveの通りに操作し、AVD上にカウントアップアプリが立ち上がったら導入完了です。

Flutter_webの使用

1. C:\src\flutter\.pub-cache\binとC:\src\flutter\bin\cache\dart-sdk\bin
   にパスを通しておく
2. Flutterの公式のとおりflutter pub global activate webdevを叩く
3. C:\src\flutter\examples\hello_worldに移動して、flutter pub upgradeを叩き、パッケージを更新する
4. Android StudioでAVDを立ち上げ、hello_worldディレクトリをAndroid Studioで表示

lib/main.dartをRunすると、ADVにhello_worldと表示されれば導入完了です。

最後に

どうしても

C:\src\flutter\examples\hello_world> webdev serve
webdev could not run for this project.
Could not find a file named "pubspec.yaml" in "C:\Users\user\AppData\Roaming\Pub\Cache\hosted\pub.dartlang.org\quiver-2.0.2"

となり、localhost:8080で表示するのを一旦省きました...
出来次第、更新したいとおもいます。