setState function not updating image under stateful widget - flutter

Question

I was trying to build Dice Game in which if users click the image should be changed from the asset folder but the image is not changing but the value in the terminal is updating setState Method is not working properly maybe
import 'package:flutter/material.dart';
import 'dart:math';
void main() {
return runApp(
MaterialApp(
home: Scaffold(
backgroundColor: Colors.red,
appBar: AppBar(
title: Center(child: Text('Dicee')),
backgroundColor: Colors.red,
),
body: DicePage(),
),
),
);
}
class DicePage extends StatefulWidget {
#override
_DicePageState createState() => _DicePageState();
}
class _DicePageState extends State<DicePage> {
#override
Widget build(BuildContext context) {
int leftDiceNumber = 5;
int rightDiceNumber = 2;
return Center(
child: Row(
children: <Widget>[
Expanded(
child: FlatButton(
onPressed: (){
setState(() {
leftDiceNumber = Random().nextInt(6) + 1;
print('$leftDiceNumber');
});
},
child: Image.asset('images/dice$leftDiceNumber.png'),
),
),
Expanded(
child: FlatButton(
onPressed: (){
setState(() {
rightDiceNumber = Random().nextInt(6) + 1;
print('$rightDiceNumber');
});
},
child: Image.asset('images/dice$rightDiceNumber.png'),
),
),
],
),
);
}
}
it should show the updated images

Answer 1

You need to move your variables outside of the build method. They are being reset on each build.
import 'package:flutter/material.dart';
import 'dart:math';
void main() {
return runApp(
MaterialApp(
home: Scaffold(
backgroundColor: Colors.red,
appBar: AppBar(
title: Center(child: Text('Dicee')),
backgroundColor: Colors.red,
),
body: DicePage(),
),
),
);
}
class DicePage extends StatefulWidget {
#override
_DicePageState createState() => _DicePageState();
}
class _DicePageState extends State<DicePage> {
int leftDiceNumber = 5;
int rightDiceNumber = 2;
#override
Widget build(BuildContext context) {
return Center(
child: Row(
children: <Widget>[
Expanded(
child: FlatButton(
onPressed: (){
setState(() {
leftDiceNumber = Random().nextInt(6) + 1;
print('$leftDiceNumber');
});
},
child: Image.asset('images/dice$leftDiceNumber.png'),
),
),
Expanded(
child: FlatButton(
onPressed: (){
setState(() {
rightDiceNumber = Random().nextInt(6) + 1;
print('$rightDiceNumber');
});
},
child: Image.asset('images/dice$rightDiceNumber.png'),
),
),
],
),
);
}
}