Ad

Add Image Reference To List And Carousel And Firebase

- 1 answer

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,
                    ),
                  ),
                )
            ],
          ),
        ),
      ]),
    );
  }
}
Ad

Answer

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.

Ad
source: stackoverflow.com
Ad