how to add icon at right side of RaisedButton? - flutter

Question

How to add icon to RaisedButton at the right side
Padding(
padding: const EdgeInsets.only(top: 15.0),
child: new SizedBox(
width: double.infinity,
child: new RaisedButton(
textColor: Colors.white,
color: coloraccent,
onPressed: () {},
child: const Text('UPADATE'),
)),
),

Answer 1

You can just wrap your RaisedButton.icon to the Directionality widget:
Directionality(
textDirection: TextDirection.rtl,
child: RaisedButton.icon(
onPressed: () {},
color: Colors.deepPurple,
icon: Icon(
Icons.arrow_drop_down,
color: Colors.white,
),
label: Text(
"Category",
style: TextStyle(color: Colors.white),
),
),
)

Answer 2

You can try this out, it works fine for me.
child: RaisedButton(
onPressed: () => navigateToLogin(context),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Continue",style: TextStyle(fontSize: 20)),
Icon(Icons.navigate_next)
],
),

Answer 3

use RaisedButton.icon constructor
Padding(
padding: const EdgeInsets.only(top: 15.0),
child: SizedBox(
width: double.infinity,
child: RaisedButton.icon(
icon: Icon(Icons.translate),
textColor: Colors.white,
color: Colors.lightBlue,
label: const Text('UPADATE'),
onPressed: () {},
)),
),

Answer 4

give a child to raised button like that
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween
children: <Widget>[
Text('some text'),
Icon(Icons.home),
],
),

Answer 5

I tried to use RaisedButton.Icon but it was not enough for me, because I usually customize the buttons with many design styles, so I used some techniques for placing text and Icon with RaisedButton.
You can try this, It worked for me. Let me explain in the code.
// Create a Raised Button.
RaisedButton(
color: Colors.pinkAccent, // Color pinkAccent
child: Row( // Add a Row Widget for placing objects.
mainAxisAlignment: MainAxisAlignment.center, // Center the Widgets.
mainAxisSize: MainAxisSize.max, // Use all of width in RaisedButton.
children: <Widget>[
Padding(
padding: EdgeInsets.all(5.0), // Give to the text some space.
child: Text(
"Enviar",
style: TextStyle(
fontSize: 18, // 18pt in font.
color: Colors.white, // You can ommit it if you use textColor in RaisedButton.
),
),
),
Icon(
Icons.send, // Send Icon. (Papper Plane Icon)
color: Colors.white, // White Color. You can ommit it too if you use textColor property on RaisedButton.
size: 18, // 18 pt, same as text.
),
],
),
onPressed: () {}, /// For enabling the button
),

Answer 6

Use RaisedButton.icon:
Doc says: Create a filled button from a pair of widgets that serve as
the button's icon and label.
The icon and label are arranged in a row and padded by 12 logical
pixels at the start, and 16 at the end, with an 8 pixel gap in
between.
RaisedButton.icon(
icon: Icon(Icons. ...), // <-- Icon you want.
textColor: Colors.white,
color: Colors.lightBlue,
label: const Text('UPADATE'), // <-- Your text.
onPressed: () {},
)),

Answer 7

use this code. you can add your required width as per text length
Container(
height: 35.0,
width: 95,
child: RaisedButton(
elevation: 10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(15.0),
),
),
color: Colors.white,
child: Row(
children: <Widget>[
Text('Call', style: TextStyle(color: Colors.black)),
SizedBox(width: 10),
Icon(Icons.call),
],
),
onPressed: () {},
),
);

Answer 8

If you still resist using RaisedButton.Icon instead of using the normal RaisedButton with Row widget as a child
Then you can swap between label and icon attributes because they both take a widget.
Like this:
RaisedButton.icon(
icon: const Text('UPADATE'),
label: Icon(Icons.translate),
textColor: Colors.white,
color: Colors.lightBlue,
onPressed: () {},
)

Answer 9

Here is my two buttons, Back and Next
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
RaisedButton(
color: const Color(0xFFFFB822), // Color pinkAccent
child: Row(
// Add a Row Widget for placing objects.
mainAxisAlignment: MainAxisAlignment.center, // Center the Widgets.
mainAxisSize: MainAxisSize.max, // Use all of width in RaisedButton.
children: <Widget>[
SizedBox(height: 10, width: 10),
Icon(
Icons.arrow_back_ios, // Send Icon. (Papper Plane Icon)
color: Colors.black, // White Color. You can ommit it too if you use textColor property on RaisedButton.
size: 18, // 18 pt, same as text.
),
Padding(
padding: EdgeInsets.all(5.0), // Give to the text some space.
child: Text(
"Back",
style: TextStyle(
fontWeight: FontWeight.w900,
color: Colors.black, // You can ommit it if you use textColor in RaisedButton.
),
),
),
],
),
onPressed: () {},
/// For enabling the button
),
RaisedButton(
color: const Color(0xFFFFB822), // Color pinkAccent
child: Row(
// Add a Row Widget for placing objects.
mainAxisAlignment: MainAxisAlignment.center, // Center the Widgets.
mainAxisSize: MainAxisSize.max, // Use all of width in RaisedButton.
children: <Widget>[
Padding(
padding: EdgeInsets.all(5.0), // Give to the text some space.
child: Text(
"Next",
style: TextStyle(
fontWeight: FontWeight.w900,
color: Colors.black, // You can ommit it if you use textColor in RaisedButton.
),
),
),
Icon(
Icons.arrow_forward_ios, // Send Icon. (Papper Plane Icon)
color: Colors.black, // White Color. You can ommit it too if you use textColor property on RaisedButton.
size: 18, // 18 pt, same as text.
),
],
),
onPressed: () {},
/// For enabling the button
),
],
),