Lottie flutter takes some time to show, but the json has just 13kb

27 Views Asked by At

So, as the title says, I'm using Lottie package and I'm getting some strange behaviour, see below:

enter image description here

As the gif shows, the widget loads (the text appears in the center of the screen, but not the animation) and after a while, the animation loads.

Here is the code for this widget that I've created:

class AnimatedLoadingCommonWidget extends StatefulWidget {
  const AnimatedLoadingCommonWidget({
    super.key,
    this.loadingMessages,
    this.singleMessage,
    this.shouldAnimationAdapts = false,
  });

  final List<String>? loadingMessages;
  final List<TextSpan>? singleMessage;
  final bool shouldAnimationAdapts;

  @override
  State<AnimatedLoadingCommonWidget> createState() =>
      _AnimatedLoadingCommonWidgetState();
}

class _AnimatedLoadingCommonWidgetState
    extends State<AnimatedLoadingCommonWidget> {
  ValueNotifier<String> currentMessage = ValueNotifier('');

  @override
  void initState() {
    super.initState();

    assert(widget.loadingMessages != null || widget.singleMessage != null);

    if (widget.loadingMessages != null) {
      int currentMessageIndex = 1;

      currentMessage.value = widget.loadingMessages![0];

      // this code runs after every 2.2 seconds.
      Timer.periodic(const Duration(seconds: 2, milliseconds: 200), (_) {
        currentMessage.value = widget.loadingMessages![currentMessageIndex];
        if (currentMessageIndex + 1 == widget.loadingMessages!.length) {
          currentMessageIndex = 0;
        } else {
          currentMessageIndex++;
        }
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          widget.shouldAnimationAdapts
              ? Expanded(
                  child: Stack(
                    children: [
                      Lottie.asset(
                        'assets/animations/json.zip',
                        animate: true,
                        frameRate: FrameRate.max
                      ),
                      Image.asset('assets/images/shape.png'),
                    ],
                  ),
                )
              : Stack(
                  children: [
                    Lottie.asset(
                      'assets/animations/json.zip',
                      animate: true,
                      frameRate: FrameRate.max
                    ),
                    Image.asset('assets/images/shape.png'),
                  ],
                ),
          SizedBox(
            height: 65,
            child: Column(
              children: [
                if (widget.loadingMessages != null)
                  ValueListenableBuilder(
                    valueListenable: currentMessage,
                    builder: (context, message, child) => Text(
                      message,
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        fontSize: 12,
                        fontWeight: FontWeight.w500,
                        color: kPrimaryColor,
                      ),
                    ),
                  ),
                if (widget.singleMessage != null)
                  RichText(
                    text: TextSpan(
                      style: const TextStyle(
                        fontSize: 12,
                        color: kPrimaryColor,
                        fontFamily: 'Poppins',
                      ),
                      children: widget.singleMessage,
                    ),
                  ),
                const SizedBox(
                  height: 8,
                ),
                const Text(
                  'Por favor, aguarde',
                  style: TextStyle(
                    fontSize: 10,
                    fontWeight: FontWeight.w400,
                    color: greyScale07,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

This is supposed to be like this, or I got something wrong?

PS. I already test using the default frame rate.

Edit: This only happens in this particular case. (it's the first time that I have this loading shown). In other cenarios, post first loading, the animation displays correctly.

0

There are 0 best solutions below