Circular background of flutter widget as progressbar


this is Antika. I have started learning to code since a few days back, and am only familiar with HTML/CSS/JS, and basics of dart/flutter

Developer Level: Beginner
Project type & language: I am developing a Study planner app for myself, using flutter.

Problem – I have tried many ways to create a widget, that has the details of the task,with a progress bar – like background.


How do I create a Widget like this with flutter.

enter image description here


LinearProgressIndicator can be wrapped with SizedBox.

    borderRadius: BorderRadius.circular(12), // have border decoration
    child: Stack(
      // you may need to wrap with sizedBOx
      children: [
          height: 100, //stack size, or use fit
          width: 400,
          child: LinearProgressIndicator(
            value: sliderValue,

        //place your widget

enter image description here

Answered By – Yeasin Sheikh

Answer Checked By – Gilberto Lyons (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *