如何在 Flutter 的另一个小部件下对齐小部件？

Question

我有一个小部件用来表示进度 like this

我需要能够将名字放在气泡下，但是当我这样做时：

Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(
                        color: Colors.green,
                        width: 1.5,
                      ),
                    ),
                    height: MediaQuery.of(context).size.height / 10,
                    width: MediaQuery.of(context).size.width / 10,
                    child: Center(
                      child: Icon(
                        Icons.check,
                        color: Colors.green,
                        size: 30,
                      ),
                    ),
                  ),
                  Text("Test label"),
                ],
              ),

this happens.

我也试过将条形与圆圈排成一行：

 Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Row(
                        children: [
                          Container(
                            padding: EdgeInsets.symmetric(
                              vertical:
                                  MediaQuery.of(context).size.height / 20,
                            ),
                            height:
                                1 + MediaQuery.of(context).size.height / 10,
                            width: MediaQuery.of(context).size.width / 16,
                          ),
                          Container(
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              border: Border.all(
                                color: mainColor,
                                width: 1.5,
                              ),
                            ),
                            height: MediaQuery.of(context).size.height / 10,
                            width: MediaQuery.of(context).size.width / 10,
                            child: Center(
                              child: Icon(
                                Icons.check,
                                color: mainColor,
                                size: 30,
                              ),
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.symmetric(
                              vertical:
                                  MediaQuery.of(context).size.height /20,
                            ),
                            height:
                                1 + MediaQuery.of(context).size.height / 10,
                            width: MediaQuery.of(context).size.width / 16,
                            child: Container(
                              color: grey,
                            ),
                          ),
                        ],
                      ),
                    Text("Test label"),
                    ],
                  ),

This is better, but still creates problems if the text is bigger

如何对齐圆圈下方的文本而不导致线条出现问题？

整个widget的代码（抱歉这么长，不然不知道怎么显示）：

Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    padding: EdgeInsets.symmetric(
                      vertical:
                      MediaQuery.of(context).size.height / 20,
                    ),
                    height:
                    1 + MediaQuery.of(context).size.height / 10,
                    width: MediaQuery.of(context).size.width / 16,
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Container(
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          border: Border.all(
                            color: Colors.green,
                            width: 1.5,
                          ),
                        ),
                        height: MediaQuery.of(context).size.height / 10,
                        width: MediaQuery.of(context).size.width / 10,
                        child: Center(
                          child: Icon(
                            Icons.check,
                            color: Colors.green,
                            size: 30,
                          ),
                        ),
                      ),
                      Text("Test label"),
                    ],
                  ),Container(
                    padding: EdgeInsets.symmetric(
                      vertical:
                      MediaQuery.of(context).size.height / 20,
                    ),
                    height:
                    1 + MediaQuery.of(context).size.height / 10,
                    width: MediaQuery.of(context).size.width / 16,
                    child: Container(
                      color: Colors.grey,
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.symmetric(
                      vertical: MediaQuery.of(context).size.height / 20,
                    ),
                    height: 1 + MediaQuery.of(context).size.height / 10,
                    width: 3 / 2 * MediaQuery.of(context).size.width / 8,
                    child: Container(
                      color: Colors.grey,
                    ),
                  ),
                  Container(
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(
                        color: Colors.grey,
                        width: 1.5,
                      ),
                    ),
                    height: MediaQuery.of(context).size.height / 10,
                    width: MediaQuery.of(context).size.width / 10,
                  ),
                  Container(
                    padding: EdgeInsets.symmetric(
                      vertical: MediaQuery.of(context).size.height / 20,
                    ),
                    height: 1 + MediaQuery.of(context).size.height / 10,
                    width: MediaQuery.of(context).size.width / 8,
                    child: Container(
                      color: Colors.grey,
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.symmetric(
                      vertical: MediaQuery.of(context).size.height / 20,
                    ),
                    height: 1 + MediaQuery.of(context).size.height / 10,
                    width: MediaQuery.of(context).size.width / 8,
                    child: Container(
                      color: Colors.grey,,
                    ),
                  ),
                  Container(
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(
                        color: Colors.grey,,
                        width: 1.5,
                      ),
                    ),
                    height: MediaQuery.of(context).size.height / 10,
                    width: MediaQuery.of(context).size.width / 10,
                  )
                ],
              ),

Answer 1

我建议的一个解决方案是尝试使用 ConstrainedBox 和 Container 包装文本并限制最大宽度。

例如-

ConstrainedBox(
  constraints: BoxConstraints(maxWidth: 50),
    child: Container(
      child: Text('Your Text'),
  ),
),

认为如果文本太长而无法放在一行中，则将其移动到下一行。