尝试使用 flutter_svg 库在 Flutter 中预缓存本地 SVG 文件时出错

Question

当我尝试使用 flutter_svg 库在 flutter 中预缓存 SVG 文件时出现以下错误：

>     flutter: ══╡ EXCEPTION CAUGHT BY SVG ╞═══════════════════════════════════════════════════════════════════════
>     flutter: The following _CastError was thrown resolving a single-frame picture stream:
>     flutter: Null check operator used on a null value
>     flutter:
>     flutter: When the exception was thrown, this was the stack:
>     flutter: #0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:235:39)
>     flutter: #1      AssetBundle.loadString (package:flutter/src/services/asset_bundle.dart:72:33)
>     flutter: #2      CachingAssetBundle.loadString.<anonymous closure> (package:flutter/src/services/asset_bundle.dart:172:56)
>     flutter: #3      _LinkedHashMapMixin.putIfAbsent (dart:collection-patch/compact_hash.dart:453:23)
>     flutter: #4      CachingAssetBundle.loadString (package:flutter/src/services/asset_bundle.dart:172:27)
>     flutter: #5      AssetBundlePictureProvider._loadAsync (package:flutter_svg/src/picture_provider.dart:546:42)
>     flutter: #6      AssetBundlePictureProvider.load (package:flutter_svg/src/picture_provider.dart:531:7)
>     flutter: #7      PictureProvider.resolve.<anonymous closure>.<anonymous closure>
> (package:flutter_svg/src/picture_provider.dart:378:19)
>     flutter: #8      PictureCache.putIfAbsent (package:flutter_svg/src/picture_cache.dart:91:22)
>     flutter: #9      PictureProvider.resolve.<anonymous closure> (package:flutter_svg/src/picture_provider.dart:376:17)
>     flutter: #10     SynchronousFuture.then (package:flutter/src/foundation/synchronous_future.dart:41:35)
>     flutter: #11     PictureProvider.resolve (package:flutter_svg/src/picture_provider.dart:372:24)
>     flutter: #12     precachePicture (package:flutter_svg/svg.dart:198:21)
>     flutter: #13     main (package:svg_caching/main.dart:7:9)
>     flutter: #14     _runMainZoned.<anonymous closure>.<anonymous closure> (dart:ui/hooks.dart:130:25)
>     flutter: #19     _runMainZoned.<anonymous closure> (dart:ui/hooks.dart:126:5)
>     flutter: #20     _delayEntrypointInvocation.<anonymous closure> (dart:isolate-patch/isolate_patch.dart:297:19)
>     flutter: (elided 5 frames from class _RawReceivePortImpl and dart:async)
>     flutter:
>     flutter: Picture provider: ExactAssetPicture(name: "images/octocat.svg", bundle: null, colorFilter: null)
>     flutter: Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#868b3(), name: "images/octocat.svg",
>     flutter:   colorFilter: null, theme: SvgTheme(currentColor: null, fontSize: 14.0, xHeight: 7.0))
>     flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════

这是我使用的代码：

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

const String svgSource = 'images/octocat.svg';

Future<void> main() async {
  // Trying to pre-cache here:
  await precachePicture(
      ExactAssetPicture(
        SvgPicture.svgStringDecoderBuilder,
        svgSource,
      ),
      null);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SVG test'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SvgPicture.asset(
              svgSource,
              height: 250,
            ),
          ],
        ),
      ),
    );
  }
}

我的pubspec.yaml:

name: svg_caching
description: A new Flutter project.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: ">=2.16.2 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  flutter_svg: ^1.0.3

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^1.0.0

flutter:

  uses-material-design: true

  assets:
    - images/

Flutter 医生输出：

[✓] Flutter (Channel stable, 2.10.5, on macOS 12.3.1 21E258 darwin-arm, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] IntelliJ IDEA Community Edition (version 2022.1)
[✓] VS Code (version 1.66.2)
[✓] HTTP Host Availability

有什么我可能做错的建议吗？当我不尝试缓存 SVG 文件时，它可以正确显示。 Android 和 iOS（物理设备和模拟器）都会出现此错误。

Answer 1

将此行添加到 main() 方法调用之前 pre-caching:

WidgetsFlutterBinding.ensureInitialized();

尝试使用 flutter_svg 库在 Flutter 中预缓存本地 SVG 文件时出错

Error while trying to precache local SVG files in Flutter using flutter_svg library

android

ios

flutter

dart

svg