I am trying to create a GridView with 2 columns and the grid items in the following way

1. Image as background (which would be downloaded from internet)
2. Name of the item to be shown on the bottom of the card with transparent black background.

I tried the following way

Container(
  color: Colors.redAccent,
  child: GridView.builder(
      shrinkWrap: true,
      itemCount: 4,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2),
      itemBuilder: (BuildContext context, int index) {
        return Card(
          child: Stack(
            children: [
              Align(
                alignment: Alignment.center,
                child: Image.network(
                  "http://localhost:1337${products[index].thumb_image?.url ?? ""}",
                  errorBuilder: (context, error, url) =>
                      Icon(Icons.image_outlined),
                  fit: BoxFit.fill,
                  height: double.infinity,
                  width: double.infinity,
                ),
              ),
              Align(
                child: Container(
                  child: Text(
                    "Value = $index",
                    style: TextStyle(backgroundColor: Colors.black26),
                  ),
                ),
                alignment: Alignment.bottomCenter,
              ),
            ],
          ),              
        );
      }),
)

But, the text is not filling the complete card. How can I make the Text match the width?

CodePudding user response：

use FittedBox widget

Container(
  width: 300,
  height: 300,
  child: FittedBox(
  fit: BoxFit.contain,
  child: Text("Text"),
   ),
),

CodePudding user response：

try this:

          Align(
            child: Container(
              width: double.infinity,
              child: Text(
                "Value = $index",
                style: TextStyle(backgroundColor: Colors.black26),
              ),
            ),
            alignment: Alignment.bottomCenter,
          ),