Flutter 'Flip Card' randomly pick a different picture on each flip - flutter

Question

I am creating a Flutter app using the Flip Card Package. I would like to be able to flip a card and see a randomly selected image. Example: Flash cards, one side is a static image, I flip it to see a picture of a dog. I then tap again and it flips to back to the static image. I tap again, and I see a picture of a cat, etc...
I was able to get it all set up. The card flips back and forth but it is not randomly selecting a new card unless I restart the build after each flip. So, I am missing a piece somewhere that tells the app to pick again. Your help would be super appreciated!
Flip Card description https://pub.dev/packages/flip_card
snippet of code

Answer 1

Just as a tip as it seems you are new to SO - please post the code as text so that we can paste is in an IDE and try to run it. As an image its much harder to replicate your issue. Just a tip for going forward. Otherwise, welcome to SO!
So for your issue, I am not certain exactly why since I cannot see the entire context within that snippet BUT i suspect its because the card doesn't know it needs to rebuild since its just being replaced by another image but it doesn't know its a new image.
You can create a Widget class thats stateless and pass in the path. The Key change will ensure that the widget gets rebuilt:
The Widget class:
class FlipCardDetails extends StatelessWidget {
final String imagePath;
const FlipCardDetails({Key key, #required this.imagePath}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
child: Stack(
children: <Widget>[
Image.asset(
this.imagePath,
key: ValueKey<String>(imagePath),
)
],
)
);
}
}
Then in your main code where it says:
back: Container(child: _cardDetails()),
You can replace this with:
back: FlipCardDetails(imagePath: <Provide the image path>);
You can create a key based on the image path itself like so:
key: ValueKey<String>(imagePath)
This all would only work if there is a function you can run when the person clicks the card that would flip the card. That way you can run your randomizer and provide the image path to the widget.
Instead if you can't and the widget needs to calculate its own random path, then make it stateful, and on initState change the image path. That should work as well.
Without more context I can't really be sure if this is right or which solution works better. Let me know and I can to advise more.

Answer 2

I think that the problem is that your calling the 'Random' function only once when initializing your card. Try adding a function in which you call the Random function to change your '_random' and your 'element' and call it every time the card is flipped.You can do that by using the 'onFlipDone' function field of the FlipCard.