Enable Swiping Left & Right with Callbacks for Flutter UI Widgets

Ever since we’re developing mobile applications using Flutter, we come across so many new features and functionalities which has improved user experience such a way that we can add more and more to provide quality UI experience. During a development of an application, I came across a requirement to add Swiping in Left and Right direction for a displayed item (Widgets) of a screen so a use can add his/her reply words to that swiped item. It was like we’re replying for a chat message that we have in WhatsApp, Microsoft Teams like apps. In this article we’ll see, what & how we can enable this functionality for our mobile application made with flutter.

To enable this functionality for a widget, we’ve to use a flutter package named swipe_to which will give power to a flutter widget so it can move in left & right direction ending up in a callback which we can use for further processing.

swipe_to | Flutter Package

Once we install this package, we only have to wrap our UI widgets with SwipeTo widget provided by this package. As a required parameter we only have to pass a child widget for which swiping will get enabled. See below code.

Here we’re having a Container widget wrapped inside SwipeTo widget displaying value of counter variable using Text widget.

But wait, is it really this much simple to enable swiping?

Of course, No right.

To enable swiping into particular direction left or right, we have to pass a callback which will get called when we perform swiping. To get it done, parameters onLeftSwipe & onRightSwipe need to be passed which matched to left & right swipe respectively. So here is how we’ll be extending our basic flutter created project. What we’ll be doing here, onLeftSwipe counter value will get decremented & onRightSwipe counter value will get incremented. Below is code how we’ll do it.

By adding this callbacks, we can perform swiping in left & right direction over our displayed Container widget. We can also see _counter value decrementing and incrementing when we perform swiping. Check result below.

Cool I guess, right.

In result widget, we can see it is displaying reply icon as a default icon over to left & right when we perform swipe over Container. We can also change it by passing an IconData value for iconOnRightSwipe & iconOnLeftSwipe respectively to display icons onRightSwipe and onLeftSwipe respectively. So let’s pass values for these parameters.

Now, the updated result will be like below.

Amazing, right.

This package also provide option to change color & size of displayed icon over left and right. By default it will take color from iconTheme & size equal to 26.0. Check details of package description over pub.dev.

One thing that we should keep a note here, if we want to enable swiping for a single direction, we have to pass a callback for that direction only eliminating other one. For an example, if we require only left swipe for our widget we only have to pass a callback for onLeftSwipe and the same will also work for onRightSwipe if we require only right swipe. But if we forgot to pass both,

A good round of applause for ourselves will be always waiting.

We can also handle more, where passing a double value for dx will set an end point of Offset(dx, 0) for right swipe & Offset(-dx,0) for left swipe of our wrapped widget.

We can also control duration of swipe animation by passing a Duration value to animationDuration parameter. (Make sure not to make user waiting for such a long time)

So here we’re done with how we can enable swiping in left or right direction for any of a widget breathing in our mobile application made by flutter.

More details about this package is here,

swipe_to | Flutter Package

“ Code is like humor. When you have to explain it, it’s bad.” — Cory House