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

Answer 1

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.

Answer 2

You can use flutter_screenutil package to make your UI more responsive, instead of MediaQuery.

I have done your screen using flutter_screenutil package. Please try this out. I assumed the heights, widths, and radius. You can modify these as per your requirement. I have also attached the UI I got.

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
        designSize: const Size(375, 667),
        minTextAdapt: true,
        builder: () {
          return MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
              primarySwatch: Colors.blue,
            ),
            home: const ButtonTest(),
          );
        });
  }
}

class ButtonTest extends StatefulWidget {
  const ButtonTest({Key? key}) : super(key: key);

  @override
  _ButtonTestState createState() => _ButtonTestState();
}

class _ButtonTestState extends State<ButtonTest> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Container(
          height: 94.h, // You can change here
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(
              color: Colors.white,
            ),
          ),
          child: Padding(
            padding: EdgeInsets.all(
              2.0.w, // You can change here
            ),
            child: GestureDetector(
              onTap: () {
                print("Button Pressed");
              },
              child: Container(
                height: 92.h, // You can change here
                width: 92.h, // You can change here
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  gradient: LinearGradient(
                    colors: [
                      Colors.red,
                      Colors.orange,
                    ],
                  ),
                ),
                child: const Center(
                    child: Text(
                  'child',
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                )),
              ),
            ),
          ),
        ),
      ),
    );
  }
}