how to have a button with text and icon for the flutter
?
I wanted to have a button
which looks like icon with a text that is able to put at the bottom of the screen
For example, the icon is like at here: android-button-with-icon-and-text
You can achieve that by using a FlatButton
that contains a Column
(for showing a text below the icon) or a Row
(for text next to the icon), and then having an Icon
Widget and a Text
widget as children.
Here's an example:
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) =>
Scaffold(
appBar: AppBar(
title: Text("Hello world"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlatButton(
onPressed: () => {},
color: Colors.orange,
padding: EdgeInsets.all(10.0),
child: Column( // Replace with a Row for horizontal icon + text
children: <Widget>[
Icon(Icons.add),
Text("Add")
],
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
This will produce the following:
Congrats to the previous answers... But I realised if the icons are in a row (say three icons as represented in the image above), you need to play around with columns and rows.
Here is the code
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
FlatButton(
onPressed: () {},
child: Icon(
Icons.call,
)),
FlatButton(
onPressed: () {},
child: Icon(
Icons.message,
)),
FlatButton(
onPressed: () {},
child: Icon(
Icons.block,
color: Colors.red,
)),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text(
' Call',
),
Text(
'Message',
),
Text(
'Block',
style: TextStyle(letterSpacing: 2.0, color: Colors.red),
),
],
),
],
),
If you need a button like this:
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.
RaisedButton(
onPressed: () {},
color: Theme.of(context).accentColor,
child: Padding(
padding: EdgeInsets.fromLTRB(
SizeConfig.safeBlockHorizontal * 5,
0,
SizeConfig.safeBlockHorizontal * 5,
0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Continue',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: Colors.white,
),
),
Icon(
Icons.arrow_forward,
color: Colors.white,
)
],
),
),
),
Screenshot:
SizedBox.fromSize(
size: Size(56, 56), // button width and height
child: ClipOval(
child: Material(
color: Colors.orange, // button color
child: InkWell(
splashColor: Colors.green, // splash color
onTap: () {}, // button pressed
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.call), // icon
Text("Call"), // text
],
),
),
),
),
)
Use Column or Row in a Button child, Row for horizontal button, Column for vertical, and dont forget to contain it with the size you need:
Container(
width: 120.0,
height: 30.0,
child: RaisedButton(
color: Color(0XFFFF0000),
child: Row(
children: <Widget>[
Text('Play this song', style: TextStyle(color: Colors.white),),
Icon(Icons.play_arrow, color: Colors.white,),
],
),
),
),
If You need the text to be centered, and the image to be besides it, like this:
Then You can achieve it with this widget tree:
RaisedButton(
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(child: Text(
'Push it! '*10,
textAlign: TextAlign.center,
),),
Image.network(
'https://picsum.photos/250?image=9',
),
],
),
),
The way i usually do it is by embedding a Row inside the Raised button:
class Sendbutton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: () {},
color: Colors.black,
textColor: Colors.white,
child: Row(
children: <Widget>[
Text('Send'),
Icon(Icons.send)
],
),
);
}
}
You can do something like,
RaisedButton.icon( elevation: 4.0,
icon: Image.asset('images/image_upload.png' ,width: 20,height: 20,) ,
color: Theme.of(context).primaryColor,
onPressed: getImage,
label: Text("Add Team Image",style: TextStyle(
color: Colors.white, fontSize: 16.0))
),
Source: Stackoverflow.com