I have tried to achieve a grid view like this:
I tried to generate a widget list and then append a button widget to the end and create gridview with the widget lists.
and code is bellow :
Widget build(BuildContext context) {
final records = context.read<TAProvider>().records;
List<Widget> cards = List.generate(
2,
(index) => Card(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
elevation: 8,
shadowColor: Colors.grey.withOpacity(0.1),
child: Center(
child: Text(
"records[index].tName",
style: GoogleFonts.comfortaa(
fontSize: 25,
fontWeight: FontWeight.w900,
color: Colors.grey.shade700),
),
),
),
);
cards.add(
GestureDetector(
onTap: () => Navigator.of(context).push(MaterialPageRoute(
builder: (context) => const AddDetail(),
)),
child: Card(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
elevation: 8,
shadowColor: Colors.grey.withOpacity(0.1),
child: Center(
child: Icon(
Icons.add,
color: Colors.grey[800],
size: 40,
),
),
),
),
);
return Padding(
padding: const EdgeInsets.all(15),
child: GridView.extent(
maxCrossAxisExtent: 200,
crossAxisSpacing: 20,
childAspectRatio: 1.5,
mainAxisSpacing: 15,
shrinkWrap: true,
children: cards));
}
My question is what is the better way to achieve what I want to achieve.
Above code works but I want to know if there's a better approach for it.


