Here is an example of how to fill a Circle in Flutter. font-size: 1rem;](You can improve this further to use in your applications. Best examples are water intake tracker.
font-size: 1rem;](
font-size: 1rem;](We have used a ClipRRect widget to build this example. ClipRReach prevents its child from painting outside its bounds.
![](https://fluttercentral.com/Uploads/6deb05ca-3c16-4e91-a9e1-d52b58887c7f.gifwidth="50%height="auto](
Here is the full code from main.dart file. You can simply copy-paste and run the code to see the output.
color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp());
color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatefulWidget {
color: #569cd6;](@override
color: #4ec9b0;](_MyAppState color: #dcdcaa;](createState() => color: #4ec9b0;](_MyAppState();
}
color: #569cd6;](class color: #4ec9b0;](_MyAppState color: #569cd6;](extends color: #4ec9b0;](State {
color: #4ec9b0;](double padValue = color: #b5cea8;](1;
color: #569cd6;](@override
color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) {
color: #c586c0;](return color: #4ec9b0;](MaterialApp(
home: color: #4ec9b0;](Scaffold(
appBar: color: #4ec9b0;](AppBar(
title: color: #4ec9b0;](Text(color: #ce9178;]("Circle Filling"),
),
body: color: #4ec9b0;](Column(
children: [
color: #4ec9b0;](Expanded(
child: color: #4ec9b0;](Center(
child: color: #4ec9b0;](MyFillingContainer(
progress: padValue / color: #b5cea8;](10,
size: color: #b5cea8;](200,
backgroundColor: color: #4ec9b0;](Colors.grey,
progressColor: color: #4ec9b0;](Colors.blue,
),
),
),
color: #4ec9b0;](Text(color: #ce9178;]('Fill Value: $
color: #9cdcfe;](padValue
color: #ce9178;]('),
color: #4ec9b0;](ButtonBar(
alignment: color: #4ec9b0;](MainAxisAlignment.center,
children: [
color: #4ec9b0;](RaisedButton(
child: color: #4ec9b0;](Text(color: #ce9178;]('Fill'),
onPressed: () {
color: #dcdcaa;](setState(() {
padValue = padValue + color: #b5cea8;](1;
});
},
),
color: #4ec9b0;](RaisedButton(
child: color: #4ec9b0;](Text(color: #ce9178;]('Unfill'),
onPressed: () {
color: #dcdcaa;](setState(() {
color: #c586c0;](if (padValue != color: #b5cea8;](0) {
padValue = padValue - color: #b5cea8;](1;
}
});
},
)
],
),
],
),
),
);
}
}
color: #569cd6;](class color: #4ec9b0;](MyFillingContainer color: #569cd6;](extends color: #4ec9b0;](StatelessWidget {
color: #569cd6;](final color: #4ec9b0;](double progress;
color: #569cd6;](final color: #4ec9b0;](double size;
color: #569cd6;](final color: #4ec9b0;](Color backgroundColor;
color: #569cd6;](final color: #4ec9b0;](Color progressColor;
color: #569cd6;](const color: #4ec9b0;](MyFillingContainer(
{color: #4ec9b0;](Key key,
color: #569cd6;](this.progress,
color: #569cd6;](this.size,
color: #569cd6;](this.backgroundColor,
color: #569cd6;](this.progressColor})
: color: #569cd6;](super(key: key);
color: #569cd6;](@override
color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) {
color: #c586c0;](return color: #4ec9b0;](ClipRRect(
borderRadius: color: #4ec9b0;](BorderRadius.color: #dcdcaa;](circular(size),
child: color: #4ec9b0;](SizedBox(
height: size,
width: size,
child: color: #4ec9b0;](Stack(
children: [
color: #4ec9b0;](Container(
color: backgroundColor,
),
color: #4ec9b0;](Align(
alignment: color: #4ec9b0;](Alignment.bottomCenter,
child: color: #4ec9b0;](Container(
height: size * progress,
color: progressColor,
),
)
]),
),
);
}
}
`
Thanks. Hope this is useful to you.Srikanth