Align widget in one parent relative to a widget in another parent - Flutter

Question

In my flutter project, I've the code structure as:

Column(
      children: [
        Row(
          children: statusViews,
        ),
        Row(
          children: textViews,
        )
      ],
    );

First row contains 4 Images with some Progress Bars in between them. And second row contains 4 Text for respective status images in first row. I want to center align text from second row relative to the image in first row.

So my basic question is: How can we align widget in one parent relative to a widget in another parent ?

Answer 1

have you tried wrapping each Row item in a column widget and placing the image and corresponding text in the column? it should be streight forward to center everything from there.

Update: looking at your code snippet, the Row children are a lists of widgets. in the code section where you create the widget list, wrap each item in a column and include the appropriate text and alignment.

Answer 2

For progress bar remove the text widget container.

body: Container(
    child: Column(children: [
      Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Column(children: [
              Container(
                  height: 100,
                  width: 100,
                  child: Image(
                      image: AssetImage("assets/images/ProfilePic.jpg"),
                      fit: BoxFit.contain)),
              Container(child: Text("Test"))
            ]),
          ]),
    ]),
  ),

Output