Flutter | Custom Photos GridView Item

Custom Photos GridView

Before we start coding let me tell you about the structure of our awesome Wallpapers GridView.

Custom Photos GridView Structure

So what you saw above is a normal flutter grid view app structure with a simple App bar and a GridView widget which contains 5 children “GridItem” and our challenge now is the structure of the GridItem Widget.

GridItem Structure

Now let’s start coding.

We will start upside down, because the most important widget in this project is the GridItem widget, regarding to the structure you need to create a Stack widget with 5 containers inside, and you can put the Stack widget inside a Padding widget to give each GridItem some space around, so your code should look like this:

class GridItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Stack(
        children: [
          Container(),
          Container(),
          Container(),
          Container(),
          Container()
        ],
      ),
    );
  }
}

Now to build our containers we have to customize each Container with different width and height, but we can’t give them a static width or height, we have to link these measurements to the Screen Size, and also the containers have a different borderRadius for the edges because as you can notice the first Container in the GridItem have just one curved corner which is the topLeft corner, so in this article I’ll provide to you just one Container as an example and you can always find the full code here.

class GridItem extends StatelessWidget {
double screenWidth = MediaQuery.of(context).size.width;
int rowCount = screenWidth < 650 ? 2 : 3;
double gridViewWidth = screenWidth < 1000
               ? screenWidth
               : 1000;
double itemSize = gridViewWidth / rowCount;
@override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Stack(
        children: [
          Container(
            width: itemSize * 0.4,
            height: itemSize * 0.6,
            child: Card(
              margin: EdgeInsets.all(2),
              child: Image.network(
                imgs[0],
                fit: BoxFit.cover,
              ),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(size * 0.1),
                  bottomRight: Radius.circular(size * 0.01),
                ),
              ),
            ),
          )
          Container(),
          Container(),
          Container(),
          Container()
        ],
      ),
    );
  }
}

Don’t worry I’ll explain everything.

So our grid view is responsive, which means we have to calculate everything depending on the screen size.

screenWidth : is simply the width of the device screen.

rowCount : is the number of the items in one row, and here it will be “2 GridItems in a row” if the screen width smaller than 650 and “3 GridItems in a row” otherwise.

gridViewWidth : is actually the whole width of our grid view, so if the screen width is smaller than 1000 px the grid view width will equals to the same width as the device screen, otherwise it’ll stack at the width of 1000 px.

itemSize : is the width and in the same time the height of our GridItem because it’s a square, so in order to calculate the itemSize we divide the width of the whole grid view by the number of the items in one row which is in our case the rowCount.

Now what about the width and the height of each Container ?

Why we have those numbers 0.4, 0.6 ?

I hope that this photo will answer the questions:

And like that every Container will have a different width and a different height.

And the Button in the center will have always the same width and height which is the (itemSize * 0.2).

Ok I’ll stop here, I hope that the concept is clear.

If you want the full project you can find it here or you can find it on CodePen.

anwar-kantarji/custom-gridview-item