android – Flutter dart – Appstore like GridView containing container or photographs and textual content

I’m new to flutter/dart programming and I’m making an attempt to create a gridview that appears and feels the identical method the checklist of apps does within the apple app retailer.

Principally, I need to have “pages” of 2-3 rows of apps/playing cards with some explanatory textual content subsequent to them.

I created a category containing my apps/playing cards and a Gridview containing these parts.
However I’m going through two points.

1. The weather I’m including to the Gridview are being resized.
   Due to this fact it’s troublesome for me to provide you with a design that works which comprises each
   the picture and the textual content I’m including.

2. I’m making an attempt to duplicate the app retailer web page scroll physics.
   I need to present a small preview of the playing cards to the precise like within the app retailer so the
   consumer is aware of they will change pages.
   Nonetheless, this “overlap” makes it in order that I scroll too far (additional and additional with every scroll) since it’s scrolling for the entire width of the display.

First off, I created my Card class as a StatefulWidget. The constructor requires a textual content and a colour to be supplied.

class _MyCard extends State<MyCard> {
  @override
  Widget construct(BuildContext context) {
    return SizedBox(
      width: MediaQuery.of(context).dimension.width*0.8,
      peak: 100,
      little one: Row(
        kids: [
          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,
                  ), 
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Subsequent I’m making a SizedBox inside a Scaffold –> SafeArea –> Column. So my SizedBox is among the kids of the Column.

SizedBox(
peak: 300,
little one: GridView(
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 16,
mainAxisSpacing: 0,
mainAxisExtent: MediaQuery.of(context).dimension.width*0.8,
),
physics: const PageScrollPhysics(),
scrollDirection: Axis.horizontal,
kids: [
const MyCard(myText: "Card 1", color: Colors.red),
MyCard(myText: "Card 2", color: Colors.yellow[800]),
const MyCard(myText: "Card 3", colour: Colours.blue),
const MyCard(myText: "Card 4", colour: Colours.deepPurple),
const MyCard(myText: "Card 5", colour: Colours.pink),
const MyCard(myText: "Card 6", colour: Colours.inexperienced),

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

That is what my web page 1 and a couple of seem like (if I attempt to scroll to the subsequent web page):

You probably have any advice/thought how you can enhance the web page scroll and/or sizing of my parts that may be drastically appreciated. Thanks.