Как анимировать цвет индикатора выполнения с помощью Flutter - PullRequest
Новая
       74

Как анимировать цвет индикатора выполнения с помощью Flutter

1 голос
/ 08 мая 2020

Я попытался создать анимированный индикатор выполнения, где прогресс заполняется анимированно, а также меняет свой цвет в зависимости от окончательного значения прогресса. Первая часть работает нормально, но я не могу понять, что не так с цветной анимацией. Что мне не хватает?

Я использовал flutter_ounded_progress_bar для отображения индикатора выполнения. 

import 'package:flutter/material.dart';
import 'package:flutter_rounded_progress_bar/flutter_rounded_progress_bar.dart';
import 'package:flutter_rounded_progress_bar/rounded_progress_bar_style.dart';

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

  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(
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.only(right: 16.0),
        child: Text("${widget.currentProgress.floor()}%",
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 12,
              color: Color(0xFF333333))),
      ),
      Container(
        height: widget.height,
        width: 100,
        child: RoundedProgressBar(
          milliseconds: widget.duration,
          height: widget.height,
          style: RoundedProgressBarStyle(
              borderWidth: 0,
              widthShadow: 0,
              colorProgress: colorAnimation.value,
              backgroundProgress: Color(0xFFEBEBEB)),
          percent: animation.value,
        )),
      ],
    );
  }

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