android – Flutter dart – Appstore like GridView containing container or images and text

I am new to flutter/dart programming and I am trying to create a gridview that looks and feels the same way the list of apps does in the apple app store.

Basically, I want to have “pages” of 2-3 rows of apps/cards with some explanatory text next to them.

I created a class containing my apps/cards and a Gridview containing these elements.
But I am facing two issues.

1. The elements I am adding to the Gridview are being resized.
   Therefore it is difficult for me to come up with a design that works which contains both
   the image and the text I am adding.

2. I am trying to replicate the app store page scroll physics.
   I want to show a small preview of the cards to the right like in the app store so the
   user knows they can switch pages.
   However, this “overlap” makes it so that I scroll too far (further and further with each scroll) since it is scrolling for the whole width of the screen.

First off, I created my Card class as a StatefulWidget. The constructor requires a text and a color to be provided.

class _MyCard extends State<MyCard> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: MediaQuery.of(context).size.width*0.8,
      height: 100,
      child: Row(
        children: [
          SizedBox(
            width: 80,
            height: 80,
            child: Container(
              decoration: BoxDecoration(
                border: Border.all(
                  color: widget.color,
                ),
                color: widget.color,
                borderRadius: const BorderRadius.all(
                  Radius.circular(5),
                ),
              ),
              width: 80,
              height: 80,
            ),
          ),
          SizedBox(
            width: MediaQuery.of(context).size.width*0.8 - 80,
            height: 80,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  widget.myText,
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const Text(
                  "\nLorem ipsum dolor sit amet, consectetur adipiscing elit",
                  style: TextStyle(
                    fontSize: 12,
                  ), 
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Next I am creating a SizedBox inside a Scaffold –> SafeArea –> Column. So my SizedBox is one of the children of the Column.

SizedBox(
height: 300,
child: GridView(
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 16,
mainAxisSpacing: 0,
mainAxisExtent: MediaQuery.of(context).size.width*0.8,
),
physics: const PageScrollPhysics(),
scrollDirection: Axis.horizontal,
children: [
const MyCard(myText: "Card 1", color: Colors.red),
MyCard(myText: "Card 2", color: Colors.yellow\[800\]),
const MyCard(myText: "Card 3", color: Colors.blue),
const MyCard(myText: "Card 4", color: Colors.deepPurple),
const MyCard(myText: "Card 5", color: Colors.pink),
const MyCard(myText: "Card 6", color: Colors.green),

                const MyCard(myText: "Card 7", color: Colors.red),
                MyCard(myText: "Card 8", color: Colors.yellow[800]),
                const MyCard(myText: "Card 9", color: Colors.blue),
                const MyCard(myText: "Card 10", color: Colors.deepPurple),
                const MyCard(myText: "Card 11", color: Colors.pink),
                const MyCard(myText: "Card 12", color: Colors.green),
                const MyCard(myText: "Card 13", color: Colors.red),
                MyCard(myText: "Card 14", color: Colors.yellow[800]),
                const MyCard(myText: "Card 15", color: Colors.blue),
                const MyCard(myText: "Card 16", color: Colors.deepPurple),
                const MyCard(myText: "Card 17", color: Colors.pink),
                const MyCard(myText: "Card 18", color: Colors.green),
                const MyCard(myText: "Card 19", color: Colors.red),
                MyCard(myText: "Card 20", color: Colors.yellow[800]),
                const MyCard(myText: "Card 21", color: Colors.blue),
                const MyCard(myText: "Card 22", color: Colors.deepPurple),
                const MyCard(myText: "Card 23", color: Colors.pink),
                const MyCard(myText: "Card 24", color: Colors.green),
              ],
            ),
          ),

This is what my page 1 and 2 look like (if I try to scroll to the next page):

If you have any recommendation/idea how to improve the page scroll and/or sizing of my elements that would be greatly appreciated. Thank you.