Flutter card dealing effect

Issue

I’m looking to create a card dealing effect such that there’s a deck of cards, then on click, it deals the cards unto a grid view (the card moves into position in the grid) in order for the user to play a memory game. It is very similar to a hero animation, except it is not a transition (or perhaps it is? I’m not sure)

Is there a way to do this in Flutter?

Solution

Instead of trying to use a GridView, you could put your cards (a series of Image widgets, I assume) in a Stack, then use AnimatedPositioned widget to move it. For example:

  Stack(
    children: [
      AnimatedPositioned(
        duration: const Duration(milliseconds: 500),
        left: 20, // try change this to `0` and "hot reload"
        top: 20,
        child: FlutterLogo(),
      ),
      AnimatedPositioned(
        duration: const Duration(milliseconds: 500),
        left: 30,
        top: 30,
        child: FlutterLogo(),
      ),
    ],
  ),

Like the above code example, but instead of using hardcoded values such as 20, you can use a variable like _slided ? 20 : 0. Whenever you want the animation to occur, just toggle the boolean variable and call set state.

To make it more realistic, you can pass in curve: Curves.easeOut to the AnimatedPositioned widget, so the moving animation would go faster in the beginning and gradually slow down (like cards sliding on a table and gradually come to a full stop due to friction).

Answered By – user1032613

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)