I'm wanted to achieve the following UI in the screenshot and achieved by the below code on two different phones. But the same is not working on many other devices. Is there a way to handle the size of CircularProgressIndicator
(currently I'm using Transform.scale()
which is not giving me generic result) so that it fits around the sibling container inside the stack?
Edit:
The reason for using CircularProgressIndicator
is to show progress.
Widget build(BuildContext context) {
final mediaq = MediaQuery.of(context).size;
return Stack(alignment: Alignment.center, children: [
Transform.scale(
scale: mediaq.width <= 360 ? 2.35 : 2.70,
child: const CircularProgressIndicator(
backgroundColor: Colors.white,
color: Colors.orange,
strokeWidth: .75,
value: 1,
),
),
Container(
decoration: const BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [Colors.red, Colors.orange],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.transparent,
fixedSize: Size(mediaq.width * .24, mediaq.height * .12),
shape: const CircleBorder(side: BorderSide.none),
),
onPressed: () {},
child: const Text("child")),
),
]);
}
