So, I want to add circle progress indicator around this image. and that progress indicator shows progress as per dynamic value. I mean the progress is dynamic not fixed. So, How can we do that ?
You can use Percent Indicator package to achieve dynamic loader based on your content.
For Example :
// Using ValueNotifier to update whenever the value of the progress changed
final ValueNotifier<double?> completionValue = ValueNotifier(null);
// Call this function on where you are updating the progress value
void _updateProgressUI({
required int totalFiles,
required int totalSuccess,
}) {
//Update completionValue value
completionValue.value = totalSuccess / totalFiles;
}
// Use this widget on you screen to show the progress indicator
Container(
padding: EdgeInsets.symmetric(horizontal: ,),
child: ValueListenableBuilder<double?>(
valueListenable: completionValue,
builder: (_, completionValue, __) {
return CircularPercentIndicator(
lineHeight: 16,
progressColor: your_color,
backgroundColor: your_color,
percent: completionValue ?? 0,
animationDuration: 1000,
animateFromLastPercent: true,
animation: true,
linearStrokeCap: LinearStrokeCap.roundAll,
);
},
),
)
Try to wrap the circular indicator out side your image.