FLUTTER : SWIPE YOUR WIDGET FOR MORE ACTION ITEMS

4 min readJul 14, 2018

Scenario:

To get action items on a widget swipe towards left.

Design :

The dismissible class available in flutter is used to dismiss a card, i.e., dragging or flinging the widget in a Dismiss Direction to make it’s child slide out of the view. But in the above scenario,it is required to display action buttons on swiping the widget(card). Since there is no default class in Flutter to address this scenario, the widget has been designed using classes like Layout notification, Scroll notification etc., .The overall idea is, whenever the layout of the widget changes, a notification will be sent to its ancestors, such that a new size of the layout is identified. After that a call back is written extending Render Box class where the child mimics and paint it’s layout with the context of action items that are defined.

Implementation:

As per design, the solution for the above scenario is structured into three parts namely “Introducing size change notification class” , “Implementing notification in swipe widget design” , “Modifying Build method of main class”.

The below steps explains the three parts sequentially.

Introducing size change notification class:

Step 1:

Create a class extending LayoutChangeNotification class which is used to dispatch notifications whenever there is a change in layout . This class should be as follows

Step 2:

Create a notifier as below that listens the notification dispatched by the widget.

Step 3:

After the notifier is created, define the size changed with the call back that is specified in the previous code extending the Render Proxy box class. The method of this class will mimic the child of the context where action items are defined.

Implementing notification in swipe widget design:

Step1:

Create a class defining the actions items that has to be positioned and this should be as follows.

Step2:

Create a class to define the particulars for the left slide swipe.

Step 3:

The state of the above class should hold a method to handle notification. This notification indicates that the widget has been moved towards the left.

Step4:

Define build method for the above created class as follows.This method consists of two return statements, one for the notifications and the other to position the action items that are specified.

Define the return 1 as below:

This return has layout change notification class which has been defined previously. This method sends a notification whenever there is change in the layout size.

Before return 2 is defined, the necessities for the same has to be defined.

Necessities 1 :

Here two lists has to be specified. One is for knowing the gesture and other one is to place the action items.

Necessities 2:

As specified, the first list widget is for gesture,Inkwell class is required to be added which helps the placement of on tap method. So, whenever the user taps the widget, this method is called. Also the action buttons for the actions has to defined.

Necessities 3:

Scroll view of the widget is defined here. The scroll direction will be defined as an horizontal since the swipe is towards left direction.

Define the return 2 as below:

Here the return consists of a Stack class, whose children’s are the necessities that are defined above.

Modify the context in main class as below:

Step1 :

Here the buttons of the list swipe is defined in an item builder so that each item can be swiped to perform the action by clicking on the buttons placed.