Flutter web开发（二）使用AndroidStudio跑第一个demo开发Flutter app时使用的是And

开发工具主要有两种：

AndroidStudio
vscode 开发Flutter app时使用的是AndroidStudio，因此开发flutter web还是倾向于使用AndroidStudio，虽然大部分web开发者使用的是vscode。

配置过程（网上各种找资料，结果是一次错误的经历，下面展示）

打开命令行窗口
flutter upgrade 升级到最新版本,出现如下：

Upgrading Flutter from /Library/flutter...
From https://github.com/flutter/flutter
   58cad787d8..be3a4b37b3  dev        -> origin/dev
   be3a4b37b3..6442611130  master     -> origin/master
 * [new tag]               v1.16.3    -> v1.16.3
Updating cf37c2cd07..0b8abb4724
 46 files changed, 940 insertions(+), 434 deletions(-)
Flutter is already up to date on channel stable
Flutter 1.12.13+hotfix.8 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 0b8abb4724 (6 weeks ago) • 2020-02-11 11:44:36 -0800
Engine • revision e1e6ced81d
Tools • Dart 2.7.0

flutter config --enable-web 配置启用web，出现如下：

Setting "enable-web" value to "true".
You may need to restart any open editors for them to read new settings.

提示重启编辑器，以读取新的配置如果出现找不到命令的情况，首先flutter upgrade

创建web项目，命令行：flutter create web_demo，出现如下，表示成功

Creating project web_demo... androidx: true
  web_demo/ios/Runner.xcworkspace/contents.xcworkspacedata (created)
  web_demo/ios/Runner/Info.plist (created)
  web_demo/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png
  (created)
  web_demo/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png
  (created)
  web_demo/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md (created)
  web_demo/ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json
  (created)
  web_demo/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png
  (created)
  web_demo/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png
  (created)
  web_demo/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png
  (created)
  web_demo/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png
  (created)
  web_demo/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png
  (created)
  web_demo/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.p
  ng (created)
  web_demo/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.p
  ng (created)
  web_demo/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png
  (created)
  web_demo/ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json (created)
  web_demo/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png
  (created)
  web_demo/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png
  (created)
  web_demo/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png
  (created)
  web_demo/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png
  (created)
  web_demo/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png
  (created)
  web_demo/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png
  (created)
  web_demo/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png
  (created)
  web_demo/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png
  (created)
  web_demo/ios/Runner/Base.lproj/LaunchScreen.storyboard (created)
  web_demo/ios/Runner/Base.lproj/Main.storyboard (created)
  web_demo/ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata
  (created)
  web_demo/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme (created)
  web_demo/ios/Flutter/Debug.xcconfig (created)
  web_demo/ios/Flutter/Release.xcconfig (created)
  web_demo/ios/Flutter/AppFrameworkInfo.plist (created)
  web_demo/ios/.gitignore (created)
  web_demo/test/widget_test.dart (created)
  web_demo/web_demo.iml (created)
  web_demo/.gitignore (created)
  web_demo/.metadata (created)
  web_demo/android/app/src/profile/AndroidManifest.xml (created)
  web_demo/android/app/src/main/res/mipmap-mdpi/ic_launcher.png (created)
  web_demo/android/app/src/main/res/mipmap-hdpi/ic_launcher.png (created)
  web_demo/android/app/src/main/res/drawable/launch_background.xml (created)
  web_demo/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png (created)
  web_demo/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png (created)
  web_demo/android/app/src/main/res/values/styles.xml (created)
  web_demo/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png (created)
  web_demo/android/app/src/main/AndroidManifest.xml (created)
  web_demo/android/app/src/debug/AndroidManifest.xml (created)
  web_demo/android/gradle/wrapper/gradle-wrapper.properties (created)
  web_demo/android/gradle.properties (created)
  web_demo/android/.gitignore (created)
  web_demo/android/settings.gradle (created)
  web_demo/android/app/build.gradle (created)
  web_demo/android/app/src/main/kotlin/com/example/web_demo/MainActivity.kt
  (created)
  web_demo/android/build.gradle (created)
  web_demo/android/web_demo_android.iml (created)
  web_demo/pubspec.yaml (created)
  web_demo/README.md (created)
  web_demo/ios/Runner/Runner-Bridging-Header.h (created)
  web_demo/ios/Runner/AppDelegate.swift (created)
  web_demo/ios/Runner.xcodeproj/project.pbxproj (created)
  web_demo/lib/main.dart (created)
  web_demo/.idea/runConfigurations/main_dart.xml (created)
  web_demo/.idea/libraries/Flutter_for_Android.xml (created)
  web_demo/.idea/libraries/Dart_SDK.xml (created)
  web_demo/.idea/libraries/KotlinJavaRuntime.xml (created)
  web_demo/.idea/modules.xml (created)
  web_demo/.idea/workspace.xml (created)
Running "flutter pub get" in web_demo...                            8.3s
Wrote 68 files.

cd web_demo
命令行窗口：flutter run，提示：

No supported devices connected.

命令行窗口：flutter run -d chrome，提示：

No devices found with name or id matching 'chrome'

