Git Product home page Git Product logo

Comments (5)

xvrh avatar xvrh commented on June 1, 2024 4

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.

xvrh avatar xvrh commented on June 1, 2024

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.

appycamper avatar appycamper commented on June 1, 2024

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.

appycamper avatar appycamper commented on June 1, 2024

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.

appycamper avatar appycamper commented on June 1, 2024

Thanks that's really helpful!

from lottie-flutter.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.