how to add a button with icon in Flutter

user_11916464 0
Viewed 6829

I have a button in my app like

this

And below is the code for the same

Widget loginButtonChild = const Text(
  "Log in",
  style: TextStyle(
    color: Colors.white,
    fontFamily: "OpenSans-Regular",
  ),
);


FlatButton.icon(
  shape: RoundedRectangleBorder(
    borderRadius: new BorderRadius.circular(18.0),
    side: BorderSide(color: Colors.red)),
  color: Colors.red,
  label: loginButtonChild, 
  icon: Icon(Icons.arrow_forward ), 
  onPressed: () {
   //some function
  },
)

I am trying to create a button something like

this

Can anyone help in this or any suggestions?

dart flutter button
3 Answers

First off, FlatButton and RaisedButton are deprecated. Use TextButton and ElevatedButton instead.

If you want to add an icon to a text button, use ElevatedButton.icon or TextButton.icon constructor. It will add the icon to the left of the text.

However if you want to add the icon to the right of the text. swap the icon with text and vice versa. This works because both icon and text params are Widget

// icon before text
ElevatedButton.icon(
  icon: Icon(Icons.arrow_forward, size: 16),
  label: Text('Icon Button'),
  onPressed: () => {},
),

// icon after text
ElevatedButton.icon(
  icon: Text('Icon Button'),
  label: Icon(Icons.arrow_forward, size: 16),
  onPressed: () => {},
),

Live Demo

user_94494260

Use that

RaisedButton(
      onPressed: () {},
      padding: const EdgeInsets.symmetric(horizontal: 24),
      color: Colors.redAccent,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(24),
      ),
      child: Row(
        children: <Widget>[
          Text("Label", style: TextStyle(color: Colors.white)),
          SizedBox(width: 6),
          Icon(Icons.chevron_right, color: Colors.white),
        ],
      ),
    ),
user_120241140

FlatButton.icon puts the icon on the left, what you can do is use FlatButton and in the child put a Row with the label + icon, like this:

FlatButton(
  shape: RoundedRectangleBorder(
      borderRadius: new BorderRadius.circular(18.0),
      side: BorderSide(color: Colors.red)),
  color: Colors.red,
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      loginButtonChild,
      const SizedBox(width: 8.0),
      Icon(Icons.arrow_forward),
    ],
  ),
  onPressed: () {
    //some function
  },
)

If you want to have the button with elevation, just change FlatButton for RaisedButton

user_119384620
Related