Doesn´t refresh the carouselSlider in flutter

user_1342664 0
Viewed 3151

I tried to make an app to display images, to do this I am using Firestore, Flutter... to the slider I am using carousel_slider plugin to display those images, but when I recived a new image from Firestore, the slider doesn´t display the new image, but the circle (indicator) display the new circle but doesn´t work too, the indicator works with only the initial images.

enter image description here

my Code the carousel:

_loadCarrouselFood(){
    var carouselSlider = CarouselSlider(
      viewportFraction: 1.0,
      aspectRatio: 2.0,
      autoPlay: false,
      enlargeCenterPage: true,
      items: child,
      onPageChanged: (index) {
        setState(() {
          _current = index;
        });
        LatLng locationDish = LatLng(_locationDish[_current].latitude, _locationDish[_current].longitude);
          moveCameraTo(locationDish);
      },
    );

    setState(() {
      _sliderDish = carouselSlider;
    });

    return carouselSlider;
  }
}

Firestore function:

_getInfoDish() async{

    List<LocationDish> _locationDishTmp = <LocationDish>[];
    List<Dish> _dishCardTmp = <Dish>[];
    bool hasFoodInArray = false;

    Firestore.instance // Get the firebase instance
      .collection(Constants.NAME_COLECTION) // Get the informations collection
      .snapshots() // Get the Stream of DocumentSnapshot
      .listen((QuerySnapshot snapshot){

        _locationDishTmp.clear();
        _dishCardTmp.clear();

        print(":::::: - FIRESTORE - ::::::");  

        snapshot.documents.forEach((obj){

        //Set dish to Cards
        _dishCardTmp.add(
          Dish(
            id: obj.data["id"],
            name: obj.data["name"],
            photoURL: 'https://recetaparahoy.com/wp-content/uploads/2017/06/ceviche-peruano-630x420.jpg',
            score: obj.data["score"].toDouble(),
          ),
        );

        });

        if(_locationDishTmp.length > 0)
        {
          setState(() {
            //add only food recent data
            for(int i = 0; i < _locationDishTmp.length; i++){
              _locationDish.add(_locationDishTmp[i]);
              _dishCard.add(_dishCardTmp[i]);
            }

            //_current = _locationDish.length-1;
            _hasFoodOnMap = true;            
          });
        }
      }); 
  }

Please, someone could say me the error, or maybe any other solution to do that, I hope my explanation is clear, thx a lot!!!

carousel google-cloud-firestore flutter
1 Answers

You can copy paste run full code below
I use the following demo to simulate this case
You can use CarouselSlider.builder build item when it will be visible
https://github.com/serenader2014/flutter_carousel_slider#build-item-widgets-on-demand

working demo

enter image description here

full code

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(        
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 1;
  String url = 'https://picsum.photos/250?image=';
  List<String> urlList = ['https://picsum.photos/250?image=1'];
  int _current = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
      urlList.add('https://picsum.photos/250?image=${_counter}');
    });
  }

  List<T> map<T>(List list, Function handler) {
    List<T> result = [];
    for (var i = 0; i < list.length; i++) {
      result.add(handler(i, list[i]));
    }

    return result;
  }

  @override
  Widget build(BuildContext context) {    
    return Scaffold(
      appBar: AppBar(        
        title: Text(widget.title),
      ),
      body: Center(        
        child: Column(         
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CarouselSlider.builder(
              autoPlay: false,
              enlargeCenterPage: true,
              aspectRatio: 2.0,
              onPageChanged: (index) {
                setState(() {
                  _current = index;
                });
              },
              itemCount: urlList.length,
              itemBuilder: (BuildContext context, int index) =>
                  Container(
                    child: Image.network(urlList[index]),
                  ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: map<Widget>(
                urlList,
                    (index, url) {
                  return Container(
                    width: 8.0,
                    height: 8.0,
                    margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: _current == index
                            ? Color.fromRGBO(0, 0, 0, 0.9)
                            : Color.fromRGBO(0, 0, 0, 0.4)),
                  );
                },
              ),
            ),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );
  }
}
user_21795710
Related