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__/