Make Square Container Shape with equal width and height in Flutter - flutter

Question

How to make a square shape with equal width and equal height that should adjust in all screen devices (Android & iOS). I tried this but problem is that the container is inside listview.builder. I also try with mediaquery but some of the mobile devices doesn't appear in square. So to solve this issue and below is the sample dart code.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor:Colors.black,
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
var height = MediaQuery.of(context).size.height;
var width = MediaQuery.of(context).size.width;
return AspectRatio(
aspectRatio: 2.8 / 1,
child: Container(
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 3,
itemBuilder: (BuildContext context, int index) {
return SizedBox(
width: width * 0.30,
child: GestureDetector(
child: Padding(
padding: const EdgeInsets.only(right: 5.0),
child: Card(
elevation: 0,
child: Column(
children: [
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
topRight: Radius.circular(5),
),
child: AspectRatio(
aspectRatio: 1 / 1,
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Container(),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 2.0, right: 2.0),
child: FittedBox(
fit: BoxFit.fitWidth,
child: Text(
'Test',
style: TextStyle(
fontSize: 12.0),
),
),
),
],
),
),
),
),
);
}),
),
);
}
}

Answer 1

try with the below code
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
var height = MediaQuery.of(context).size.height;
var width = MediaQuery.of(context).size.width;
return AspectRatio(
aspectRatio: 2.8 / 1,
child: Container(
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 3,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(5.0),
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.green,
),
),
);
}),
),
);
}
}