Line Progress Animated.

animated_line_progress.dart

import 'package:flutter/material.dart';

class AnimatedLineProgress extends StatelessWidget {
  final double minLineWidth;
  final double maxLineWidth;
  final double minLineHeight;
  final double maxLineHeight;
  final Color lineColor;
  final double progressValue;
  final Color progressColor;
  final int animatedProgressDuration;

  const AnimatedLineProgress({
    Key key,
    this.minLineWidth = 0,
    this.maxLineWidth,
    this.minLineHeight = 4,
    this.maxLineHeight = 4,
    this.lineColor = Colors.grey,
    @required this.progressValue,
    this.progressColor = Colors.green,
    this.animatedProgressDuration = 2,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final double _maxLineWidth =
        maxLineWidth ?? MediaQuery.of(context).size.width * 0.6;
    final double _progressValue = progressValue / 10;

    return Column(
      children: [
        Stack(
          children: [
            AnimatedContainer(
              constraints: BoxConstraints(
                minWidth: minLineWidth,
                maxWidth: _maxLineWidth,
                minHeight: minLineHeight,
                maxHeight: maxLineHeight,
              ),
              decoration: BoxDecoration(
                color: lineColor,
                borderRadius: BorderRadius.all(Radius.circular(10.0)),
              ),
              duration: Duration(seconds: animatedProgressDuration),
              height: maxLineHeight,
            ),
            AnimatedContainer(
              constraints: BoxConstraints(
                minWidth: minLineWidth,
                maxWidth: _maxLineWidth,
              ),
              decoration: BoxDecoration(
                color: progressColor,
                borderRadius: BorderRadius.all(Radius.circular(10.0)),
              ),
              duration: Duration(seconds: animatedProgressDuration),
              width: _progressValue,
              height: maxLineHeight,
            ),
          ],
        )
      ],
    );
  }
}