将容器高度设置为等于Flutter中的宽度

Question

我正在学习Flutter开发。我想连续显示一些带有短文本的圆角正方形容器。但是，可能的形状是圆形或矩形。因此，我决定设置矩形的宽度和高度，以使它们相等。以下是我用来创建容器的代码

Container(
      width: double.maxFinite,
      height: 
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        color: ThemeProvider.themeOf(context).data.primaryColor,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Text(keyText),
    ),

当我单独在Box装饰中设置形状时，Container的大小将调整为文本的大小。设置容器的width属性时，我可以在容器之间划分屏幕的可用宽度，这可以确保在屏幕变小或变大时灵活调整大小，而不必进行硬编码。现在，我要使高度与宽度原来的大小完全相同，从而获得一个方形容器。知道我该怎么做吗？

编辑：我尝试了以下代码，这是两种情况下容器的外观：

Container(
      alignment: Alignment.center,
      width: double.maxFinite,
      height: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        color: ThemeProvider.themeOf(context).data.primaryColor,
        borderRadius: BorderRadius.circular(10),
      ),

Container(
      alignment: Alignment.center,
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        color: ThemeProvider.themeOf(context).data.primaryColor,
        borderRadius: BorderRadius.circular(10),
      ),

After using MediaQuery.of(context).size.width for height property or both

Answer 1

Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        color: ThemeProvider.themeOf(context).data.primaryColor,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Text(keyText),
    ),

Answer 2

使用MediaQuery。 MediaQuery.of(context).size.width提供屏幕宽度大小值。

Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        color: ThemeProvider.themeOf(context).data.primaryColor,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Text(keyText),
    )

Answer 3

检查我为您制作的快速示例！

  // This function is just an example
  List<Widget> buildContainers(BuildContext context, int containerCount) {
    // Here you get the width of all your containers
    final containerWidth = MediaQuery.of(context).size.width / containerCount;
    // Make height = width for squares!
    final containerHeight = containerWidth;
    // We will gather all containers in this list
    List containerList = <Container>[];

    for (var i = 0; i < containerCount; i++) {
      containerList.add(
        Container(
          // Use the predefined width and height here!
          width: containerWidth, 
          height: containerHeight,
          // Random color to differentiate each container
          // You could replace this with your child widget
          color: Color(
            Random().nextInt(0xFFFFFFFF),
          ),
        ),
      );
    }

    return containerList;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: [
          // If you are wondering what are these dots (...)
          // they are called "spread operators" and you can find more about them here:
          // https://dart.dev/guides/language/language-tour#spread-operator
          ...buildContainers(context, 7),
        ],
      ),
    );
  }