Creating a Swipe Button with Dismissible in Flutter

In this tutorial, we will explore how to create a swipe button using the Dismissible widget in Flutter. The swipe button will allow users to perform actions by swiping an item in a list. We'll implement this functionality using the SwipeButtonPage class, which extends StatefulWidget and utilizes the Dismissible widget. Let's dive into the code and understand how it works.

The code defines a Flutter class called SwipeButtonPage, which extends StatefulWidget. This means the class represents a widget whose state can change over time. The stateful widget is necessary to track and update the list of items as they are swiped.

The SwipeButtonPageState class is the state class associated with the SwipeButtonPage widget. It is responsible for maintaining the state of the widget and implementing the necessary methods.

Inside the _SwipeButtonPageState class, we define a List of Strings called "items." This list contains URLs of sample photos.

The build() method is overridden from the StatefulWidget and is where we define the UI for our widget. It returns a Scaffold widget, which provides a basic layout structure for the app's screen.

Within the Scaffold, we set the appBar property to display an AppBar with the title "Swipe Button Demo".

The body property of the Scaffold is set to a ListView.builder widget. This widget allows us to build a scrollable list efficiently. We provide the itemCount property with the length of the items list, which determines the number of items in the list.

For each item in the list, we create a Dismissible widget. The Dismissible widget allows us to make the list items swipable. We set the key property to a Key based on the current item's value to uniquely identify each item.

The direction property of the Dismissible widget is set to DismissDirection.horizontal, which means we can only swipe the items horizontally.

The onDismissed property is set to a callback function that will be invoked when an item is dismissed (swiped away). In this function, we remove the item from the items list using the removeAt() method. We also check the direction of the swipe using the direction parameter and handle different actions based on the swipe direction.

The background and secondaryBackground properties define the widgets that appear when the item is swiped in different directions. We use Containers with different colors and icons to represent the swipe actions. The background is displayed when swiping from left to right, while the secondaryBackground is displayed when swiping from right to left.

Inside the Dismissible widget, we define the child widget, which is the content of each list item. It consists of a Padding widget with a ListTile as its child. The ListTile displays the item's title and an Image widget that loads the image from the URL specified in the item list.

class SwipeButtonPage extends StatefulWidget {
  @override
  _SwipeButtonPageState createState() => _SwipeButtonPageState();
}

class _SwipeButtonPageState extends State<SwipeButtonPage> {
  List<String> items = [
    'https://api.slingacademy.com/public/sample-photos/1.jpeg',
    'https://api.slingacademy.com/public/sample-photos/2.jpeg',
    'https://api.slingacademy.com/public/sample-photos/3.jpeg',
    'https://api.slingacademy.com/public/sample-photos/4.jpeg',
    'https://api.slingacademy.com/public/sample-photos/5.jpeg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Swipe Button Demo'),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          final item = items[index];
          return Dismissible(
            key: Key(item),
            direction: DismissDirection.horizontal,
            onDismissed: (direction) {
              setState(() {
                items.removeAt(index);
              });
              if (direction == DismissDirection.startToEnd) {
                // Swiped from left to right
                // Handle the action you want for this direction
              } else if (direction == DismissDirection.endToStart) {
                // Swiped from right to left
                // Handle the action you want for this direction
              }
            },
            background: Container(
              color: Colors.red,
              child: const Align(
                alignment: Alignment.centerLeft,
                child: Icon(
                  Icons.heart_broken,
                  color: Colors.white,
                ),
              ),
            ),
            secondaryBackground: Container(
              color: Colors.green,
              child: const Align(
                alignment: Alignment.centerRight,
                child: Icon(
                  Icons.favorite,
                  color: Colors.white,
                ),
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: ListTile(
                title: Center(child: Text("Swipe here")),
                leading: Image.network(
                  item,
                  width: 60,
                  height: 60,
                  fit: BoxFit.cover,
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

In this tutorial, we explored how to create a swipe button using the Dismissible widget in Flutter. We implemented a SwipeButtonPage widget that allows users to swipe items in a list and perform actions based on the swipe direction. The Dismissible widget provides a convenient way to implement swipe functionality in Flutter apps. Feel free to customize the code and experiment with different actions and animations to enhance the user experience in your app.