UX Challenges, Container Animation And Cards

Sure, I could say first you create a stateless widget then in the build function you return a Card widget, etc. etc.; but that would not get you to the state of designing awesome flutter apps and would be quite boring. Let’s do something a little more fun, say create some animation of a card in list view that focuses user attention on that item in the list view.

Wrong Animation

Some of you might think this is neat:

Any animation that gets in the way of a user and the app content is not good animation! For container animation we need to ask what the role of that container is, and with Card widgets that role can be different depending upon what is included in that card widget.

Cards in a list view tend to be about the role of displaying content and some UI elements to interact with that content. That implies that our animation should refocus the user to view the details of that item. That then means that the animation of the reveal helps accent the detail.

Here, let me show you what we are building: