How to animate a color of a custom painter in Flutter?

Question

I'm tring to animate a Progress-bar in Flutter. So far I'm able to paint the progressbar with a CustomPainter class :)

My goal is to make the first bar (custompainter), acting like the secondbar:

I found a lot of examples to make a redical progressbar, but that excists of one CustomPainter. I (think) I need more seperate custompaintersto draw the hole line, like so:

But now I want to start animatin the first dot I get stucked, what and how should I pass as values to animate the first circle? Next I have to animate the lines.

Here is my code so far (a GitHub gist): https://gist.github.com/LiveLikeCounter/a1dffbe8953d39aa4af32c8f4dfc6553

Thank you so much in advanced!

Mohit Shetty · Accepted Answer · 2019-09-02T13:53:55.163

You can use an Row widget with a combination of Container and LinearProgressIndicator

Since I am not aware of the rest of the app I'll be providing a sample widget tree for your reference.

Widget Tree:

Row(
  children: <Widget>[
    Container([...]),
    LinearProgressIndicator([...]),
    Container([...]),
    LinearProgressIndicator([...]),
    Container([...]),
    ]
)

To make a circular Container along with the color transition,

AnimatedContainer(
duration: Duration(seconds:2),
width: x,
height: x,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(x/2),
// color: (progressvalue>200)? Colors.yellow : Colors.grey 
)
)

Sample Logic:

Container1 - progressValue > 0  
LinearProgressIndicator - (progressValue-10) to 110 
Container2 - progressValue > 110 
LinearProgressIndicator - (progressValue-120) to 220 
Container2 - progressValue > 220

The above logic can be modified as per your convenience.

Working example for LinearProgressIndicator,

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

void main() {
  runApp(new MaterialApp(
    debugShowCheckedModeBanner: false,
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Slider Demo'),
      ),
      body: new Container(
        color: Colors.blueAccent,
        padding: new EdgeInsets.all(32.0),
        child: new ProgressIndicatorDemo(),
      ),
    );
  }
}

class ProgressIndicatorDemo extends StatefulWidget {

  @override
  _ProgressIndicatorDemoState createState() =>
      new _ProgressIndicatorDemoState();
}

class _ProgressIndicatorDemoState extends State<ProgressIndicatorDemo>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    animation = Tween(begin: 0.0, end: 1.0).animate(controller)
      ..addListener(() {
        setState(() {
          // the state that has changed here is the animation object’s value
        });
      });
    controller.repeat();
  }


  @override
  void dispose() {
    controller.stop();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Center(
        child: new Container(
          child:  LinearProgressIndicator( value:  animation.value,),

        )
    );
  }

}

Hi @Mohit, thank you so much. I get more sense now. Any idea how to implement the progressValue with a animation? — Johan Walhout, Sep 02 '19 at 13:48
I have added an working example of `LinearProgressIndicator` for your reference from another thread https://stackoverflow.com/questions/51954097/linearprogressindicator-flutter-usage — Mohit Shetty, Sep 02 '19 at 13:55
Thank you Mohit! You take me to the right direction. I now get the animation working with a staggerd animation. See https://github.com/LiveLikeCounter/Flutter-Food-Delivery for a full working progressbar. — Johan Walhout, Sep 04 '19 at 06:37

How to animate a color of a custom painter in Flutter?

1 Answers1