Change the fill color of the container from left to right in Flutter

user_6881761 0
Viewed 466

I am trying to change the color of a container from say white to red. But I want to do it from left to right that is, from the left of the container the color red starts filling up and expands all the way to the right in some duration. I know animated container will change the color but it seems to change the color of the entire container and not how I want it to Like the 'Next Episode' of Netflix

enter image description here

flutter
1 Answers

You could use the Stack Widget and use an AnimatedContainer in between the background container (grey) and the foreground container (displaying icon & text):

class NetflixCustomButton extends StatefulWidget {
  final Duration animationDuration;
  final double height;
  final double width;
  final double borderRadius;

  const NetflixCustomButton({
    this.animationDuration = const Duration(milliseconds: 800),
    this.height = 30,
    this.width = 130.0,
    this.borderRadius = 10.0,
  });

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

class _NetflixCustomButtonState
    extends State<NetflixCustomButton> {
  double _animatedWidth = 0.0;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          height: widget.height,
          width: widget.width,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(
              widget.borderRadius,
            ),
            color: Colors.grey,
          ),
        ),
        AnimatedContainer(
          duration: widget.animationDuration,
          height: widget.height,
          width: _animatedWidth,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(
              widget.borderRadius,
            ),
            color: Colors.white,
          ),
        ),
        InkWell(
          child: Container(
            height: widget.height,
            width: widget.width,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(
                widget.borderRadius,
              ),
              color: Colors.transparent,
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                Icon(
                  Icons.play_arrow,
                  color: Colors.black87,
                ),
                Text(
                  'Next Episode',
                  style: TextStyle(
                    color: Colors.black87,
                  ),
                ),
              ],
            ),
          ),
          onTap: () {
            setState(() {
              _animatedWidth = widget.width;
            });
          },
        ),
      ],
    );
  }
}
user_123933650
Related