flutter progressbar

index.html

<h2>Progressbar</h2>

<div>
  <canvas id="canvas" width="300" height="300"></canvas>
</div>
</div>

main.dart

import 'package:flutter/material.dart';

final Color primaryColor = Colors.orange;
final TargetPlatform platform = TargetPlatform.android;

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          body: Center(child: MyLinearProgressIndicator(currentProgress: 100))),
    ),
  );
}

class MyLinearProgressIndicator extends StatefulWidget {
  final double currentProgress;
  final double height;
  final Color foregroundColor;
  final int duration = 2000;

  MyLinearProgressIndicator(
      {this.currentProgress,
      this.height = 5,
      this.foregroundColor = const Color(0xFFde8405)});

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

class _LinearProgressIndicatorState extends State<MyLinearProgressIndicator>
    with SingleTickerProviderStateMixin {
  AnimationController progressController;
  Animation<double> animation;
  Animation<Color> colorAnimation;
  CurvedAnimation curve;

  @override
  void initState() {
    super.initState();
    progressController = AnimationController(
        vsync: this, duration: Duration(milliseconds: widget.duration));

    curve = CurvedAnimation(parent: progressController, curve: Curves.ease);

    animation =
        Tween<double>(begin: 0, end: widget.currentProgress).animate(curve)
          ..addListener(() {
            setState(() {});
          });
    Color endColor;
    if (widget.currentProgress <= 30) {
      endColor = const Color(0xFFFF0000);
    } else if (widget.currentProgress <= 50) {
      endColor = const Color(0xFF00FF00);
    } else {
      endColor = const Color(0xFF0000FF);
    }
    colorAnimation =
        ColorTween(begin: widget.foregroundColor, end: endColor).animate(curve)
          ..addListener(() {
            setState(() {});
          });

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      progressController.forward();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.only(right: 16.0),
          child: Text("${animation.value.floor()}%",
              style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 12,
                  color: Color(0xFF333333))),
        ),
        SizedBox(
            height: widget.height,
            width: 100,
            child: Container(
                color: Color(0xFFEBEBEB),
                child: Padding(
                    padding: EdgeInsets.all(1.0),
                    child: Padding(
                      padding: EdgeInsets.only(right:100-animation.value),
                        child: Container(
                          color: colorAnimation.value,                       
                       ))))),
      ],
    );
  }

  @override
  void dispose() {
    progressController.dispose();
    super.dispose();
  }
}