如何使文本在颤动中填充宽度？答案

【问题标题】：How to make Text fill the width in flutter?如何使文本在颤动中填充宽度？
【发布时间】：2021-11-15 23:11:22
【问题描述】：

我正在尝试通过以下方式创建具有 2 列和网格项的 GridView

图片作为背景（从网上下载）
要在卡片底部以透明黑色背景显示的项目名称。

我尝试了以下方式

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,
              ),
            ],
          ),              
        );
      }),
)

但是，文本并没有填满完整的卡片。如何使Text 与宽度匹配？

【问题讨论】：

标签： flutter dart gridview flutter-layout

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案2】：

使用FittedBox 小部件

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

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：