I am working on a vpn app and on one of the screens i have to use stack for showing different widgtes over each other like gradient below and a globe svg on top and then a circularProgressIndicator on top of all. i have used media query to set the widgets but when I make apk and test on separate device the circular progress indicator just increases in length or width or both looking ugly. i have tried to use it with sized box and container but in vain. Any suggestion or best Solution to tackle such widgets in stack that whatever devixe they're on they should be prtoperly positioned same.
Here's my code,
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:vpnapp/Widgets/Connection_overlay.dart';
class ConnectionsScreen extends StatefulWidget {
const ConnectionsScreen({super.key});
@override
State<StatefulWidget> createState() {
return _ConnectionsScreenState();
}
}
class _ConnectionsScreenState extends State<ConnectionsScreen>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 1),
vsync: this,
)..repeat(reverse: true);
_animation = Tween<double>(
begin: 0.99,
end: 1.03,
).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInCubic));
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(context) {
final screenHeight = MediaQuery.of(context).size.height;
final screenWidth = MediaQuery.of(context).size.width;
return Stack(
children: [
Positioned(
bottom: screenHeight * 0.26,
top: screenHeight * 0.27,
left: screenWidth * 0.17,
right: screenWidth * 0.17,
child: FractionallySizedBox(
widthFactor: 1,
heightFactor: 1,
child: AnimatedBuilder(
animation: _controller,
builder: (ctx, child) {
return Transform.scale(scale: _animation.value, child: child);
},
child: Container(
decoration: BoxDecoration(
gradient: RadialGradient(
colors: [
const Color.fromARGB(130, 72, 217, 186),
const Color.fromARGB(122, 72, 217, 186),
const Color.fromARGB(112, 72, 217, 186),
const Color.fromARGB(103, 72, 217, 186),
const Color.fromARGB(93, 72, 217, 186),
const Color.fromARGB(0, 255, 255, 255),
],
center: Alignment.center,
),
),
),
),
),
),
Positioned(
bottom: screenHeight * 0.26,
top: screenHeight * 0.29,
left: screenWidth * 0.17,
right: screenWidth * 0.17,
child: FractionallySizedBox(
widthFactor: 1,
heightFactor: 1,
child: AnimatedBuilder(
animation: _controller,
builder: (ctx, child) {
return Transform.scale(scale: _animation.value, child: child);
},
child: SvgPicture.asset('assets/DISCONNECT/globe.svg'),
),
),
),
Positioned(
bottom: screenHeight * 0.27,
top: screenHeight * 0.272,
left: screenWidth * 0.17,
right: screenWidth * 0.17,
child: FractionallySizedBox(
widthFactor: 0.78,
heightFactor: 0.78,
child: CircularProgressIndicator(color: Colors.red),
),
),
],
);
}
}
