Flutter SVG 仅在热重启后渲染

Question

我在使用 flutter_svg:^0.15.0 渲染 svg 文件时遇到问题。有些 svg 会在第一次渲染，但有些不会。当我热重启应用程序时，它工作正常。我尝试降级 flutter_svg 版本，但没有成功。 几周以来我都遇到了这个麻烦，我尝试使用 svg 清洁器，因为 flutter_svg 不支持属性，但什么也没得到。

控制台输出： I/flutter (12326): ══╡ EXCEPTION CAUGHT BY SVG ╞═══════════════════════════════════════════════════════════════════════ I/flutter (12326): The following assertion was thrown resolving a single-frame picture stream: I/flutter (12326): Unable to load asset: images/weo-device NotConnecteds.svg I/flutter (12326): I/flutter (12326): When the exception was thrown, this was the stack: I/flutter (12326): #0 PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7) I/flutter (12326): <asynchronous suspension> I/flutter (12326): #1 AssetBundle.loadString (package:flutter/src/services/asset_bundle.dart:67:33) I/flutter (12326): #2 CachingAssetBundle.loadString.<anonymous closure> (package:flutter/src/services/asset_bundle.dart:162:56) I/flutter (12326): #3 _LinkedHashMapMixin.putIfAbsent (dart:collection-patch/compact_hash.dart:293:23) I/flutter (12326): #4 CachingAssetBundle.loadString (package:flutter/src/services/asset_bundle.dart:162:27) I/flutter (12326): #5 AssetBundlePictureProvider._loadAsync (package:flutter_svg/src/picture_provider.dart:448:42) I/flutter (12326): #6 AssetBundlePictureProvider.load (package:flutter_svg/src/picture_provider.dart:434:43) I/flutter (12326): #7 PictureProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter_svg/src/picture_provider.dart:326:17) I/flutter (12326): #8 PictureCache.putIfAbsent (package:flutter_svg/src/picture_cache.dart:67:22) I/flutter (12326): #9 PictureProvider.resolve.<anonymous closure> (package:flutter_svg/src/picture_provider.dart:324:16) I/flutter (12326): #10 SynchronousFuture.then (package:flutter/src/foundation/synchronous_future.dart:38:29) I/flutter (12326): #11 PictureProvider.resolve (package:flutter_svg/src/picture_provider.dart:321:24) I/flutter (12326): #12 _SvgPictureState._resolveImage (package:flutter_svg/svg.dart:641:10) I/flutter (12326): #13 _SvgPictureState.didUpdateWidget (package:flutter_svg/svg.dart:629:7) I/flutter (12326): #14 StatefulElement.update (package:flutter/src/widgets/framework.dart:4396:58) I/flutter (12326): #15 Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15) I/flutter (12326): #16 SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:5452:14) I/flutter (12326): #17 Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15) I/flutter (12326): #18 RenderObjectElement.updateChildren (package:flutter/src/widgets/framework.dart:5161:32) I/flutter (12326): #19 MultiChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:5561:17) I/flutter (12326): #20 Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15) I/flutter (12326): #21 SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:5452:14) I/flutter (12326): #22 Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15) I/flutter (12326): #23 SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:5452:14) I/flutter (12326): #24 Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15) I/flutter (12326): #25 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4243:16) I/flutter (12326): #26 Element.rebuild (package:flutter/src/widgets/framework.dart:3947:5) I/flutter (12326): #27 StatelessElement.update (package:flutter/src/widgets/framework.dart:4298:5) I/flutter (12326): #28 Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15) I/flutter (12326): #29 SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:5452:14) I/flutter (12326): #30 Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15) I/flutter (12326): #31 SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:5452:14) I/flutter (12326): #32 Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15) I/flutter (12326): #33 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4243:16) I/flutter (12326): #34 Element.rebuild (package:flutter/src/widgets/framework.dart:3947:5) I/flutter (12326): #35 StatelessElement.update (package:flutter/src/widgets/framework.dart:4298:5) I/flutter (12326): #36 Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15) I/flutter (12326): #37 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4243:16) I/flutter (12326): #38 Element.rebuild (package:flutter/src/widgets/framework.dart:3947:5) I/flutter (12326): #39 ProxyElement.update (package:flutter/src/widgets/framework.dart:4557:5) I/flutter (12326): #40 Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15) I/flutter (12326): #41 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4243:16) I/flutter (12326): #42 Element.rebuild (package:flutter/src/widgets/framework.dart:3947:5) I/flutter (12326): #43 StatefulElement.update (package:flutter/src/widgets/framework.dart:4413:5) I/flutter (12326): #44 Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15) I/flutter (12326): #45 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4243:16) I/flutter (12326): #46 Element.rebuild (package:flutter/src/widgets/framework.dart:3947:5) I/flutter (12326): #47 StatelessElement.update (package:flutter/src/widgets/framework.dart:4298:5) I/flutter (12326): #48 Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15) I/flutter (12326): #49 SliverMultiBoxAdaptorElement.updateChild (package:flutter/src/widgets/sliver.dart:1288:36) I/flutter (12326): #50 SliverMultiBoxAdaptorElement.performRebuild.processElement (package:flutter/src/widgets/sliver.dart:1220:34) I/flutter (12326): #51 Iterable.forEach (dart:core/iterable.dart:279:30) I/flutter (12326): #52 SliverMultiBoxAdaptorElement.performRebuild (package:flutter/src/widgets/sliver.dart:1246:24) I/flutter (12326): #53 SliverMultiBoxAdaptorElement.update (package:flutter/src/widgets/sliver.dart:1191:7) I/flutter (12326): #54 Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15) I/flutter (12326): #55 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4243:16) I/flutter (12326): #56 Element.rebuild (package:flutter/src/widgets/framework.dart:3947:5) I/flutter (12326): #57 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2432:33) I/flutter (12326): #58 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:773:20) I/flutter (12326): #59 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:283:5) I/flutter (12326): #60 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1102:15) I/flutter (12326): #61 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1041:9) I/flutter (12326): #62 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:957:5) I/flutter (12326): #66 _invoke (dart:ui/hooks.dart:259:10) I/flutter (12326): #67 _drawFrame (dart:ui/hooks.dart:217:3) I/flutter (12326): (elided 3 frames from package dart:async) I/flutter (12326): I/flutter (12326): Picture provider: ExactAssetPicture(name: "images/weo-device NotConnecteds.svg", bundle: null, I/flutter (12326): colorFilter: null) I/flutter (12326): Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#99193(), name: "images/weo-device I/flutter (12326): NotConnecteds.svg", colorFilter: null)

