Home > Back-end >  Error while trying to precache local SVG files in Flutter using flutter_svg library
Error while trying to precache local SVG files in Flutter using flutter_svg library

Time:05-02

I'm getting following error when I try to pre-cache SVG files in flutter using flutter_svg library:

>     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: ════════════════════════════════════════════════════════════════════════════════════════════════════

Here's the code I'm using:

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,
            ),
          ],
        ),
      ),
    );
  }
}

My 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 doctor output:

[✓] 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

Any suggestions what I might be doing wrong? The SVG file is displaying properly when I'm not trying to cache it. This error is occurring both on Android and iOS (physical device and simulator).

CodePudding user response:

Add this line to your main() method call before pre-caching:

WidgetsFlutterBinding.ensureInitialized();
  • Related