How to implement the Slide-to-Act Widget in Flutter

One thing that makes Flutter really cool is its many different rich widgets. From simple parts to fancy design elements, Flutter gives developers lots of tools to make rich and beautiful-looking screens.
One of the beautiful widgets is the Flutter Slide To Act Widget, which is a widget that allows user to slide their finger on the screen to perform a specific function, instead of the general boring way of just clicking on a button or widget.

Without wasting any time, let's dive into coding.

Note: This article assumes you already have the basic knowledge of creating and running a project in Flutter using either Android Studio or VS Code. If you don’t, you can kindly click here to go to my tutorial on how to get started with Flutter.

The first thing we will do is to add the dependency, go to pub.dev and search for Flutter Slide To Act in the search bar or just click on this link which will take you to directly to the slide_to_act page.

There are two ways in which you can install the Slide To Act dependency, just like every other dependency.

Copy the slide_to_act with the version that’s there (for example: slide_to_act 2.0.2 which is the current version as at the time of writing this article), and go to your pubspec.yaml file, under dependencies, flutter, paste the copied text there, and press Ctrl+S to save. Flutter will automatically take care of downloading the dependency.

Make sure that you are directly under the dependencies, and not under Flutter. See image below

The second way is to install it from the editor’s terminal, run; flutter pub add slide_to_add, and wait for Flutter to add the dependency

In the main.dart file, clean up the code written in the MyHomePage() class. See code below



import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column()

    );
  }
}

Next is to import the slide_to_act: After the
import 'package:flutter/material.dart';, add; import 'package:slide_to_act/slide_to_act.dart';



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

In the body of the _MyHomePageState class, remove the Column and call the SlideAction Widget instead;



class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title),
        ),
        body: SlideAction());
  }
}

Run your app and you should see the SlidableAction widget on the screen. See image below

Let’s wrap it with padding by selecting the SlideActon Widget, clicking on the bulb by the left, and selecting “Wrap with padding”. Let’s also remove the borderRadius and add the onSubmit where you put the code for the action you want to perform after sliding the widget. See code below;



class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title),
        ),
        body: Padding(
          padding: const EdgeInsets.all(24),
          child: SlideAction(
            borderRadius: 0,
            onSubmit: () {
              // Here you can add whatever action you want to perform after the sliding
              // maybe to navigate to another page or to do any other thing
            },
          ),
        ));
  }
}

Let’s also try to change the text to “Slide Me” and also change some properties in the SlideAction.



class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title),
        ),
        body: Padding(
          padding: const EdgeInsets.all(24),
          child: SlideAction(
            borderRadius: 0,
            innerColor: Colors.blue[900],
            outerColor: Colors.blue,

            // Let's change the icon and the icon color
            sliderButtonIcon: const Icon(
              Icons.arrow_circle_right,
              color: Colors.white,
            ),

            text: "Slide Me",
            onSubmit: () {
              // Here you can add whatever action you want to perform after the sliding
              // maybe to navigate to another page or to do any other thing
            },
          ),
        ));
  }
}

Your App should now look like the image below

Congratulations! You have successfully implemented the Slide to Act Widget and now you can successfully add it to your app. There are so many different actions you can perform using the Slide To Act Widget and there are so many different ways in which you can style and beautify it. I recommend you check out their repository and look for different ways to use the Slide To Act Widget.

Blog

How to implement the Slide-to-Act Widget in Flutter

Shadrach Samuel

Join Our Newsletter. No Spam, Only the good stuff.

Related