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