I want to design grid like this in flutter: - flutter

Question

I want to design a Grid like the below output in flutter.
Please help with this.
The Code I have tried is this:
Container(
height: 100,
width: 170,
margin: const EdgeInsets.symmetric(horizontal: 30),
child: DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white,
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.black
),
margin: const EdgeInsets.all(1.5),
child: const Center(
child: Text(
"data",
style: TextStyle(color: Colors.white),
),
),
),
),
),
And the output I get is this:
Thanks in advance for your help.

Answer 1

What you can do to maintain a grid is use Wrap.
Not very efficient for long list of items but for short it will suffice.
Take a look at the code below :
( You can run this code using Dartpad )
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark(),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(),
body: Padding(
padding: const EdgeInsets.all(16),
child: LayoutBuilder(builder: (c, box) {
var crossCount = 2;
var spacing = 15.0;
var maxWidth = (box.maxWidth - ((crossCount - 1) * spacing)) / 2;
return Wrap(
spacing: spacing,
runSpacing: spacing,
children: List.generate(
10,
(i) => Stack(
children: [
Container(
width: maxWidth,
height: maxWidth * 0.55 * 0.5,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(16)),
gradient : LinearGradient(
end: Alignment.topLeft,
begin: Alignment.bottomRight,
colors: [
Colors.black,
Colors.black,
Colors.amber,
],
),
// color: Colors.white,
// boxShadow: [BoxShadow(color: Colors.black, blurRadius: 4)],
),
),
Container(
width: maxWidth,
height: maxWidth * 0.55,
margin: const EdgeInsets.all(2),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
color: Colors.black,
),
)
],
),
),
);
}),
),
),
);
}
}
Note : Replace the Container's child with your own UI logic for implementing the design you like.

Answer 2

I tried it by myself and manage to built the same.
This is the Code:
Padding(
padding: const EdgeInsets.all(10),
child: GridTile(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
"Gate 2",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500,
color: Colors.white),
),
const Text(
"Unlocked",
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w500,
color: Colors.grey),
),
const SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
const Icon(
Icons.lock,
color: Colors.white,
size: 30,
),
const SizedBox(width: 5),
Image.asset("assets/swipe.png",height: 30,width: 30,),
const SizedBox(width: 5),
// const Icon(Icons.lock, color: Colors.white,size: 30,),
Draggable(
axis: Axis.horizontal,
maxSimultaneousDrags: 3,
rootOverlay: false,
child: Container(
padding: const EdgeInsets.all(5),
decoration: const BoxDecoration(
color: Colors.white12,
borderRadius: BorderRadius.all(Radius.circular(100),),
),
child: const Icon(
Icons.lock_open,
color: Colors.orangeAccent,
size: 30,
),
),
feedback: Container(
decoration: const BoxDecoration(
color: Colors.white12,
borderRadius: BorderRadius.all(Radius.circular(100),),
),
child: const Icon(
Icons.lock_open,
color: Colors.transparent,
size: 40,
),
),
),
],
),
],
),
),
),
Here is the Output.