Stack with circular progress bar and elevated button in flutter

Question

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")),
      ),
    ]);
  }

Solution

Re wrote your code and here is my output

Transform.scale(
    scale: mediaq.width> 375 ? 3.10 : 2.35,
    child: const CircularProgressIndicator(
      backgroundColor: Colors.white,
      color: Colors.white,
      strokeWidth: .75,
      value: 1,
    ),
  ),

Output: Iphone 12 Pro Max (W:428 , H:926)

Iphone SE (Second Generation) (W:375, H: 667)

Also you can try this package for responsive ui.

Comments

[Manjunath Rao]

In the case of an iPad, this won't work.

[Nazmul Hasan]

I just compared 2 screen size. If you want complete responsive ui then you have to use screenutils or similar package or you have to write your own responsive code. Example: scale: mediaq.width > 375 && mediaq.width < 1000 ? 3.10 : mediaq.width > 1000 ? 5.00 : 2.35,