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

0
4


I’m new to flutter/dart programming and I’m attempting to create a gridview that appears and feels the identical manner the listing of apps does within the apple app retailer.
App store example

Mainly, I wish 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 dealing with 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 accommodates each
    the picture and the textual content I’m including.

  2. I’m attempting to duplicate the app retailer web page scroll physics.
    I wish to present a small preview of the playing cards to the proper like within the app retailer so the
    consumer is aware of they’ll change pages.
    Nevertheless, 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 screen.

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

class _MyCard extends State<MyCard> {
  @override
  Widget construct(BuildContext context) {
    return SizedBox(
      width: MediaQuery.of(context).dimension.width*0.8,
      top: 100,
      baby: 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 likely one of the kids of the Column.

SizedBox(
top: 300,
baby: 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", coloration: Colours.blue),
const MyCard(myText: "Card 4", coloration: Colours.deepPurple),
const MyCard(myText: "Card 5", coloration: Colours.pink),
const MyCard(myText: "Card 6", coloration: Colours.inexperienced),

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

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

Page 2

When you’ve got any suggestion/thought tips on how to enhance the web page scroll and/or sizing of my parts that will be enormously appreciated. Thanks.

LEAVE A REPLY

Please enter your comment!
Please enter your name here