Flutter - flutter项目添加 Web 支持

demo 地址: https://github.com/iotjin/jh_flutter_demo
代码不定时更新，请前往github查看最新代码

参考：
官方：构建 Flutter Web 应用
Flutter Desktop Support

flutter项目添加 Web 支持

在项目的根目录下运行：flutter create .命令

flutter create .// 指定平台
flutter create --platforms=windows,macos,linux .
flutter create --platforms=web .

报错：
Ambiguous organization in existing files: {com.jh, com.example}. The --org command line argument must be specified to recreate project.

[解决方案]
安卓、iOS包名不一致，换成相同的

让Flutter 支持 Web和运行命令

flutter config --enable-web
flutter run -d chrome

web端打包注意事项：

• 1、先清空历史数据：

flutter clean
flutter pub get

• 2、查看是否支持web端：

flutter config -h

不支持运行

flutter config --enable-web

• 3、为现有项目添加 Web 支持

// 只添加web端
flutter create --platforms=web .
// 其他平台
flutter create --platforms=windows,macos,linux .
// 默认
flutter create .

• 4、编译

// 打开速度一般,兼容性好
flutter build web
flutter build web --release// 打开速度快，兼容性好
flutter build web --web-renderer html// 打开速度慢，对于复杂的页面兼容性好
flutter build web --web-renderer canvaskit

注：

找到了index.html,用浏览器打开一片空白
这个属于正常现象，不像正常的前端web，点击index.html就能访问。
在flutter里面是不能直接访问的，要放到容器里面去才能访问，如：GitHub pages、tomcat等

web打包报错

【Flutter】移动开发者的Flutter Web实践（利用GitHub Pages进行部署）

index.html:46 Uncaught ReferenceError: _flutter is not definedat index.html:46

修改构建结果中的index.html文件中的base标签，修改成你github仓库的名字，不然关联不到相对路径资源文件.

手动修改：

由原来的<base href="$FLUTTER_BASE_HREF">改成<base href="/jh_flutter_demo/">

打包命令自动修改，加上--base-href=/jh_flutter_demo/

flutter build web --web-renderer html --base-href=/jh_flutter_demo/

一些问题

1、web端不支持 Platform

Error: Unsupported operation: Platform._operatingSystem

使用了Platform.isAndroid 或者Platform.isIOS，在web端不支持`Platform’

[解决方案]

先使用 kIsWeb判断是否为web端，再使用 Platform

2、网络请求证书校验

Error: Expected a value of type 'DefaultHttpClientAdapter', but got one of type 'BrowserHttpClientAdapter'

[解决方案]

web端加个判断，在web端不使用

更新：升级dio5.x后没有DefaultHttpClientAdapter了,按下面的

dio.httpClientAdapter = IOHttpClientAdapter()..onHttpClientCreate = (client) {client.badCertificateCallback = (X509Certificate cert, String host, int port) => true;return client;};

3、同时使用 Scrollbar、SingleChildScrollView控制台报错

The Scrollbar's ScrollController has no ScrollPosition attached.

The following assertion was thrown while notifying status listeners for AnimationController:
The Scrollbar's ScrollController has no ScrollPosition attached.A Scrollbar cannot be painted without a ScrollPosition. The Scrollbar attempted to use the provided ScrollController. This ScrollController should be associated with the ScrollView that the Scrollbar is being applied to.When providing your own ScrollController, ensure both the Scrollbar and the Scrollable widget use the same one.

[解决方案]

添加ScrollController
Flutter The Scrollbar’s ScrollController has no ScrollPosition attached

final yourScrollController = ScrollController();Scrollbar(isAlwaysShown: true,thickness: 10,controller: yourScrollController, // Here child: ListView.builder(padding: EdgeInsets.zero,scrollDirection: Axis.vertical,controller: yourScrollController, // AND HereitemCount: yourRecordList?.length....)
)

4、图片跨越

Access to XMLHttpRequest at 'https://xxx.png' from origin 'http://localhost:54604' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. js_util_patch.dart:80 GET https://xxx.png net::ERR_FAILED 302

[解决方案]

我这里web端只是查看一下功能，不是必须
所以使用的自定义的图片组件，如果是网络图片，加载一个默认的本地图片，保证在web端能看到默认图片

网上其他的几种解决办法：

使用 flutter_widget_from_html 插件：
该插件可以在 Flutter Web 中使用HTML标签来显示图片，并避免了跨域问题。详见：https://pub.dev/packages/flutter_widget_from_html

在服务器端设置跨域资源共享（CORS）：
在服务器端设置响应头部，允许 Flutter Web 应用程序从其他域加载图片。
详见：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

使用 base64 数据 URI：将图片转换为 base64 格式的数据 URI，然后将其插入到 HTML 中，避免了跨域问题。
但是这种方法会增加页面加载时间。

使用代理服务器：使用代理服务器来代替 Flutter Web 应用程序加载图片，这样就可以避免跨域问题。
但是这种方法会增加服务器的负担。