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<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__/
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容