Flutter 2.5.1
在项目目录下，在终端运行以下命令：
flutter create .
使用kIsWeb，判断是否支持浏览器
if (kIsWeb) {
// 浏览器支持
} else {
// 浏览器不支持
}
Web端不支持Platform.*
比如
Platform.isAndroid
Platform.isIOS
在web端不受支持，使用kIsWeb判断后再使用
// 判断是否支持SignInWithApple
if(!kIsWeb){
if ((Platform.isIOS || Platform.isMacOS) &&
isSignWithAppleAvailable &&
GlobalConfigService.config != null &&
GlobalConfigService.config.getEnableAppleLogin) {
items.add(QHSignInWithAppleButton());
}
}
Web端不支持package_info.dart
String version = packageInfo.version;
String buildNumber = packageInfo.buildNumber;
if (kIsWeb) {
PackageInfo packageInfo = await PackageInfo.fromPlatform();
version = packageInfo.version;
buildNumber = packageInfo.buildNumber;
}
无法显示跨域图片
Flutter 中文文档 - Flutter 中文资源 | 在 Web 中展示图片
The following ImageCodecException was thrown resolving an image codec:
Failed to load network image.
Image URL: https://*.*/*/scope_label/6.png
Trying to load an image from another domain? Find answers at:
https://flutter.dev/docs/development/platform-integration/web-images
在无法修改服务器配置的情况下可以使用html渲染。此外官方文档中建议，如果显示的图片较多，使用html渲染性能更好
flutter run --web-renderer html -d chrome
适配广告追踪
Future<void> _requestAppTracking() async {
if (kIsWeb) {
return;
}
if (Platform.isIOS) {
// 只有iOS支持，询问广告追踪权限
try {
final status =
await AppTrackingTransparency.trackingAuthorizationStatus;
if (status == TrackingStatus.notDetermined) {
await AppTrackingTransparency.requestTrackingAuthorization();
}
} on PlatformException {}
final uuid = await AppTrackingTransparency.getAdvertisingIdentifier();
print('_requestAppTracking uuid $uuid');
}
}
webview
webview只支持移动端，其它平台尝试打开网页
webview - web view for flutter web application - Stack Overflow
import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'package:quanhai/ui/pages/others/webview/webview_screen.dart';
import 'package:url_launcher/url_launcher.dart';
gotoWebViewWithURL(String url, BuildContext context) async {
if (!kIsWeb && context != null) {
if (Platform.isAndroid || Platform.isIOS) {
Navigator.of(context).pushNamed(WebViewScreen.routeName, arguments: url);
return;
}
}
if (await canLaunch(url)) {
launch(url);
}
}
适配package_info
使用package_info_plus | Flutter Package (pub.dev)替换package_info
-import 'package:package_info/package_info.dart';
+import 'package:package_info_plus/package_info_plus.dart';
-------------------
final packageInfo = await PackageInfo.fromPlatform();
String version = packageInfo.version;
String buildNumber = packageInfo.buildNumber;
打包，部署到子目录
使用--base-href，可设置服务器子目录
flutter build web --web-renderer html --release --base-href /__qh_h5__/
