Протяни и запусти FlatButton.icon

Question

В Column есть группа FlatButton, созданная с помощью FlatButton.icon(), так что изображение и текст расположены рядом друг с другом, мне нужно, чтобы содержимое FlatButton было выровнено по левому краю, но кнопка растягивается по горизонтали,

установка столбца crossAxisAlignment на CrossAxisAlignment.stretch растягивает ширину кнопки, как я хочу, но центрирует содержимое кнопки:

и установка его на CrossAxisAlignment.start выравнивает содержимое кнопки влево, но ширина кнопки уменьшается:

is Можно ли выровнять содержимое кнопки влево, но кнопка будет растянута? или я должен использовать другие комбинации виджетов (например, InkWell)

Answer 1

вы можете использовать обычный конструктор FlatButton(), который имеет дочернее свойство, а затем вы можете иметь строку в качестве дочерней, сделать ее mainAxisAlignment:MainAxisAlignment.start и сделать свой текст и значок детским, как показано ниже:

Scaffold(
          body: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              FlatButton(
                color: Colors.grey,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Icon(Icons.check),
                    SizedBox(width: 10),
                    Text('Recharge and balance')
                  ],
                ), onPressed: () {},
              )
            ],
          ),
        )

результат:

Answer 2

Это что-то вроде хака, но вы можете использовать обычный виджет FlatButton и сделать что-то вроде этого, может сработать:

class SampleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ConstrainedBox(
          constraints: BoxConstraints(
            maxWidth: 200,
          ),
          child: FlatButton(
            onPressed: () {},
            child: Row(
              children: <Widget>[
                Icon(Icons.home),
                Text('Recharge and balance'),
                Spacer(),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

Виджет Spacer будет занимать оставшееся пространство строки. Все, что вам нужно сделать, это просто настроить отступ Icon так же, как FlatButton.icon