Flutter Slidable — Deep Dive

If you’re a Flutter lover like me, you would love to play with all the widgets that’s available out there. I played with the flutter_slidable package today and decided to document my experience here.

Flutter Slidable is also referred as swipe to action widget by the Fluttizens. Here’s a step-by-step way to implement it on your app.

1. Add the flutter_slidable package in your pubspec.yaml and make sure the alignment of adding the package is correct.

dependencies:
  flutter:
    sdk: flutter
  flutter_slidable: ^0.6.0 //Add this line

Or the better approach would be to run the following command from the terminal:

flutter pub add flutter_slidable

It’ll automatically add the latest version of the package in your app with the correct alignment.

2. Import the package inside the dart file where you need to implement the Slidable() widget with the following import:

import 'package:flutter_slidable/flutter_slidable.dart';

3. For this example we’ll first generate a list of int say 1–100 and store them in a variable:

final List listOfHundred = List.generate(100, (index) => index + 1);

We’ll use this list to create a list of Card() to add a bit of styling to these numbers so that they look nice.

ListView.builder(
  itemBuilder: (_, index) {
     return Container(
       width: double.infinity,
       height: SizeConfig.blockSizeVertical! * 10,
       color: Colors.black12,
       child: Card(
         child: Center(
          child: Text('${listOfHundred[index]}'),
       ),
    ),
  );
}

4. Now the final showdown. We’ll add the Slidable() in our app. Just refactor Container() to wrap with Slidable() widget. So the complete code will look like the following:

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
import '../size_config.dart';
class SlidableWidget extends StatelessWidget {
  final List listOfHundred = List.generate(100, (index) => index + 1);
  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return ListView.builder(
      itemBuilder: (_, index) {
        return Slidable(
          actionPane: SlidableScrollActionPane(),
          actions: [
            IconSlideAction(
              closeOnTap: true,
              icon: Icons.delete,
              onTap: () => print('delete'),
              color: Colors.red,
            ),
            IconSlideAction(
              closeOnTap: true,
              icon: Icons.two_wheeler,
              onTap: () => print('two wheeler'),
              color: Colors.blueAccent,
            ),
            IconSlideAction(
              closeOnTap: true,
              icon: Icons.car_repair,
              onTap: () => print('car repair'),
              color: Colors.yellow,
            ),
            IconSlideAction(
              closeOnTap: true,
              icon: Icons.train,
              onTap: () => print('train'),
              color: Colors.green,
            ),
          ],
          secondaryActions: [
            IconSlideAction(
              closeOnTap: true,
              icon: Icons.delete,
              onTap: () => print('delete'),
              color: Colors.red,
            ),
            IconSlideAction(
              closeOnTap: true,
              icon: Icons.two_wheeler,
              onTap: () => print('two wheeler'),
              color: Colors.blueAccent,
            ),
            IconSlideAction(
              closeOnTap: true,
              icon: Icons.car_repair,
              onTap: () => print('car repair'),
              color: Colors.yellow,
            ),
            IconSlideAction(
              closeOnTap: true,
              icon: Icons.train,
              onTap: () => print('train'),
              color: Colors.green,
            ),
          ],
          child: Container(
            width: double.infinity,
            height: SizeConfig.blockSizeVertical! * 10,
            color: Colors.black12,
            child: Card(
              child: Center(
                child: Text('${listOfHundred[index]}'),
              ),
            ),
          ),
        );
      },
    );
  }
}

We’ll soon dive deeper in the same article to learn about all it’s properties.

Let’s connect here:
1. Twitter: https://twitter.com/devmanishpaul
2. Instagram: https://www.instagram.com/manishpaul.dev/