Align text in a row with multiple widgets

user_2840178 0
Viewed 79

How could I align the following such that the starting icons and ending icons could stay where they are.

But make the text aligh to start. Meaning that 'Change Email Address' text remains as it is.

The text text 'Change Password', The starting letter C will aligh to The top C and so on?

Currently using Row's spaceBetween option. Also tried with Spacer between the widget's but that doesn't give me the control I want either.

Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
        Icon(Icons.email),
        // Spacer(flex: 2), // playing around with spacer and flex doesn't give the control I am looking for 
        Text('Change Email Address'),
        Icon(Icons.keyboard_arrow_right),
    ],
),
SizedBox(height: 10),
Divider(),
SizedBox(height: 10),
Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween  ,
    children: [
        Icon(Icons.lock),
        Text('Change Password'),
        Icon(Icons.keyboard_arrow_right),
    ],
),

Looking to make it look like following:

icon   Change Email Address     Icon
icon   Change Password          Icon
icon   Change Add / Change Bio  Icon
icon   Notification             Icon
icon   Sign Out                 Icon

This is what I have currently. As you can see, the text is not aligned.

enter image description here

dart flutter
3 Answers

You should try using a listTile for this kind of thing, since listTiles has parameters for leading, title and trailing widgets and would automatically align the text in the title to start where you want it to

Column(
    children: [
      ListTile(
       leading: Icon(Icons.lock),
       title: Text('Change Email Address'),
       trailing: Icon(Icons.keyboard_arrow_right),
       ),
       ListTile(
        leading: Icon(Icons.lock),
        title: Text('Change Password'),
        trailing: Icon(Icons.keyboard_arrow_right),
       ),
    ],
)
user_111729510

For this you can also use the mainAxisAlignment property of the Row widget.

Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Icon(Icons.home),
      Text("Home")
      Icon(Icons.arrow_forward_ios),
    ],
)

This will add space maximum space between all the widgets inside the row widget which can help you to get this kind of layout.

user_113430760

zaza.codes already answer the question but any way you can also achieve Row in row instead of using listile.

Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
      Icon(Icons.home),
      Text("Home")
      ]
      ),
      Icon(Icons.arrow_forward_ios),
    ],
)
user_115857230
Related