至此发现，创建的好像不是web 的demo，还是app的demo 于是回过头来去找文档。

正确方式：官方提供了文档，只是当时未留意

官方文档地址：flutter.dev/docs/get-st… 里面提供了详细的创建web app的过程，大家可以看文档，但我还是要记录一遍：

启动命令行工具：
flutter channel，列出所有：

  beta
  dev
  master
* stable

我当前是在stable上，需要切换到beta上，于是

flutter channel beta

Switching to flutter channel 'beta'...
git: Switched to branch 'beta'
git: Your branch and 'origin/beta' have diverged,
git: and have 3 and 3210 different commits each, respectively.
git:   (use "git pull" to merge the remote branch into yours)

flutter upgrade，进行了一系列下载操作，等候中。。。。提示：

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v1.15.17, on Mac OS X 10.14.6 18G3020, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.6)
[✓] Connected device (2 available)

注意到：[✓]Chrome - develop for the web

flutter config --enable-web

Setting "enable-web" value to "true".

You may need to restart any open editors for them to read new settings.

flutter devices

2 connected devices:

Chrome     • chrome     • web-javascript • Google Chrome 80.0.3987.149
Web Server • web-server • web-javascript • Flutter Tools

已经看到曙光了

此时文档中提示，重启ide，然后打开一个Flutter app项目，发现

在devices那里，下来发现的确有Chrome(web),右边的运行按钮竟然是可运行，于是尝试运行：

Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
Downloading Web SDK...                                              2.3s
Running "flutter pub get" in web_demo...                            1.0s
This application is not configured to build on the web.
To add web support to a project, run `flutter create .`.

说这不是一个web 项目

还是回到文档中去，回到命令行窗口，创建项目，flutter create webdemo，提示成功：

All done!
[✓] Flutter: is fully installed. (Channel beta, v1.15.17, on Mac OS X 10.14.6
    18G3020, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices: is fully installed.
    (Android SDK version 29.0.1)
[✓] Xcode - develop for iOS and macOS: is fully installed. (Xcode 11.3.1)
[✓] Chrome - develop for the web: is fully installed.
[✓] Android Studio: is fully installed. (version 3.6)
[✓] Connected device: is fully installed. (2 available)

In order to run your application, type:

  $ cd webdemo
  $ flutter run

Your application code is in webdemo/lib/main.dart.

又运行了一遍 flutter devices

2 connected devices:

Chrome     • chrome     • web-javascript • Google Chrome 80.0.3987.149
Web Server • web-server • web-javascript • Flutter Tools

两个可用设备，浏览器的名为chrome，另一个Web Server 的目前还不知道怎么用

于是：flutter run，发现：

Error: No pubspec.yaml file found.
This command should be run from the root of your Flutter project.
Do not run this command from the root of your git clone of Flutter.

于是 flutter run -d chrome，依然是：

Error: No pubspec.yaml file found.
This command should be run from the root of your Flutter project.
Do not run this command from the root of your git clone of Flutter.

说是没有pubspec.yaml文件

犯了一个错误，create 了 webdemo 但是没有cd 进去
于是 cd webdemo
ls 了下，的确进去了
直接 flutter run，报出信息：

More than one device connected; please specify a device with the '-d <deviceId>'
flag, or use '-d all' to act on all devices.

Chrome     • chrome     • web-javascript • Google Chrome 80.0.3987.149
Web Server • web-server • web-javascript • Flutter Tools

就是说有两个设备可用，但是你没指定，所以不知道该运行在哪个上了，那就指定下

flutter run -d chrome 怀着忐忑的心情等待着，终于弹出一个窗口：多么熟悉的界面，只是换到了浏览器上显示。看了下命令行窗口：

Launching lib/main.dart on Chrome in debug mode...
Syncing files to device Chrome...                                       
11,263ms (!)                                       
Debug service listening on ws://127.0.0.1:57137/YxhO8PhZlPY=

Warning: Flutter's support for web development is not stable yet and hasn't
been thoroughly tested in production environments.
For more information see https://flutter.dev/web

🔥  To hot restart changes while running, press "r". To hot restart (and refresh
the browser), press "R".
For a more detailed help message, press "h". To quit, press "q".

注意这个Warning，flutter对于web开发的支持还不稳定，所以尝鲜可以，就别用于生产开发了。这里有一个关键性的网址：flutter.dev/web

起身，伸个懒腰！！！！

两个关键性网址：

flutter.dev/docs/get-st… 这是介绍一步步配置web开发环境，并建立一个web demo的过程。
flutter.dev/web 这里就是开发文档了

到目前其实还有两个疑惑：

上面创建的工程是在命令行窗口中创建的，但我们更倾向于在ide中，也就是AndroidStudio中去创建。
web demo 和 app demo之间是什么关系。

于是重新启动AndroidStudio：新建了一个webdemo2的项目：有chrome设备，于是选中 Chrome(web），直接运行，弹出了：在设备那里启动了一个Android 模拟器，直接运行：等了8分钟才出来，差点让我怀疑人生。。。。

此时最好奇的是什么？目录结构是啥样的？

God！！！！！！！！！！！！！！！！！！！！！！！！！！