How to keep changing a Images every 5 seconds in F

Question

State Variables :

var moviePhotos = [
"http://www.kiwithebeauty.com/wp-content/uploads/2017/11/BLACK-PANTHER-COLLAGE-KIWI-THE-BEAUTY-MOVIE-MARVEL-800x350.png",
"https://static-ssl.businessinsider.com/image/5a7085a97e7a35f10c8b479f-1000/blackpanthershuri.jpg",
"https://longreadsblog.files.wordpress.com/2018/02/black-panther.jpg?w=1680",
"https://uziiw38pmyg1ai60732c4011-wpengine.netdna-ssl.com/wp-content/dropzone/2018/02/black-panther.jpg",
"https://static2.srcdn.com/wp-content/uploads/2017/10/Black-Panther-Trailer-1.jpg?q=50&w=1000&h=500&fit=crop&dpr=1.5",
"https://cdn.guidingtech.com/imager/media/assets/BP-2_acdb3e4bb37d0e3bcc26c97591d3dd6b.jpg",
"https://cdn.guidingtech.com/imager/media/assets/BP-8_acdb3e4bb37d0e3bcc26c97591d3dd6b.jpg"
];
var bannerPosition = 0;

I want the below function to change the position in the array every 5 seconds by incrementation bannerPosition so that a new image renders on the app

testing() async {
    while(true){
        await new Future.delayed(const Duration(seconds : 5));
            if (bannerPosition < moviePhotos.length){
                print("Banner Position Pre");
                print(bannerPosition);
                setState(() {
                    bannerPosition = bannerPosition + 1;
                });
                print("Banner Position Post");
                print(bannerPosition);                      
            }                   
            else{
                setState(() {
                    bannerPosition = 0;
                });                     
            }       
        }

}

The "Future.delayed(const Duration(seconds : 5))" does not occur in an orderly fashion when I execute this code and it results in image rendering issues.

Answer 1

I don't know what you mean by 'does not occur in an orderly fashion'. While just looking at that I'd think it would work, except that I seem to remember there being something weird about using await in a loop. It might keep looping around and creating more and more calls to the delayed....

Instead, use a Timer. That way it handles the looping. I'd also advise saving a reference to the timer and stopping it in your state's dispose() function.

Here's a code example:

class ImageRotater extends StatefulWidget {
  List<String> photos;

  ImageRotater(this.photos);

  @override
  State<StatefulWidget> createState() => new ImageRotaterState();
}

class ImageRotaterState extends State<ImageRotater> {
  int _pos = 0;
  Timer _timer;

  @override
  void initState() {
    _timer = Timer(new Duration(seconds: 5), () {
      setState(() {
        _pos = (_pos + 1) % widget.photos.length;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Image.network(
      widget.photos[_pos],
      gaplessPlayback: true,
    );
  }

  @override
  void dispose() {
    _timer.cancel();
    _timer = null;
    super.dispose();
  }
}

Note that there still might be some inconsistency the first time it goes through the photos because it is just loading them as it goes. The 'gaplessPlayback' flat should make the previous image stick around until the new one is fully loaded.