Stack with circular progress bar and elevated button in flutter
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.
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,
),
)),
),
),
),
),
),
);
}
}