flutter项目中添加web支持

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