我的 pubspec.yaml：

dev_dependencies:
  flutter_test:
    sdk: flutter
flutter:
  uses-material-design: true
  assets:
    - images/All Acs.svg
    - images/weo.svg
    - images/All Fans.svg
    - images/All Lights.svg
    - images/coffee.svg
    - images/lock.svg
    - images/morning.svg
    - images/Night.svg
    - images/too_hot.svg
    - images/forgot-password.svg
    - images/Accounts.svg
    - images/Favourites.svg
    - images/Room.svg
    - images/offnotification.svg
    - images/onnotification.svg
    - images/power.svg
    - images/power-chill.svg
    - images/sleep.svg
    - images/swing.svg
    - images/economy.svg
    - images/energy-saver.svg
    - images/cove.svg
    - images/loo.svg
    - images/arrow-down.svg
    - images/arrow-up.svg
    - images/curtains.svg
    - images/show password.svg
    - images/too_cold.svg
    - images/regulator.svg
    - Weo Status.svg
    - Wifi – Off.svg
    - Wifi – On.svg
    - logs.svg
    - home.svg
    - rooms.svg
    - Swing H.svg
    - Swing V.svg
    - ModeFan.svg
    - Humidity.svg
    - Dry.svg
    - AI.svg
    - GeneralModeAC.svg
    - theme_on.svg
    - theme_off.svg
    - weo-device NotConnected.svg
    - weo-offline.svg
    - Dot.svg
    - Switchboard.svg
    - WMS.svg
    - WMS-Sketch.svg

我也尝试将 image/ 文件夹放在资产中。

由于这个问题，我无法构建和发布我的应用程序。 请帮我！

更新： 我的代码片段：

Center(
  child: SvgPicture.asset(
    "images/$image",
    width: 55.0,
    height: 55.0,
  )
),

image 变量存储 svg 的名称。

颤振医生：

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.12.13+hotfix.5, on Microsoft Windows [Version 10.0.17763.914], locale en-US)

[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[√] Android Studio (version 3.5)
[√] VS Code (version 1.41.1)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

我已将频道更改为主频道，这就是问题开始的时候，当我回到频道稳定时它仍然存在。

PS:- 一个月前所有的 svg 都可以正常工作。我没有改变任何一个。

Answer 1

几个月前我曾尝试使用 SVG 显示图像。我能注意到的是，SVG 文件中的某些代码 flutter_svg 包还不知道如何解释。这会导致某些 SVG 文件有时会中断/出现渲染问题；所以我们能做的不多，只能使用非常简单的 SVG 文件。

因此，我要求我的设计师生成简单的 SVG 文件，例如没有渐变或阴影等。

但是，有时也有可能的解决方法；但可能不适用于所有 svg 文件。使用这个工具https://github.com/RazrFalcon/svgcleaner/releases。

您可能想尝试的是下载此工具，清理您的 svg 文件，然后使用此工具生成的清理后的 svg 文件。

这个工具有什么作用？

我不能 100% 确定，但它会缩小并更改 SVG 的代码，以便将样式/类内嵌放置，这增加了 SVG 文件在 flutter_svg 包中工作的机会。

Answer 2

好吧，我找到了解决方案。我删除了 SVG 名称中的所有空格，之后，它们都工作得很好。我不知道这是否是问题的原因，但它确实解决了它。