Flutter图标如何填充选项卡中所有可用的宽度和高度

Question

我有一张这样的卡片。 Actual card

但我想要一张这样的卡片 What i want

我的代码是：

return Card(
      semanticContainer: true,
      clipBehavior: Clip.antiAliasWithSaveLayer,
      margin: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 5.0),
      elevation: 5.0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
      ),
      child: Container(
        padding: EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text('Example text'),
                Text("20-06-2021 - 13:00",
                    style:
                    TextStyle(fontSize: 15, fontStyle: FontStyle.italic)),
                Text("Example text"),
                Text("Example text"),
              ],
            ),
            Column(
              children: <Widget>[
                Flag(
                  'FR',
                  height: 40,
                  width: 40,
                  replacement: Text('Error'),
                ),
              ],
            ),
          ],
        ),
      ),
    );

现在，我有固定的高度和宽度，我无法获得我想要的，因为每次尝试都会放大卡片的高度。
（我想保持与上面的卡片相同的高度).
图标来自包标志 (Flags package)

Answer 1

试试这个让它适合宽度和高度：

Flag('AD', height: double.infinity, width: double.infinity, fit: BoxFit.fill)

或者这样：

Flag('AD', height: null, width: null, fit: BoxFit.fill)

我建议在行内制作此标志可扩展小部件

Answer 2

而不是将 Container 包裹在 Card 中。尝试在 Card 中用 Expanded 包裹 Row。（我只是把Container改成了padding）

        Card(
            semanticContainer: true,
            clipBehavior: Clip.antiAliasWithSaveLayer,
            margin: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 5.0),
            elevation: 5.0,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(15),
            ),
            child: Padding(
              padding: EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Expanded(
                    flex: 1,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text('Example text'),
                        Text("20-06-2021 - 13:00",
                            style: TextStyle(
                                fontSize: 15, fontStyle: FontStyle.italic)),
                        Text("Example text"),
                        Text("Example text"),
                      ],
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: Container(
                      height: 100,
                      color: Colors.red,
                    ),
                  )
                ],
              ),
            ),
          ),

Answer 3

将你的 Flag 包裹在 SizedBox 中，如果你知道它的固定大小是这样的话。

SizedBox(
  height: 65,
  width: 140,
  child: Flag(
    'FR',
    replacement: Text('Error'),
    fit: BoxFit.cover,
  ),
)

有关 SizedBox 的更多信息 Here

Flutter图标如何填充选项卡中所有可用的宽度和高度

Flutter icon how to fill all the width and height available in the tab

flutter

card