How to left align the OutlineButton icon in Flutter
There are many ways you can do it, but it's not possible using the factory constructor that you mentioned OutlineButton.icon
, you can go deeper and check the source code to see how it build the widget.
You can create your own Widget
to put an icon to the left and the text centered.
Also you can use the OutlineButton
widget and pass a Stack/Row as a child, check this sample
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)
)
)
You can use OutlineButton.icon
, and simply wrap your Text with in Center
like this:
return new OutlineButton.icon(
onPressed: onPressed,
label: Center(child: new Text(title)),
icon: icon,
)
If you want the text left-aligned, this also works:
return new OutlineButton.icon(
onPressed: onPressed,
label: Align(alignment: Alignment.centerLeft, child: new Text(title)),
icon: icon,
)