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 ?

JonnyH · Answer 1 · 2020-09-26T17:53:31.847

0

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.

edited Sep 26 '20 at 17:53

answered Sep 26 '20 at 17:48

JonnyH

358
2
8

Yes, I've tried that, but the space between icon and progress was too large. – iAkshay Sep 28 '20 at 07:00

Lalit M · Answer 2 · 2020-09-27T05:42:51.920

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

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

2 Answers2