how to add a button with icon in Flutter

Question

I have a button in my app like

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

Can anyone help in this or any suggestions?

Answer 1

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

Answer 2

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),
        ],
      ),
    ),