I made a pseudo-3d dice rolling page. It selects a random pair of gifs of dices and updates the state. At first, my problem was Flutter is caching images and does not update gifs. I found this _updateImgWidgetOne() and _updateImgWidgetTwo() (in the code below) method solutions in the internet. 9/10 of time it works very well. But sometimes, the GIF image does not update in cache and calculates output wrong.
Here is an example video and full code below. (At second roll when it says 5+5 = 10 but does not update the second dice as 5)
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bounceable/flutter_bounceable.dart';
import 'package:google_fonts/google_fonts.dart';
class DicePage extends StatelessWidget {
const DicePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: DiceApp(), debugShowCheckedModeBanner: false);
}
}
class DiceApp extends StatefulWidget {
const DiceApp({Key? key}) : super(key: key);
@override
_DiceAppState createState() => _DiceAppState();
}
class _DiceAppState extends State<DiceApp> {
String url = 'images/dice6/white/outputs/sw-new.png'; //placeholder image when page opened first time.
Widget _pic1 = Image.asset(
'images/dice6/white/outputs/sw-new.png',
);
Widget _pic2 = Image.asset(
'images/dice6/white/outputs/sw-new.png',
);
var _dice1 = 0;
var _dice2 = 0;
_updateImgWidgetOne() async {
_dice1 = Random().nextInt(6) + 1;
final ByteData data =
await rootBundle.load('images/dice6/white/outputs/newdice-$_dice1.gif');
_pic1 = Image.memory(
data.buffer.asUint8List(),
scale: 1,
);
}
_updateImgWidgetTwo() async {
_dice2 = Random().nextInt(6) + 1;
final ByteData data =
await rootBundle.load('images/dice6/white/outputs/newdice-$_dice2.gif');
_pic2 = Image.memory(
data.buffer.asUint8List(),
scale: 1,
);
}
_updateImgs() async {
setState(() {
_updateImgWidgetOne();
_updateImgWidgetTwo();
});
}
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
// backgroundColor: const Color(0xff202124),
backgroundColor: Colors.white,
body: Center(
child: SizedBox.expand(
child: FittedBox(
child: Bounceable(
curve: Curves.ease,
scaleFactor: 0.2,
onTap: () {
_updateImgs();
print(_dice1);
print(_dice2);
},
// splashColor: Colors.transparent,
// hoverColor: Colors.transparent,
// focusColor: Colors.transparent,
// highlightColor: Colors.transparent,
child: Container(
//color: const Color(0xff202124),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
_pic1,
_pic2,
],
),
),
),
),
),
),
floatingActionButton: Text(
'$_dice1 + $_dice2 = ${_dice1 + _dice2}',
style: GoogleFonts.ubuntu(
textStyle: Theme.of(context).textTheme.headline1,
fontSize: MediaQuery.of(context).size.width * 0.1,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.italic,
color: Colors.black,
),
));
}
}
