Add a text widget at the bottom of every grid view item in flutter

Question

I am new to flutter and I am making a shop app.

In the homescreen I have used grid view builder to display images of items. Now I want to add two text widgets at the bottom of each grid view item which shows the item name and price of the item.

This gridview builder is a child of a column widget. The column widget has two text widgets and gridview builder as its child.

GridView.builder(
                padding: const EdgeInsets.all(10.0),
                itemCount: loadedProducts.length,
                itemBuilder: (ctx, i) => Container(
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      color: secondaryColorlight,
                      borderRadius: BorderRadius.circular(defaultBorderRadius)),
                  child: 
                    Image.asset(
                      loadedProducts[i].imageUrl,
                      height: 132,
                    ),
                ),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  childAspectRatio: 3 / 2,
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 10,
                ),
              )

This is how my homepage looks right now

This is how I want it to look

Answer 1

You can return Column from itemBuilder. You may also need to increase height from childAspectRatio

itemBuilder: (ctx, i) => Column(
  children: [
    Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
          color: secondaryColorlight,
          borderRadius: BorderRadius.circular(defaultBorderRadius)),
      child: Image.asset(
        loadedProducts[i].imageUrl,
        height: 132,
      ),
    ),
      // padding if needed
    Text("your text"),
  ],
),

Also you can check GridTile widget.

More about layout in flutter