Why does not the picture change for every period of time? - flutter

Question

I want my flutter web page display a photo , and change for every 3 seconds to display another photo ..
here is my code
class _contactPageState extends State<contactPage> {
List<String> randomPics= ['profiles/github.png', 'profiles/linkedIn.png', 'profiles/stack.png'];
Timer timer;
var random= Random();
String photo;
#override
void initState() {
photo = randomPics[random.nextInt(randomPics.length)];
openLink = new linksToOpen();
super.initState();
timer = new Timer(new Duration(seconds: 1), ( ){
setState(() {
photo= randomPics[random.nextInt(randomPics.length)];
print('${photo}');
});
});
}
#override
Widget build(BuildContext context) {
Container(
child: Image(image : AssetImage(photo),gaplessPlayback: true,),
width: 400, height: 400,
),
What is the problem with my code ?
Please , can anyone help me !

Answer 1

I did some test and I think this could work for you:
import 'dart:async';
import 'dart:math';
import 'package:flutter/widgets.dart';
class ContactPageState extends StatefulWidget {
ContactPageState({Key key}) : super(key: key);
#override
_ContactPageState createState() => _ContactPageState();
}
class _ContactPageState extends State<ContactPageState> {
List<String> randomPics = ['assets/a.jpg', 'assets/b.jpg', 'assets/c.jpg'];
String photo;
final random = new Random();
void initState() {
WidgetsBinding.instance.addPostFrameCallback((_) => configureTimer());
super.initState();
}
configureTimer() {
Timer.periodic(Duration(milliseconds: 3000), (timer) {
final int index = random.nextInt(randomPics.length);
setState(() {
photo = randomPics[index];
debugPrint('Select picture $photo in index $index');
});
});
}
#override
Widget build(BuildContext context) {
return Container(
child: Image(
image: AssetImage(photo != null ? photo : 'assets/a.jpg'),
gaplessPlayback: true,
),
width: 400,
height: 400,
);
}
}

Answer 2

For a quick fix, you need to add function setStatus ... as a callback function so it can call itself infinitely.
void _nextPic(){
setState(() {
photo= randomPics[random.nextInt(randomPics.length)];
print('${photo}');
});
timer = new Timer(new Duration(seconds: 1), _nextPic);
}
This function create another timer after this one is done. So you can just need to create the first timer in initState...
#override
void initState() {
photo = randomPics[random.nextInt(randomPics.length)];
super.initState();
timer = new Timer(new Duration(seconds: 1), _nextPic);
}

Answer 3

For one thing, you will need to specify 3 seconds instead of 1. Another, you may be looking for timer.periodic to have this execute multiple times (until you tell it to stop) instead of a single timer countdown that happens starting from state initialization.
An example, see selected answer here:
Flutter Countdown Timer
Documentation:
https://api.flutter.dev/flutter/dart-async/Timer/Timer.periodic.html