Slidable Package

Introduction of Slidable Package

The flutter slidable package in Flutter provides an easy way to create swipeable widgets with various actions. It’s particularly useful for creating list items that can be swiped left or right to reveal action buttons, such as delete, edit, or share options.

Key Features:

• Swipeable Widgets: Allows items to be swiped left or right.
• Customizable Actions: Add multiple actions with customizable icons, colors, and labels.
• Dismissible Actions: Support for dismissing items after an action is triggered.
• Variety of Slide Actions: Offers different types of slide actions like icons, buttons, and more.

Installation: To use the flutter_slidable package, add it to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  flutter_slidable: ^1.2.0  # Use the latest version

Run flutter pub get to install the package.

Importing the Package:

import 'package:flutter_slidable/flutter_slidable.dart';

Basic Usage: Here’s an example of how to use the Slidable widget in a Flutter application:

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(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Slidable Example'),
        ),
        body: ListView(
          children: List.generate(10, (index) {
            return Slidable(
              key: ValueKey(index),
              startActionPane: ActionPane(
                motion: ScrollMotion(),
                children: [
                  SlidableAction(
                    onPressed: (BuildContext context) {
                      // Perform some action
                    },
                    backgroundColor: Colors.blue,
                    foregroundColor: Colors.white,
                    icon: Icons.edit,
                    label: 'Edit',
                  ),
                ],
              ),
              endActionPane: ActionPane(
                motion: ScrollMotion(),
                children: [
                  SlidableAction(
                    onPressed: (BuildContext context) {
                      // Perform some action
                    },
                    backgroundColor: Colors.red,
                    foregroundColor: Colors.white,
                    icon: Icons.delete,
                    label: 'Delete',
                  ),
                ],
              ),
              child: ListTile(
                title: Text('Item $index'),
              ),
            );
          }),
        ),
      ),
    );
  }
}

Properties of Slidable Package:

key: A unique key for the slidable widget, useful for managing state.

key: ValueKey(index),

startActionPane: Defines the action pane that appears when swiping from the start (left) side.

startActionPane: ActionPane(
  motion: ScrollMotion(),
  children: [
    SlidableAction(
      onPressed: (context) { /* action */ },
      backgroundColor: Colors.blue,
      foregroundColor: Colors.white,
      icon: Icons.edit,
      label: 'Edit',
    ),
  ],
),

endActionPane: Defines the action pane that appears when swiping from the end (right) side.

endActionPane: ActionPane(
  motion: ScrollMotion(),
  children: [
    SlidableAction(
      onPressed: (context) { /* action */ },
      backgroundColor: Colors.red,
      foregroundColor: Colors.white,
      icon: Icons.delete,
      label: 'Delete',
    ),
  ],
),

child: The widget to display inside the slidable, typically a ListTile or any other widget.

child: ListTile(
  title: Text('Item $index'),
),

motion: The type of motion for the slide action. Common options include ScrollMotion, StretchMotion, and DrawerMotion.

motion: ScrollMotion(),

SlidableAction: Represents an individual action in the action pane. Common properties include:

• onPressed: Callback when the action is pressed.
• backgroundColor: Background color of the action.
• foregroundColor: Foreground color (icon and text) of the action.
• icon: Icon for the action. label: Label for the action.

SlidableAction(
  onPressed: (context) { /* action */ },
  backgroundColor: Colors.blue,
  foregroundColor: Colors.white,
  icon: Icons.edit,
  label: 'Edit',
),

Example Usage:

Slidable(
  key: ValueKey(item.id),
  startActionPane: ActionPane(
    motion: ScrollMotion(),
    children: [
      SlidableAction(
        onPressed: (context) {
          // Handle edit action
        },
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
        icon: Icons.edit,
        label: 'Edit',
      ),
    ],
  ),
  endActionPane: ActionPane(
    motion: ScrollMotion(),
    children: [
      SlidableAction(
        onPressed: (context) {
          // Handle delete action
        },
        backgroundColor: Colors.red,
        foregroundColor: Colors.white,
        icon: Icons.delete,
        label: 'Delete',
      ),
    ],
  ),
  child: ListTile(
    title: Text('Item $index'),
  ),
)

Final Code: This is the final code with the combination of some above Flutter Slidable package properties.

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

class Homepage extends StatelessWidget {
  const Homepage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Slidable Example'),
        ),
        body: Center(
          child: Slidable(
            startActionPane: ActionPane(
              motion: ScrollMotion(),
              children: [
                SlidableAction(
                  onPressed: (context) {},
                  backgroundColor: Colors.red,
                  foregroundColor: Color.fromARGB(255, 255, 255, 255),
                  icon: Icons.delete,
                  label: 'Delete',
                  padding: EdgeInsets.all(0.6),
                )
              ],
            ),
            endActionPane: ActionPane(
              motion: ScrollMotion(),
              children: [
                SlidableAction(
                  onPressed: (context) {},
                  backgroundColor: Colors.green,
                  foregroundColor: Color.fromARGB(255, 255, 255, 255),
                  icon: Icons.edit,
                  label: 'Edit',
                  padding: EdgeInsets.all(0.6),
                )
              ],
            ),
            child: Container(
              color: Colors.grey[300],
              child: ListTile(
                title: Text('Ethan John'),
                subtitle: Text('+1 921 123 4213'),
                leading: Icon(
                  Icons.person,
                  size: 40,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

The flutter slidable package provides a powerful and flexible way to add swipeable actions to your Flutter application, enhancing the user experience with interactive and customizable actions.

Thank for visiting Hybrid App Development
Posted by Hussam HM