Circular background of flutter widget as progressbar

Issue

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.

Solution

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
      ],
    )),

Answered By – Yeasin Sheikh

Answer Checked By – Gilberto Lyons (FlutterFixes Admin)