Changing a variable doesn't change the view in flutter - flutter

Question

I have an array of image location strings.
I have an int called displayImage in my class, and when I initialize an instance of that class, I set the value of displayImage as 0. So I see the image corresponding to the first image in the array.
Then I call a function, which, after a timeout, changes the value of the int from 0 to 1, but I don't see the corresponding second image. The image doesn't update. How to get the image to change when the index displayImage of the array changes?
var images = ["amusement1.jpeg", "amusement2.jpg", "amusement3.png", "amusement4.jpeg",
"amusement5.jpeg", "amusement6.jpeg"];
class RandomWords extends StatefulWidget {
#override
_RandomWordsState createState() => _RandomWordsState(0);
}
class _RandomWordsState extends State<RandomWords> {
final _suggestions = <WordPair>[];
final _biggerFont = TextStyle(fontSize: 10.0);
int displayImage;
_RandomWordsState(firstImage) {
this.displayImage = firstImage;
}
Widget _buildRow(WordPair pair) {
return ListTile(
title: Text(
pair.asPascalCase,
style: _biggerFont,
)
);
}
final timeout = Duration(seconds: 3);
void handleTimeout() {
print(this.displayImage);
this.displayImage++;
print(this.displayImage);
}
switchImages () {
print("switching image");
const timeout = Duration(seconds: 3);
const ms = Duration(milliseconds: 1);
Timer startTimeout(milliseconds) {
var duration = milliseconds == null ? timeout : ms * milliseconds;
return Timer(duration, handleTimeout);
}
startTimeout(1000);
}
Widget _buildSuggestions() {
return ListView.builder(
padding: EdgeInsets.all(16.0),
itemBuilder: (context, i) {
if (i.isOdd) return Divider();
final index = i ~/ 2;
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
});
}
#override
Widget build(BuildContext context) {
switchImages();
String imageUrl = "assets/amusement/" + images[displayImage];
final wordPair = WordPair.random();
return Image(image: AssetImage(imageUrl));
}
}

Answer 1

Try updating this:
void handleTimeout() {
print(this.displayImage);
this.displayImage++;
print(this.displayImage);
}
To this:
void handleTimeout() {
print(this.displayImage);
setState((){
this.displayImage++;
});
print(this.displayImage);
}
To make the Widget rebuild, you should trigger the change using the setState method.