Search code examples
flutterdartdice

Dice Roll Animation Flutter


I have built dice roll animation using asset images but the image is updating only once in last but the random dice number is generated 6 times using loop.

import 'package:dicee/dice_model.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  return runApp(
    MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: ChangeNotifierProvider<DiceModel>(
          child: DicePage(),
          create: (BuildContext context) => DiceModel(),
        )),
  );
}

class DicePage extends StatelessWidget {
  void updateDices(DiceModel dice) {
    for (int i = 0; i < 6; i++) {
      print(i);
      sleep(Duration(milliseconds: 1000));
      dice.generateDiceOne();
    }
  }

  @override
  Widget build(BuildContext context) {
    List<String> _diceOneImages = [
      "images/dice1.png",
      "images/dice2.png",
      "images/dice3.png",
      "images/dice4.png",
      "images/dice5.png",
      "images/dice6.png",
    ];
    final dice = Provider.of<DiceModel>(context);
    final c = dice.diceOneCount;
    var img = Image.asset(
      _diceOneImages[c - 1],
      gaplessPlayback: true,
    );
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Row(
          children: <Widget>[
            Expanded(
              child: GestureDetector(
                onTap: () => updateDices(dice),
                child: img,
              ),
            ),
          ],
        ),
      ],
    );
  }
}```

**DiceModel**

```import 'dart:math';

import 'package:flutter/foundation.dart';

class DiceModel with ChangeNotifier {
  int diceOne = 1;

  int get diceOneCount => diceOne;

  void generateDiceOne() {
    diceOne = Random().nextInt(5) + 1;
    print("diceOne: $diceOne");
    notifyListeners();
  }
}```


Solution

  • The problem is you are calling sleep(Duration(milliseconds: 1000));. If you check your logs you should be getting an UnsupportedError with a message of "This embedder disallows calling dart:io's sleep()". This function is only going to work on isolates (Dart threads) other than the main/UI isolate. Because of this, the next line of code dice.generateDiceOne(); is never executed.

    Make updateDices async instead and replace sleep with await Future.delayed(const Duration(seconds: 1));.