How to align widget under another widget in Flutter?-CodePudding

I have a widget meant to represent progress which goes like this

I need to be able to put a name under a bubble, but when I do that 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.

I also tried putting the bars in a row with the circle:

 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

How can I align the text below the circle without causing problems with the lines?

The code for the entire widget (sorry that it's so long, don't know how to show it otherwise):

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

CodePudding user response：

One solution I would suggest is that try Wrapping Text with ConstrainedBox and Container and limit the max width.

For example -

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

Thought that will move the text in the next line if it is too long to be placed in a single line.