worm_animation_button.dart

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

class WormAnimationButton extends StatefulWidget {
  final Duration animationDuration;
  final Function buttonPressedCallBack;

  WormAnimationButton(
      {this.animationDuration = const Duration(seconds: 1),
      this.buttonPressedCallBack});

  @override
  _WormAnimationButtonState createState() => _WormAnimationButtonState();
}

class _WormAnimationButtonState extends State<WormAnimationButton> {
  CustomAnimationControl _control = CustomAnimationControl.STOP;
  double _screenWidth;

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    _screenWidth = size.width;
    return Center(
      child: Container(
        width: _screenWidth * 0.8,
        height: 60.0,
        child: Stack(
          children: [
            Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(100.0),
                  border: Border.all(color: Colors.white)),
            ),
            CustomAnimation(
              tween: Tween(begin: 0.0, end: (_screenWidth * 0.8) / 2),
              duration: widget.animationDuration,
              curve: Curves.easeOut,
              control: _control,
              builder: (context, child, value) {
                return Padding(
                  padding: EdgeInsets.only(left: value),
                  child: Container(
                    width: value <= ((_screenWidth * 0.8) / 2) / 2
                        ? (value + ((_screenWidth * 0.8) / 2))
                        : (_screenWidth * 0.8) - value,
                    height: 50.0,
                    margin: EdgeInsets.all(5.0),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(100.0),
                      color: Colors.white.withOpacity(0.4),
                    ),
                  ),
                );
              },
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                GestureDetector(
                  behavior: HitTestBehavior.translucent,
                  onTap: () {
                    widget.buttonPressedCallBack('btn1');
                    setState(() {
                      _control = CustomAnimationControl.PLAY_REVERSE;
                    });
                  },
                  child: Container(
                    width: (_screenWidth * 0.8) / 2,
                    height: 60.0,
                    child: Center(
                      child: Text(
                        'Btn1',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                ),
                GestureDetector(
                  behavior: HitTestBehavior.translucent,
                  onTap: () {
                    widget.buttonPressedCallBack('btn2');
                    setState(() {
                      _control = CustomAnimationControl.PLAY;
                    });
                  },
                  child: Container(
                    width: (_screenWidth * 0.8) / 2,
                    height: 60.0,
                    child: Center(
                      child: Text(
                        'Btn2',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}