你如何在 Flutter Web 上使用 SVG？

Question

flutter_web 文檔說 dart:svg 已移植，但是您如何將其與 flutter 資產/小部件系統一起使用？

Answer 1

老實說，我發現的最佳解決方案是通過網絡加載網絡圖像。 將資產存儲在 CDN 上的某處，從 Web 版本的 CDN 中獲取它，然后在 iOS/Android 上從本地的資產中檢索它。

我使用這個庫創建了一個CrossPlatformSvg小部件： https : CrossPlatformSvg ，類似於：

class CrossPlatformSvg {
  static Widget asset(
    String assetPath, {
    double width,
    double height,
    BoxFit fit = BoxFit.contain,
    Color color,
    alignment = Alignment.center,
    String semanticsLabel,
  }) {
    // `kIsWeb` is a special Flutter variable that just exists
    // Returns true if we're on web, false for mobile
    if (kIsWeb) {
      return Image.network(
        assetPath,
        width: width,
        height: height,
        fit: fit,
        color: color,
        alignment: alignment,
      );
    } else {
      return SvgPicture.network(
        assetPath,
        width: width,
        height: height,
        fit: fit,
        color: color,
        alignment: alignment,
        placeholderBuilder: (_) => Container(
          width: 30,
          height: 30,
          padding: EdgeInsets.all(30),
          child: CircularIndicator(),
        ),
      );
    }
  }
}

Answer 2

@aterenshkov 的方法對我有用（請參閱傑克回答下的評論）。 以下是實施的詳細信息...

iOS / 安卓

child: SvgPicture.asset('assets/yourimage.svg')

網絡

// remove assets folder reference
child: SvgPicture.asset('yourimage.svg')

將這兩個組合在一起......

import 'package:flutter/foundation.dart'; // provides kIsWeb property
...
child: kIsWeb ? SvgPicture.asset('yourimage.svg') : SvgPicture.asset('assets/yourimage.svg')

Answer 3

我的 Flutter Web 應用程序會在桌面 Web 瀏覽器中呈現 SVG，而不是使用flutter_svg的移動 Web 瀏覽器。 我發現有必要使用 canvaskit 支持進行構建，以便 SVG 在移動設備上呈現：

flutter build web --web-renderer canvaskit

然而，文檔指出 canvaskit 增加了大約 2MB 的下載大小，這對我來說是一個破壞者。 很遺憾，但在解決此問題之前，我將使用光柵圖像。

Answer 4

@RumbleFish 很好，但在許多情況下使用三元運算會使代碼變得混亂。

我對此的做法是：

• 在 String 上創建一個擴展函數以替換路徑中的assets/ 。

 extension ForWeb on String { String forWeb({required bool web}) => web ? this.replaceFirst('assets/','') : this; }

• 現在在代碼中：

SvgPicture.asset("assets/images/logo.png".forWeb(web: kIsWeb));

Answer 5

flutter_svg 1.0.0 版自 2021 年 12 月 2 日起發布，包括網絡支持。 因此，在 Flutter 項目中不再有使用 svg 圖像的阻止程序。