Slide to action button in Flutter

In this article we will discuss about how to perform slide to action in our flutter app.

🎥 Video Tutorial

Slide to action in Flutter | Flutter Sliding Button animation | Package Explore

🛠️ Dependencies

slide_action | Flutter Package

quickalert | Flutter Package

🔭 Implementation

→ Build up the basic UI containing the elevated button at the center.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Slide to action')),
        body: Center(
          child: ElevatedButton(
            child: const Text('Logout'),
            onPressed: () {},
          ),
        ));
  }
}

→ Integrate quickalert package to show a popup menu whenever the logout button is pressed. Hence add the following code 👇 inside the onpressed event of the above elevated button widget.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Slide to action')),
        body: Center(
          child: ElevatedButton(
            child: const Text('Logout'),
            onPressed: () {
//----------------------------------------------
              QuickAlert.show(              
                context: context,
                type: QuickAlertType.loading,
                title: 'Warning!',
                text: 'Are you sure you want to logout?',
                customAsset: 'assets/Images/warning.gif',
                widget: const SlideActionBtn(),
              );
//----------------------------------------------
            },
          ),
        ));
  }
}

→ The SlideActionBtn() widget is as follows.,

class SlideActionBtn extends StatelessWidget {
  const SlideActionBtn({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 30),
      child: SlideAction(
        trackBuilder: (context, state) {
          return Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(16),
              color: Colors.white,
              boxShadow: const [
                BoxShadow(
                  color: Colors.black26,
                  blurRadius: 8,
                ),
              ],
            ),
            child: Center(
              child: Text(
                // Show loading if async operation is being performed
                state.isPerformingAction ? "Loading..." : "Slide to logout",
              ),
            ),
          );
        },
        thumbBuilder: (context, state) {
          return Container(
            margin: const EdgeInsets.all(4),
            decoration: BoxDecoration(
              color: Colors.orange,
              borderRadius: BorderRadius.circular(16),
            ),
            child: Center(
              // Show loading indicator if async operation is being performed
              child: state.isPerformingAction
                  ? const CupertinoActivityIndicator(
                      color: Colors.white,
                    )
                  : const Icon(
                      Icons.chevron_right,
                      color: Colors.white,
                    ),
            ),
          );
        },
        action: () async {
          // Async operation
          await Future.delayed(
            const Duration(seconds: 2),
            () => debugPrint("action completed"),
          );
        },
      ),
    );
  }
}

✨ Output

Well that’s it. 🎉 Run the code to see it in action.🥳

Refer my video tutorial for complete guide:👉 https://youtube.com/shorts/XNi_djU7TvE?feature=share

Get the complete source code here:👉 https://github.com/vijayinyoutube/slide_action_app

Check out all my Flutter related blogs here.,👇

vijaycreations

Other articles you may like.,

🔵Setting up your Flutter app for publishing in Play Store.

🟤Async Programming in Dart

🟡Scratch Card in Flutter

🔴Confetti Animation in Flutter

🟢 Google Fonts in Flutter app

🔴 Image Picker in Flutter

🟡 Change App Launcher Icon in Flutter

🟤 Neon Lighting in Flutter

🔵 Image Filter in Flutter

🟣 Enabling Flutter Web

🟠 Animated Icons in Flutter

🟢 Best VSCode Extensions

🔴 AnimatedContainer Widget in Flutter

🟡 GradientText in Flutter

🟤 Custom Clipper in Flutter

🔵 Carousel Slider in Flutter

🟣 Flutter BLoC Pattern

Most popular

Encrypted QR Code generation using Flutter — AES Encryption

Shared Preferences in Flutter

Setting up your Flutter app for publishing in Play Store.

Creating Desktop Apps using Flutter

Flutter Tutorials

If you found this article useful and wish to support my work, you can consider buying me a ☕️ coffee.👇

Pay Vijay R using PayPal.Me

If you want to know more about Flutter and various Widgets in Flutter…?🤓 Then visit my channel 👉🏻 vijaycreations🚩

Thanks.,