A custom animated button in Flutter

animated_button.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:stash_hub/presentation/profile/logic/delete_account_states.dart';
import 'package:theme/theme.dart';

import '../../../repositories/authentication_repository.dart';
import '../logic/delete_account_notifier.dart';

class AccountDeleteModalContent extends ConsumerStatefulWidget {
  const AccountDeleteModalContent({Key? key}) : super(key: key);

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _AccountDeleteModalContentState();
}

class _AccountDeleteModalContentState extends ConsumerState<AccountDeleteModalContent> with SingleTickerProviderStateMixin {
  late final AnimationController controller;
  late final Animation<double> animation;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 3),
    );
    animation = CurvedAnimation(
      parent: controller,
      curve: Curves.easeInOut,
    );

    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        onAnimationComplete();
      }
    });
  }

  void onAnimationComplete() {
    controller.reverse();
    ref.read(deleteAccountNotifierProvider.notifier).deleteAccount();
  }

  @override
  Widget build(BuildContext context) {
    final theme = AppTheme.of(context);

    ref.listen<DeleteAccountStates>(deleteAccountNotifierProvider, (previous, next) {
      next.mapOrNull(
        success: (_) {
          Navigator.of(context).pop();
          ref.watch(authenticationRepositoryProvider).logOut();
        },
      );
    });

    return ref.watch(deleteAccountNotifierProvider).maybeWhen(
          loading: () => const Center(
            child: CircularProgressIndicator(),
          ),
          failure: (error) => Center(
            child: Text(
              error,
              style: theme.appTypographyData.subheading2,
            ),
          ),
          orElse: () => Column(
            children: [
              Text(
                'Are you sure?\nThis action cannot be undone!',
                style: theme.appTypographyData.subheading2,
                textAlign: TextAlign.center,
              ),
              SizedBox(height: theme.appSpacingData.large),
              SizedBox(
                width: double.infinity,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(theme.appRadiusData.regular),
                  child: Stack(
                    children: [
                      LayoutBuilder(
                        builder: (context, constraints) {
                          return AnimatedBuilder(
                            animation: animation,
                            builder: (context, child) {
                              return Container(
                                width: animation.value * constraints.maxWidth,
                                padding: EdgeInsets.all(theme.appSpacingData.large),
                                decoration: BoxDecoration(
                                  color: theme.appColorsData.error,
                                ),
                                child: child,
                              );
                            },
                            child: Center(
                              child: Text(
                                '',
                                style: theme.appTypographyData.subheading1.copyWith(
                                  color: theme.appColorsData.primary,
                                ),
                              ),
                            ),
                          );
                        },
                      ),
                      GestureDetector(
                        onTapDown: (details) {
                          controller.forward();
                        },
                        onTapUp: (details) {
                          controller.reverse();
                        },
                        child: Container(
                          padding: EdgeInsets.all(theme.appSpacingData.large),
                          decoration: BoxDecoration(color: theme.appColorsData.error.withOpacity(0.3)),
                          child: Center(
                            child: Text(
                              'Hold to delete account',
                              style: theme.appTypographyData.subheading1.copyWith(
                                color: theme.appColorsData.dark,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        );
  }
}