Блог

Как я мог бы выровнять следующее так, чтобы начальные и конечные значки могли оставаться там, где они есть.

Но сделайте текст ровным, чтобы начать. Это означает, что текст «Изменить адрес электронной почты» остается таким, какой он есть.

Текстовый текст «Сменить пароль», начальная буква C будет соответствовать началу C и так далее?

В настоящее время используется параметр пробела между строками. Также пробовал использовать разделитель между виджетами, но это тоже не дает мне нужного контроля.

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

Хотите, чтобы это выглядело следующим образом:

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

Это то, что у меня есть в настоящее время. Как вы можете видеть, текст не выровнен.

Вы должны попробовать использовать ListTile для такого рода вещей, поскольку listTiles имеет параметры для начальных, заголовочных и конечных виджетов и автоматически выравнивает текст в заголовке, чтобы начать там, где вы хотите

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

Для этого вы также можете использовать mainAxisAlignment свойство виджета строки.

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

Это добавит максимальное пространство между всеми виджетами внутри виджета строки, что может помочь вам получить такой макет.

zaza.codes уже отвечает на вопрос, но в любом случае вы также можете получить строку в строке вместо использования списка.

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