title: How to calculate childAspectRatio for GridView.builder in flutter
body: <p>Grid of categories with image and category name displayed below the image</p>
  <pre><code> Widget build(BuildContext context) {
  return FutureBuilder(
      future: categoriesService.getCategories(1),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.error != null) {
            print('error ${snapshot.error}');
            return Text(snapshot.error.toString());
          }
          // YOUR CUSTOM CODE GOES HERE
          return Container(
            // padding: const EdgeInsets.all(0.0),
            child: GridView.builder(
              physics: NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                // childAspectRatio: 19 / 12,
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
              ),
              itemCount: snapshot.data.length,
              itemBuilder: (context, index) {
                Category category = snapshot.data[index];
                return Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: &lt;Widget&gt;[
                    Container(
                      child: Image.network(
                        category.image,
                        fit: BoxFit.cover,
                      ),
                      decoration: BoxDecoration(
                        border: Border.all(width: 1.0),
                      ),
                    ),
                    Text(category.name)
                  ],
                );
              },
            ),
          );
        } else {
          return new CircularProgressIndicator();
        }
      });
  </code></pre>
  <p>}</p>
  <p>My child item has an image and category name. as seen in the image, currently child item is overflowing and we cant see the category name below the image, and unable to remove top space between image and border.</p>
  <p><a href="https://i.stack.imgur.com/kbTTD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/kbTTD.png" alt="enter image description here" /></a></p>
  <p>Original design is here</p>
  <p><a href="https://i.stack.imgur.com/54Vhy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/54Vhy.png" alt="enter image description here" /></a></p>