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.
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 displayedicon
over left and right. By default it will takecolor
fromiconTheme
& 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 ofOffset(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 toanimationDuration
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,
“ Code is like humor. When you have to explain it, it’s bad.” — Cory House