Comments (5)
Is there any way I can take advantage of the async feature (i.e. showing loading indicator) while still using Lottie.asset()?
You can load a LottieComposition
from your assets with the associated images with:
var composition = await AssetLottie('assets/example.json').load();
This class also cache the composition in an internal cache.
If you don't want the cache and want to perform the image loading yourself, you can use something like:
var data = await rootBundle.load('assets/example.json');
var composition = await LottieComposition.fromByteData(data);
// Loop over the images declared in the composition and load them.
for (var image in composition.images.values) {
var imageData = await rootBundle.load('asset/example/images/${image.fileName}');
var codec = await instantiateImageCodec(imageData.buffer.asUint8List());
var frame = await codec.getNextFrame();
// Put the loaded image back in the composition so the drawing code will find it
image.loadedImage = frame.image;
}
from lottie-flutter.
This is supported and if it doesn't work, this is a bug I need to investigate.
I quickly tried your example and it seems to work for me.
Note that you have to declare the 2 folders in your pubspec.yaml
flutter:
assets:
- assets/example/
- assets/example/images/
This is a rule of Flutter: https://flutter.dev/docs/development/ui/assets-and-images#specifying-assets
from lottie-flutter.
That's very strange that it works for you. My relevant pubspec:
assets:
- assets/animations/
- assets/animations/example/
- assets/animations/example/images/
Lottie code:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:lottie/lottie.dart';
class SvgTestScreen extends StatefulWidget {
static const String routeId = 'svg_test_screen';
@override
_SvgTestScreenState createState() => _SvgTestScreenState();
}
class _SvgTestScreenState extends State<SvgTestScreen> {
Future<LottieComposition> _composition;
@override
void initState() {
super.initState();
_composition = _loadComposition();
}
@override
Widget build(BuildContext context) => Scaffold(
body: Scaffold(
body: SafeArea(
child: FutureBuilder<LottieComposition>(
future: _composition,
builder: (_, snapshot) => snapshot.hasData
? Lottie(composition: snapshot.data)
: Center(child: CircularProgressIndicator()),
),
),
),
);
Future<LottieComposition> _loadComposition() async {
var assetData =
await rootBundle.load('assets/animations/example/data.json');
return LottieComposition.fromByteData(assetData);
}
}
If I try to load example.zip this works fine but as soon as I unzip and try to load the json the animation is blank. Strangely if I try to print snapshot.data, I can see the json is loaded, it's just the animation won't show, almost as if the images can't be found.
Any idea?
from lottie-flutter.
I found that using
Lottie.asset('assets/animations/example/data.json')
works but
await rootBundle.load('assets/animations/example/data.json');
does NOT work. I guess this makes sense since rootBundle.load only loads the json file and not the images.
Is there any way I can take advantage of the async feature (i.e. showing loading indicator) while still using Lottie.asset()?
Thanks
from lottie-flutter.
Thanks that's really helpful!
from lottie-flutter.
Related Issues (20)
- Change Speed Not On Load
- Animation made through Ae 3D space is not supported
- Animation not displayed correctly HOT 8
- ValueDelegate.gradientColor Unable to continuously refresh HOT 4
- ValueDelegate.position can not change all shapes
- The gradient in my animation made with Adobe after effects doesn't work as expected. HOT 2
- add flutter 3.16 proper support and update dependencies HOT 2
- ValueDelegate.position can not change images
- Using this library will use a lot of GPUs, even if `enableRenderCache` has been used HOT 2
- Valid json with missing frames HOT 1
- Black lines appear when one animation overlaps another one
- how to Cache tgs file . HOT 1
- tgs lottie very slow on android HOT 5
- How should I playsegment? HOT 2
- RenderCache as Raster initializes animation with incorrect state HOT 1
- How to disable the implementation of auto-orient?
- Privacy Manifest file for IOS HOT 2
- Screen Stuck when try to load the lottie in flutter web
- The lottie files downloaded from lottiefiles can not render HOT 28
- lottie.netowkr how to cached?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lottie-flutter.