Flutter card dealing effect

Question

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).

Comments

[Chirag Bargoojar]

You can use rive.app to create complex animations.

[dor]

rive.app seems a bit excessive for what I'm trying to accomplish, don't you think?

[dor]

While this is a good solution, and indeed solves the issue if the number of columns were predefined, I would like the capability that gridview has which makes it responsive dependent on the width of the children. Is there a way to combine the two approaches?

[WSBT]

@dor If you want to responsiveness, use LayoutBuilder to get the parent's constraints and then calculate the grid size yourself.