Swiggy Style Slider Success Button

swiggy_swipe_button.dart

import 'dart:developer';

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

class SwiggySwipeButton extends StatefulWidget {
  const SwiggySwipeButton(
      {super.key,
      required this.label,
      required this.width,
      required this.height});

  final String label;
  final double width;
  final double height;

  @override
  State<SwiggySwipeButton> createState() => _SwiggySwipeButtonState();
}

class _SwiggySwipeButtonState extends State<SwiggySwipeButton>
    with TickerProviderStateMixin {
  ValueNotifier<double> progress = ValueNotifier<double>(0.0);

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Shimmer(
      interval: const Duration(seconds: 10),
      child: Container(
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(50),
            gradient: const LinearGradient(
                colors: [Colors.green, Color(0xFF1D923C)])),
        height: widget.height,
        width: widget.width,
        alignment: Alignment.centerLeft,
        child: Stack(
          alignment: Alignment.centerLeft,
          children: [
            ValueListenableBuilder(
                valueListenable: progress,
                builder: (context, progress, _) {
                  return Center(
                    child: Opacity(
                      opacity: 1 - progress,
                      child: Text(
                        widget.label,
                        style:
                            const TextStyle(color: Colors.white, fontSize: 22),
                      ),
                    ),
                  );
                }),
            Dismissible(
              key: const Key("Swiggy"),
              direction: DismissDirection.startToEnd,
              dismissThresholds: const {DismissDirection.startToEnd: 0.9},
              movementDuration: const Duration(milliseconds: 500),
              confirmDismiss: (direction) async {
                log("confirmDismiss");
                return null;
              },
              onDismissed: (direction) {
                log("onDissmissed");
              },
              onUpdate: (details) {
                progress.value = details.progress;
              },
              child: Container(
                width: widget.width - widget.height,
                height: widget.height - 10,
                alignment: Alignment.centerLeft,
                color: Colors.transparent,
                child: Container(
                  margin: const EdgeInsets.only(left: 5),
                  height: widget.height - 10,
                  width: widget.height - 10,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(50),
                      color: Colors.white),
                  alignment: Alignment.center,
                  child: ValueListenableBuilder(
                    valueListenable: progress,
                    builder: (context, progress, _) {
                      if (progress < 0.6) {
                        return const Stack(
                          alignment: Alignment.center,
                          children: <Widget>[
                            Positioned(
                              left: 7.5,
                              child: Icon(
                                Icons.keyboard_arrow_right,
                                size: 30,
                                color: Color(0x401D923C),
                              ),
                            ),
                            Positioned(
                              left: 17.5,
                              child: Icon(
                                Icons.keyboard_arrow_right,
                                size: 30,
                                color: Color(0xFF1D923C),
                              ),
                            ),
                          ],
                        );
                      }

                      return const Icon(
                        Icons.check,
                        color: Color(0xFF1D923C),
                      );
                    },
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Cool