Circular background of flutter widget as progressbar

Question

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.

SOMETHING LIKE THIS (WIDGET)-

How do I create a Widget like this with flutter.

Answer 1

LinearProgressIndicator can be wrapped with SizedBox.

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

        //place your widget
      ],
    )),