Is there anyway I can add a text below the images in gridview.builder?-CodePudding

need some idea on how to add a box of texts below each of the images in Gridview.builder.

Below is my code.

 child: GridView.builder(
          primary: false,
          padding: const EdgeInsets.all(20),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisSpacing: 10, mainAxisSpacing: 10, crossAxisCount: 2),
          itemCount: 10,
          itemBuilder: (BuildContext context, int index) {
            Widget widget;
            switch (index) {
              case 0:
                widget = Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white,
                  ),
                  child: Image.network(
                      'https://ezyorder.com.my/uploads/products/t-shirt_man.png'),
                );
                break;
              case 1:
                widget = Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white,
                  ),
                  child: Image.network(
                      'https://ezyorder.com.my/uploads/products/black_full_sleeves.png'),
                );
                break;

Here is the result.

CodePudding user response：

Wrap your image with Column and add image & text,

 Container(
  padding: const EdgeInsets.all(8),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.white,
  ),
  child: Column(
    children: [
      Expanded(
        child: Image.network(
          'https://images.unsplash.com/photo-1633550306397-55382904f350?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3072&q=80',
        ),
      ),
      const SizedBox(height: 10),
      const Text(
        'Pop Corn',
        style: TextStyle(
          color: Colors.black,
          fontSize: 18,
          fontWeight: FontWeight.w600,
        ),
      )
    ],
  ),
);

If you want the Text outside, then wrap your Container with a Column and add text next to the Container.

CodePudding user response：

I think you should use GridTile widget. It has footer property where you can put your text easily

GridTile(
  child: Image.network('image url here'),
  footer: Text('Title goes here'),
)