These days I am developing flutter mobile application for the Android platform. I want to add a button with text an icon/image. That image must be the right side of the button text.
I have already attached the image here.
This is my code.
child: FlatButton.icon(
icon: Image.asset("images/notesicon.png", width: 20.0,height: 20.0,),
label: Text("Add Note",
style: TextStyle(
fontSize: 11.0,
fontFamily: "Raleway"
),
),
textColor: Colors.white,
color: Color(0xFF226597),
shape: OutlineInputBorder(borderSide: BorderSide(
style: BorderStyle.solid,
width: 1.0,
color: Colors.black),
borderRadius: new BorderRadius.circular(20.0)
),
),
Just flip them. (lable<->icon) since they both accept any widget.
child: FlatButton.icon(
icon: Text("Add Note",
style: TextStyle(
fontSize: 11.0,
fontFamily: "Raleway"
),
),
label: Image.asset("images/notesicon.png", width: 20.0,height: 20.0,),
textColor: Colors.white,
color: Color(0xFF226597),
shape: OutlineInputBorder(borderSide: BorderSide(
style: BorderStyle.solid,
width: 1.0,
color: Colors.black),
borderRadius: new BorderRadius.circular(20.0)
),
),
Here you have your code fixed , don't use FlatButton.icon
just use the FlatButton
constructor and add a custom child , Row
in this case.
SizedBox(
width: 150,
child: FlatButton(
child: Row(
children: [
Text(
"Add Note",
style: TextStyle(fontSize: 11.0, fontFamily: "Raleway"),
),
Image.asset(
"images/notesicon.png",
width: 20.0,
height: 20.0,
)
],
),
onPressed: () {},
textColor: Colors.white,
color: Color(0xFF226597),
shape: OutlineInputBorder(
borderSide: BorderSide(
style: BorderStyle.solid, width: 1.0, color: Colors.black),
borderRadius: new BorderRadius.circular(20.0)),
),
),
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