Slide To Act

Introduction of Slide To Act

The slide to act package in Flutter provides a customizable slide-to-action widget, which is perfect for confirming user actions such as unlocking, submitting, or verifying tasks. This package enhances user experience by offering a visually appealing and interactive way to prompt users for final confirmation before executing critical actions, reducing accidental triggers and adding a layer of intentionality to important tasks.

Key Features:

• Interactive Slider: Engage users with a slide-to-confirm action.
• Customizable Design: Adjust colors, text, and styles to fit your app.
• Smooth Animations: Provides fluid and polished animations.
• Callback Function: Trigger actions with a customizable callback.

Properties:

text: The label displayed on the slider.

text: "Slide to unlock",

outerColor: Background color of the slider.

outerColor: Colors.blue,

innerColor: Color of the slider handle.

innerColor: Colors.white,

height: Height of the slider widget.

height: 60.0,

borderRadius: Corner curvature of the slider.

borderRadius: 12.0,

shimmer: Adds a dynamic shimmer effect to the slider text.

shimmer: true,

onSubmit: Callback function triggered upon sliding completion.

onSubmit: () {
  // Define the action to perform
},

alignment: Controls the alignment of the text inside the slider.

alignment: Alignment.centerLeft,

icon: Icon displayed at the end of the slider.

icon: Icons.arrow_forward,

disableSlideIcon: Hides the sliding icon when set to true.

disableSlideIcon: false,

submittedIcon: Icon displayed after the action is confirmed.

submittedIcon: Icons.check,

sliderRotate: Controls whether the slider rotates during sliding.

sliderRotate: false,

animationDuration: Duration of the slide animation.

animationDuration: Duration(milliseconds: 300),

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromARGB(255, 48, 48, 48),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: SlideAction(
            onSubmit: () {},
            borderRadius: 5,
            innerColor: const Color.fromARGB(255, 34, 34, 34),
            outerColor: const Color.fromARGB(255, 0, 0, 0),
            elevation: 0,
            text: 'Slide to Unlock',
            sliderButtonIcon: Icon(
              Icons.lock_open,
              color: Colors.white,
            ),
            sliderRotate: false,
          ),
        ),
      ),
    );
  }
}

The slide to act package is a user-friendly solution for adding slide-to-confirm functionality to your Flutter app, making important actions both intentional and visually engaging.

Thank for visiting Hybrid App Development
Posted by Hussam HM