Flutter_svg: Need a way to preload SVG
As the app starts up, the initial screen appears without the logo. The logo appears after a moment. This is unsatisfactory.
I need a way to pre-load the image from main(), without any BuildContext. Example usage:
import 'package:flutter_svg/svg.dart' show SvgPicture;
import 'package:flutter/widgets.dart'
show
BoxConstraints,
Color,
Container,
EdgeInsets,
runApp,
StatelessWidget,
Widget;
class Logo extends StatelessWidget {
static SvgPicture getSvgPicture() => SvgPicture.asset(
'assets/logo.svg',
color: Color(0xFFaaaaaa),
semanticsLabel: 'App Name logo',
);
@override
Widget build(_) => Container(
// When changing this, also update ios LaunchScreen.storyboard.
margin: const EdgeInsets.fromLTRB(0, 100, 0, 40),
constraints: const BoxConstraints.tightFor(width: 200, height: 93),
child: getSvgPicture());
}
void main() async {
await Logo.getSvgPicture().load(); // <--- Please add this.
runApp(Container(color: Color(0xFFffffff), child: Logo()));
}
To get unblocked, I will use GIMP to render the SVG into a PNG file and preload the PNG asset.
mleonhard
All 11 comments
You can't use precachePicture?
dnfield
on 17 Oct 2019
precachePicture() requires a BuildContext. Is there any way to obtain a BuildContext in main()?
mleonhard
on 19 Oct 2019
main() {
runApp(Builder((context) {
// do whatever you need to do with that context
return Container();
}));
}
AlexBigCheese
on 19 Oct 2019
You can provide null for the context and it should work fine.
dnfield
on 21 Oct 2019
(You just won't get any nice localization or text direction or asset bundle resolution)
dnfield
on 21 Oct 2019
Please feel free to comment here or open a new issue if that's not the case. This code should be working though:
main() {
precachePicture(somePictureProvider, null);
}
@dnfield Hey, doesn't work for me.
I use Bloc pattern, and want to preload it in the bloc. So running same command as you have throws:
#0 Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5)
#1 DefaultAssetBundle.of (package:flutter/src/widgets/basic.dart:5391:47)
#2 createLocalPictureConfiguration (package:flutter_svg/src/picture_provider.dart:48:32)
#3 precachePicture (package:flutter_svg/svg.dart:138:39)
#4 IssueListBloc.mapEventToState (package:realpad/screen/issue/list/issue_list_bloc.dart:88:19)
<asynchronous suspension>
#5 IssueListBloc.mapEventToState (package:realpad/screen/issue/list/issue_list_bloc.dart:55:14)
<asynchronous suspension>
#6 Bloc._bindStateSubject.<anonymous closure> (package:bloc/src/bloc.dart:136:14)
#7 Stream.asyncExpand.onListen.<anonymous closure> (dart:async/stream.dart:572:30)
#8 _rootRunUnary (dart:async/zone.dart:1132:38)
#9 _CustomZone.runUnary (dart:async/zone.dart:1029:19)
#10 _CustomZone.runUnaryGuarded (dart:async/zone.dart:931:7)
#11 _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:336:11)
#12 _DelayedData.perform (dart:async/stream_impl.dart:591:14)
#13 _StreamImplEvents.handleNext (dart:async/stream_impl.dart:707:11)
#14 _PendingEvents.schedule.<anonymous closure> (dart:async/stream_impl.dart:667:7)
#15 _rootRun (dart:async/zone.dart:1120:38)
#16 _CustomZone.run (dart:async/zone.dart:1021:19)
#17 _CustomZone.runGuarded (dart:async/zone.dart:923:7)
#18 _CustomZone.bindCallbackGuarded.<anonymous closure> (dart:async/zone.dart:963:23)
#19 _rootRun (dart:async/zone.dart:1124:13)
#20 _CustomZone.run (dart:async/zone.dart:1021:19)
#21 _CustomZone.runGuarded (dart:async/zone.dart:923:7)
#22 _CustomZone.bindCallbackGuarded.<anonymous closure> (dart:async/zone.dart:963:23)
#23 _microtaskLoop (dart:async/schedule_microtask.dart:41:21)
#24 _startMicrotaskLoop (dart:async/schedule_microtask.dart:50:5)
Nazacheres
on 23 Oct 2019
@Nazacheres that stack doesn't make a lot of sense to me - what version of Flutter are you on?
DefaultAssetBundle.of shouldn't throw with a null context - but in the revision I'm working on, the line numbers are different so I can't see which line exactly you're looking at.
dnfield
on 23 Oct 2019
hello please tell me how to pass PictureProvider instance in precatchPicture ();
Amitzala143
on 5 Apr 2020
I'm seeing a similar error to @Nazacheres
I'm using the dev channel of flutter.
Flutter 1.16.4-pre.86 • channel dev • https://github.com/flutter/flutter
Framework • revision a8b3d1b74f (3 days ago) • 2020-04-02 15:40:37 -0700
Engine • revision f56e678e7f
Tools • Dart 2.8.0 (build 2.8.0-dev.19.0 fae35fca47)
My dart code looks like this.
Future<void> main() async {
await precachePicture(
ExactAssetPicture(SvgPicture.svgStringDecoder, SvgAsset.logo.withText),
null,
);
runApp(const SpinnyBoxApp());
// Loads the local settings for the device.
await SpinnyBoxSettings.loadSettings();
}
It crashes on the await precachePicture line with the following error log. _Click to expand the accordion._
Error Log
E/flutter (24782): Tried calling: dependOnInheritedWidgetOfExactType<DefaultAssetBundle>()
E/flutter (24782): #0 Object.noSuchMethod (dart:core-patch/object_patch.dart:53:5)
E/flutter (24782): #1 DefaultAssetBundle.of
package:flutter/…/widgets/basic.dart:5485
E/flutter (24782): #2 createLocalPictureConfiguration
package:flutter_svg/src/picture_provider.dart:48
E/flutter (24782): #3 precachePicture
package:flutter_svg/svg.dart:138
E/flutter (24782): #4 main
package:spinny_box/main.dart:18
E/flutter (24782): #5 _runMainZoned.<anonymous closure>.<anonymous closure> (dart:ui/hooks.dart:241:25)
E/flutter (24782): #6 _rootRun (dart:async/zone.dart:1184:13)
E/flutter (24782): #7 _CustomZone.run (dart:async/zone.dart:1077:19)
E/flutter (24782): #8 _runZoned (dart:async/zone.dart:1619:10)
E/flutter (24782): #9 runZonedGuarded (dart:async/zone.dart:1608:12)
E/flutter (24782): #10 _runMainZoned.<anonymous closure> (dart:ui/hooks.dart:233:5)
E/flutter (24782): #11 _startIsolate.<anonymous closure> (dart:isolate-patch/isolate_patch.dart:301:19)
E/flutter (24782): #12 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:168:12)
E/flutter (24782):
ifiokjr
on 5 Apr 2020
I'm seeing a similar error to @Nazacheres
I'm using the dev channel of flutter.
Flutter 1.16.4-pre.86 • channel dev • https://github.com/flutter/flutter Framework • revision a8b3d1b74f (3 days ago) • 2020-04-02 15:40:37 -0700 Engine • revision f56e678e7f Tools • Dart 2.8.0 (build 2.8.0-dev.19.0 fae35fca47)My dart code looks like this.
Future<void> main() async { await precachePicture( ExactAssetPicture(SvgPicture.svgStringDecoder, SvgAsset.logo.withText), null, ); runApp(const SpinnyBoxApp()); // Loads the local settings for the device. await SpinnyBoxSettings.loadSettings(); }It crashes on the
await precachePictureline with the following error log. _Click to expand the accordion._Error Log
Try doing:
WidgetsFlutterBinding.ensureInitialized();
Before calling await precachePicture
JelleScheer
on 16 Feb 2021
Related issues
joaorpalma
·
4Comments
kentcb
·
4Comments
MarkAlexanderDev
·
5Comments
ifiokjr
·
5Comments
jeffersondarcy
·
3Comments
Most helpful comment
I'm seeing a similar error to @Nazacheres
I'm using the dev channel of flutter.
My dart code looks like this.
It crashes on the
await precachePictureline with the following error log. _Click to expand the accordion._Error Log