13

flutter_web docos 说 dart:svg 已移植，但是如何将它与颤振资产/小部件系统一起使用？

4

5 回答 5

15

老实说，我发现的最佳解决方案是通过网络为网络加载图像。将资产存储在某个 CDN 上，从 Web 版本的 CDN 获取它，然后在 iOS/Android 上从本地资产中检索它。

我CrossPlatformSvg使用这个库创建了一个小部件：https ://pub.dev/packages/flutter_svg ，类似于：

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(),
        ),
      );
    }
  }
}
于 2020-06-24T17:10:49.760 回答
3

@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')
于 2021-03-11T21:46:11.867 回答
3

我的 Flutter Web 应用程序将在桌面 Web 浏览器中渲染 SVG，而不是使用flutter_svg的移动 Web 浏览器。我发现有必要使用 canvaskit 支持构建，以便 SVG 在移动设备上呈现：

flutter build web --web-renderer canvaskit

但是，文档指出 canvaskit 增加了大约 2MB 的下载大小，这对我来说是个大问题。可悲的是，但我将使用光栅图像，直到这个问题得到解决。

于 2021-05-28T14:32:46.333 回答
1

flutter_svg 1.0.0 版自 2021 年 12 月 2 日起发布，包括 Web 支持。因此，在 Flutter 项目中使用 svg 图像不再有障碍。

于 2021-12-23T19:28:50.033 回答
0

@RumbleFish 很好，但在许多地方使用三元运算会使代码变得混乱。

我的做法是：

  • 在字符串上创建一个扩展函数以assets/从路径替换。
extension ForWeb on String {
  String forWeb({required bool web}) => web ? this.replaceFirst('assets/','') : this;
}
  • 现在在代码中：

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

于 2021-07-13T12:36:56.207 回答