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

Question

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

Answer 1

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.