Fill Circle example in Flutter

<p>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.</p> <p>font-size: 1rem;](</p> <p>font-size: 1rem;](We have used a ClipRRect widget to build this example. ClipRReach prevents its child from painting outside its bounds.</p> <p>![](https://fluttercentral.com/Uploads/6deb05ca-3c16-4e91-a9e1-d52b58887c7f.gifwidth="50%height="auto](</p> <p>Here is the full code from main.dart file. You can simply copy-paste and run the code to see the output.</p> <p>color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp());</p> <p>color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatefulWidget { color: #569cd6;](@override</p> <p>color: #4ec9b0;](_MyAppState color: #dcdcaa;](createState() => color: #4ec9b0;](_MyAppState(); }</p> <p>color: #569cd6;](class color: #4ec9b0;](_MyAppState color: #569cd6;](extends color: #4ec9b0;](State { color: #4ec9b0;](double padValue = color: #b5cea8;](1; color: #569cd6;](@override</p> <p>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; } }); }, ) ], ), ], ), ), ); } }</p> <p>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</p> <p>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(<br /> 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</p>