How to load stateful widget in the background - flutter

Question

I got a stateful widget that changes the background image every 10 seconds, I've noticed that it flickers each time it changes the background image.
It cycles through a list of images to use for the background.
When it reaches the end of the list and comes back to load the first image, it will not flicker anymore.
I did some googling on this and the flicker is caused by rebuilding the entire widget in setState.
However, after it loads all the possible widgets with different images, it will not flicker.
My hypothesis is that it will store the previous widget either in cache or will figure out what changed in the previous setState therefore it won't flicker as it knows only to change the background.
I'm not sure if this is right or not.
My question is, how do you load multiple widgets but not show them on the screen and in the background.
So basically during the 10 seconds it takes to switch from the first background image to the second.
There will be a Future that loads all the different possible background images.
Thanks in advance!
EDIT: (Code to replicate issue)
import 'dart:async';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Title',
theme: ThemeData(
backgroundColor: Colors.white,
primarySwatch: Colors.blue,
),
home: MyHome(),
);
}
}
class MyHome extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ImageRotater(
child: Text("Some text"),
);
}
}
class ImageRotater extends StatefulWidget {
final Widget child;
ImageRotater({required this.child});
#override
_ImageRotaterState createState() => _ImageRotaterState();
}
class _ImageRotaterState extends State<ImageRotater>
with TickerProviderStateMixin {
late final subtree;
static List<String> imageNames = [
"1.png",
"2.png",
"3.png",
];
int _pos = 0;
late Timer _timer;
late AnimationController _animationController;
#override
void initState() {
subtree = this.widget.child;
//Setting up Animation
_animationController = AnimationController(
vsync: this,
duration: Duration(seconds: 3),
upperBound: 255.0,
lowerBound: 0.0,
value: 255.0,
);
_animationController.reverse();
//Setting up Timer for Casaroul
_timer = Timer.periodic(Duration(seconds: 10), (timer) async {
_animationController.forward();
await Future.delayed(Duration(milliseconds: 3000)).then((_) {
setState(() {
_pos = (_pos + 1) % imageNames.length;
});
_animationController.reverse();
});
});
super.initState();
}
#override
void dispose() {
_animationController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return AnimatedBuilder(
animation: _animationController,
builder: (BuildContext context, _) {
return Container(
width: size.width,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/" + imageNames[_pos]),
alignment: Alignment.centerLeft,
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(
Colors.black.withAlpha(_animationController.value.toInt()),
BlendMode.multiply,
),
),
),
child: subtree,
);
});
}
}
Here is some code,
If you try any 3 images, you will notice the flicker from
Img 1 -> Img 2
Img 2 -> Img 3
HOWEVER FROM,
Img 3 -> Img 1
and onwards, all the transitions will have no flicker.

Answer 1

I think the correct way for reach what you want is use the bloc pattern Bloc library
With this pattern you can separate the state from the ui and you can manage easily state everywhere in your app

Answer 2

So the technical term I was looking for was 'preloading an image'.
I found a post that does exactly what I wanting, it solved the flickering problem.
Here is the link:
Flutter Preloading