So, as the title says, I'm using Lottie package and I'm getting some strange behaviour, see below:
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.
