Add image reference to List and Carousel and Firebase - list

Question

I am not sure how to ask this question, therefore, bare with me.
first page displays a gridview of different items, when you click on one of the items it brings you to a description page of the item.
in this description page it uses futurebuilder where future: gets firebasefirestore.instance.collection......get()
it then follows with a builder:
if (snapshot.connectionState == ConnectionState.done) {
Map<String, dynamic> documentData = snapshot.data.data();
//Add images
// imgList.clear();
imgList.add(documentData['item_images'][0]);
imgList.add(documentData['item_images'][1]);
imgList.add(documentData['item_images'][2]);
return ListView(
children: [
CarouselWithIndicatorDemo(),
],);
}
The CarouselWithIndicatorDemo() is straight from the Dart dev carousel_slider example.
Retrieving the data works perfectly fine and the carousel displays all 3 images from the imglist (seen above).
but when I go back to the previous page to click on another item, the images in the carousel do not update. I tried imgList.removeAt(0) 3 times to clear the list within the dispose:
#override
void dispose() {
imgList.removeAt(0);
imgList.removeAt(0);
imgList.removeAt(0);
super.dispose();
}
but that didn't work... how can I update this list correctly?
***************** EDIT *********************
in a dart file I am passing the following information:
Map<String, dynamic> documentData = snapshot.data.data();
List imageList = documentData['item_images'];
This is within my ListView( children:[
ImageSwipe(imageList: imageList) // instead of CarouselWithIndicatorDemo()
The other dart file:
class ImageSwipe extends StatefulWidget {
ImageSwipe({Key key, this.imageList}) : super(key: key);
final List imageList;
#override
_ImageSwipeState createState() => _ImageSwipeState();
}
class _ImageSwipeState extends State<ImageSwipe> {
int _selectedPage = 0;
#override
Widget build(BuildContext context) {
return Container(
height: 400.0,
child: Stack(
children: [
PageView(
onPageChanged: (value) {
setState(() {
_selectedPage = value;
});
},
children: [
for (var i = 0; i < widget.imageList.length; i++)
Container(
child: FadeInImage.assetNetwork(
placeholder: 'assets/missingImage.jpg',
image: widget
.imageList[i],
fit: BoxFit.cover,
),
),
],
),
Positioned(
bottom: 10.0,
left: 0.0,
right: 0.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
for (var i = 0; i < widget.imageList.length; i++)
AnimatedContainer(
duration: Duration(
milliseconds: 300,
),
curve: Curves.easeOutCubic,
margin: EdgeInsets.symmetric(horizontal: 5.0),
width: _selectedPage == i ? 36.0 : 10.0,
height: 10.0,
decoration: BoxDecoration(
color: AppColors.primaryColor,
borderRadius: BorderRadius.circular(
12.0,
),
),
)
],
),
),
]),
);
}
}

Answer 1

I have resolved and issue like that by using this:
final backgroundImages = ['signin_background.png','limpieza.jpg',/*'medicina.jpg',*/'plomero.jpg','profesor.jpg','veterinario.jpg'];
Then wrapping it in a animatedSwitcher like this:
Stack(
children: [
AnimatedSwitcher(
duration: Duration(milliseconds: 800),
transitionBuilder: (Widget image, Animation<double> animation) {
return FadeTransition(opacity: animation, child: image,);
},
child: Image.asset('assets/'+backgroundImages[pos],
width: MediaQuery.of(context).size.width,
key: ValueKey(pos),
fit: BoxFit.fill,
),
),
So you have to first fetch the images from your db or store them withing the app.