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