Open In App

Flutter – Slidable

Last Updated : 04 Mar, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Slidable in an application can be used to perform a wide range of tasks with just a simple swipe to either right or left on the tile. It not only makes the UI very user-friendly but also saves a lot of time in doing trivial tasks which if done in other ways can be hectic and redundant to design. In this article, we will look into the process of designing a slidable for your application.

Steps to implement Slidable in Flutter Application

Step 1 : Adding Dependency

You can import the flutter_slidable dependency in the pubspec.yaml file as shown below:

flutter_slidable: ^4.0.0

Now, click on the pub get button in android studio or visual studio code or run the below command in terminal.

flutter pub get

Step 2 : Importing Dependency

To import the dependency in the main.dart file use the following:

import 'package:flutter_slidable/flutter_slidable.dart';


Step 3 : Creating App Structure

Use a StatelessWidget to give the application a simple structure as shown below:

Dart
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Slidable ',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'GeeksForGeeks'),
    );
  }
}


Step 4 : Creating Homepage

Use a StatefulWidget to set up the homepage for the application that would in the future hold the tiles that can be swiped in either direction to perform tasks assigned to them as shown below:

Dart
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
   var items = List<int>.generate(20, (index) => index + 1);
   ...


Step 5 : Assigning Actions

As the slides are swiped actions will appear depending upon the direction of the slide. In both the case two actions will be assigned to each swipe as following:

  • For left to right slide:
    1. Delete tile
    2. Share tile
  • For the right to left slide:
    1. Archive tile
    2. Save tile

To achieve above functionality follow below code:

Dart
Slidable(
    key: const ValueKey(0),
        
        // Define actions for the left side of the list item
        startActionPane: ActionPane(
            motion: const ScrollMotion(),
            children: [
                // Define a delete action
                SlidableAction(
                  onPressed: (BuildContext context) {
                    setState(() {
                      items.removeAt(index);
                    });
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text('Item deleted'),
                        duration: Duration(seconds: 2),
                      ),
                    );
                  },
                  backgroundColor: const Color(0xFFFE4A49),
                  foregroundColor: Colors.white,
                  icon: Icons.delete,
                  label: 'Delete',
                ),
                // Define a share action
                SlidableAction(
                  onPressed: (BuildContext context) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text('Item shared'),
                        duration: Duration(seconds: 2),
                      ),
                    );
                  },
                  backgroundColor: Color(0xFF21B7CA),
                  foregroundColor: Colors.white,
                  icon: Icons.share,
                  label: 'Share',
                ),
              ],
            ),
            // Define actions for the right side of the list item
            endActionPane: ActionPane(
              motion: ScrollMotion(),
              children: [
                // Define an archive action
                SlidableAction(
                  flex: 2,
                  onPressed: (BuildContext context) {
                    setState(() {
                      items.removeAt(index);
                    });
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text('Item archived'),
                        duration: Duration(seconds: 2),
                      ),
                    );
                  },
                  backgroundColor: Color(0xFF7BC043),
                  foregroundColor: Colors.white,
                  icon: Icons.archive,
                  label: 'Archive',
                ),
                // Define a save action
                SlidableAction(
                  onPressed: (BuildContext context) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text('Item Saved'),
                        duration: Duration(seconds: 2),
                      ),
                    );
                  },
                  backgroundColor: Color(0xFF0392CF),
                  foregroundColor: Colors.white,
                  icon: Icons.save,
                  label: 'Save',
                ),
              ],
            ),
            // Define the main content of the list item
            child: ListTile(title: Text('Item ${items[index]}  ')),
          );


To know more about snackbar in flutter refer this article: Flutter – Snackbar


Complete Source Code (main.dart):

Dart
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Slidable',
      debugShowCheckedModeBanner: false,
      home: MyHomePage(title: 'GeeksForGeeks'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({super.key, required this.title});

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var items = List<int>.generate(20, (index) => index + 1);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          // Return a Slidable widget for each list item
          return Slidable(
            key: const ValueKey(0),
            // Define actions for the left side of the list item
            startActionPane: ActionPane(
              motion: const ScrollMotion(),
              children: [
                // Define a delete action
                SlidableAction(
                  onPressed: (BuildContext context) {
                    setState(() {
                      items.removeAt(index);
                    });
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text('Item deleted'),
                        duration: Duration(seconds: 2),
                      ),
                    );
                  },
                  backgroundColor: const Color(0xFFFE4A49),
                  foregroundColor: Colors.white,
                  icon: Icons.delete,
                  label: 'Delete',
                ),
                // Define a share action
                SlidableAction(
                  onPressed: (BuildContext context) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text('Item shared'),
                        duration: Duration(seconds: 2),
                      ),
                    );
                  },
                  backgroundColor: Color(0xFF21B7CA),
                  foregroundColor: Colors.white,
                  icon: Icons.share,
                  label: 'Share',
                ),
              ],
            ),
            // Define actions for the right side of the list item
            endActionPane: ActionPane(
              motion: ScrollMotion(),
              children: [
                // Define an archive action
                SlidableAction(
                  flex: 2,
                  onPressed: (BuildContext context) {
                    setState(() {
                      items.removeAt(index);
                    });
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text('Item archived'),
                        duration: Duration(seconds: 2),
                      ),
                    );
                  },
                  backgroundColor: Color(0xFF7BC043),
                  foregroundColor: Colors.white,
                  icon: Icons.archive,
                  label: 'Archive',
                ),
                // Define a save action
                SlidableAction(
                  onPressed: (BuildContext context) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text('Item Saved'),
                        duration: Duration(seconds: 2),
                      ),
                    );
                  },
                  backgroundColor: Color(0xFF0392CF),
                  foregroundColor: Colors.white,
                  icon: Icons.save,
                  label: 'Save',
                ),
              ],
            ),
            // Define the main content of the list item
            child: ListTile(title: Text('Item ${items[index]}  ')),
          );
        },
      ),
    );
  }
}

Output:




Next Article

Similar Reads