I am trying to create a Flutter app that has a button with a text and icon as label, the icon being placed right of the text. The approach described in this post yields an odd looking button that seems expanded to the width of the app, see this image (link as I am not allowed to attach images):
Button becomes wide when adding a Row widget as child
It is not clear to me which layout widgets to use to tweak the text+image button to be formatted as the plain text button.
The code for producing the above example:
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
new RaisedButton(
onPressed: _incrementCounter,
child: new Row(
children: <Widget>[
new Text("Button with text and icon!"),
new Icon(Icons.lightbulb_outline)
],
),
),
new RaisedButton(
onPressed: _incrementCounter,
child: new Text("Button with only text")
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
),
);
}
}
The simplest way to create a button with icon and text in Flutter is to use the new Material button called ElevatedButton with an icon constructor. ElevatedButton. icon() gives you the ability to add the icon and label parameter to the button. The ElevatedButton was introduced with the release of Flutter v1.
You can use RaisedButton and use the child property to do this. You need to add a Row and inside row you can add a Text widget and an Icon Widget to achieve this. If you want to use png image, you can use similar widget to achieve this. Save this answer.
Steps to change icon button color in FlutterLocate the file where you have placed the IconButton widget. Inside the IconButton widget, add the color parameter and assign the color of your choice. Run the App.
Row property mainAxisSize: MainAxisSize.min
does the trick here.
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Home'),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new RaisedButton(
onPressed: () {},
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Text('Button with text and icon!'),
new Icon(Icons.lightbulb_outline),
],
),
),
new RaisedButton(
onPressed: () {},
child: new Text('Button with only text'),
)
],
),
),
);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With