Как выровнять по левому краю значок OutlineButton во Flutter?
Icon можно добавить следующим образом, но значок и текст на кнопке выровнены по центру. Есть ли способ выровнять значок по левому краю, а текст по центру?
return new OutlineButton.icon(
onPressed: onPressed,
label: new Text(title),
icon: icon,
highlightedBorderColor: Colors.orange,
color: Colors.green,
borderSide: new BorderSide(color: Colors.green),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(5.0)));





Есть много способов сделать это, но невозможно использовать конструктор фабрики, о котором вы упомянули OutlineButton.icon, вы можете пойти глубже и проверить исходный код, чтобы увидеть, как он создает виджет.
Вы можете создать свой собственный Widget, чтобы поместить значок слева и текст по центру.
Также вы можете использовать виджет OutlineButton и передать Stack / Row в качестве дочернего элемента, проверьте этот образец
OutlineButton(
onPressed: () => null,
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Icon(Icons.access_alarm)
),
Align(
alignment: Alignment.center,
child: Text(
"Testing",
textAlign: TextAlign.center,
)
)
],
),
highlightedBorderColor: Colors.orange,
color: Colors.green,
borderSide: new BorderSide(color: Colors.green),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(5.0)
)
)
Есть общие подходы, которые вы можете попробовать, я реализовал это:
OutlineButton(
onPressed: () => null,
child: Stack(
alignment: Alignment.centerLeft,
children: <Widget>[
Icon(Icons.save_alt_rounded),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Title'),
],
),
],
),
highlightedBorderColor: Colors.orange,
color: Colors.green,
borderSide: new BorderSide(color: Colors.green),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(5.0)
)
);
Я оборачиваю текстовый виджет с расширенным виджетом.
OutlinedButton.icon(
icon: Icon(
Icons.lock,
color: MyAppTheme.accentColor,
size: 20,
),
label: Expanded(
child: Text(
' Login',
style: TextStyle(
color: MyAppTheme.primaryColor,
fontSize: 16),
),
),
style: OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(5.0)),
side: BorderSide(color: MyAppTheme.primaryColor)
),
),