Flutter — Implementing Micro-interactions — Scrollable Horizontal List View

Lately I have been obsessed with horizontal list view and love how designers come up with different version of it. I would love to see more of them in real mobile apps as they can improve the UX if used appropriately.

Here we have a design “The music interface” by Alisa for Redscarf

The music interface

I am concentrating on creating the scrollable horizontal list view with animations so as to keep this article short.

Final Result

If you are new to animation in flutter, I would suggest going through the my basic of animation post below.

Flutter Animation basics explained with Stacked Cards

Creating the Card Widget and Model

I always start by creating the small and reusable widget and work my way up. This is one of the reason I love flutter. So the cards displaying the music fits the bill perfectly. I also like to have a model class associated with it so that I can easily create array of data and pass it to create those cards.

By separating the Model and Widget to build the Music card, I can easily pass the list of Model object to another function to create a list of Music Card Widget which you can see below.

Jumping to the fun part — Animations

We have all the things setup for creating the animation for our list view. I have created a separate Widget called HorizontalSlidingCards which accepts a input of cards.

Controlling the scrolling

We should have the cards in horizontal list view but the scrolling is not continuous and we can override default scrolling behaviour that in list view using the physics property. When we assign NeverScrollableScrollPhysics to physics property, List view will not have the default scrolling. For controlling the scrolling on our own, we can make use of a method inside Scroll controller called animateTo() which takes in offset ( how much to scroll considering 0.0 as start ) and duration for the scroll animation.

List view is surrounded by GestureDetector Widget so to capture the swipes on the screen.

return GestureDetector(
  onHorizontalDragEnd: _onHorizontalDragEnd,
  child: ListView(
    physics: NeverScrollableScrollPhysics(),
    controller: _scrollController,
    scrollDirection: Axis.horizontal,
    children : [....]
  )
)
...
_scrollController.animateTo(offset * _currentIndex, duration:   Duration(milliseconds: 400), curve: Curves.easeOut);

Tip: This way is really good if you like to convert any list view into some form of carousel.

Offset Animation

There are four different animations to perform based on swipe (left or right), position of card item (top or bottom). We can define these as Animation<Offset> and card which is animating are being given these values.

All these animation have begin value as 0.0 as they have to start at current position. end value is some Offset value which was working for me in this example.

When the gesture is performed, we can determine if the gesture is Left or Right and based on that call the relevant animation on relevant cards

Illusion of moving card independent of scrolling

In order to create desired movement for the cards, I have found that the animation defined before has to move forward and reverse to create the illusion of moving independent of the scroll view. The reverse animation is also due to the fact that we would like to return to the original position after moving a little bit in the X direction. Basically it will move for a particular offset and then return back to 0.0 giving the illusion that it’s moving independently of the scrolling list view.

Rest of the code is to pick which animation to apply to which card. If you would like to see those as well head to below Github link.

sriram15/Fluter_ListView_Microinteraction

Conclusion

I hope you have learned a thing or two about animation and achieving easy micro-interaction in flutter. Now your designer can be happy when you are implementing his small but vastly significant micro-interactions into the app to enhance the User Experience. This post is mainly to inspire more people to try and implement these in your app. If you like a more detailed explanation of these, Please leave a comment below and I would consider creating more detailed content.

Read my other articles on Flutter

Flutter Animation basics explained with Stacked Cards

Flutter — Todo Animation — Development Journey

Please feel free to ask any question or leave better ways of doing this in the comments. If this article has helped you in any way please share and hit that clap button👏 👏👏 . Happy Fluttering !

Sriram Thiagarajan — Programmer, Mobile Technology Enthusiast who is passionate about providing the best User Experience. You can follow me on Github, Twitter.

The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.