Adding button to a Gridview that is flexible to the grids childrens in flutter

Viewed 22

I have tried to achieve a grid view like this:

1st image 2nd image 3rd image

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.

0 Answers
Related