CODEWITHSUNDEEP
flutterdartbutton
HARISH
HARISH

Reputation: 179

how to add a button with icon in Flutter

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?

Upvotes: 4

Views: 9521

Answers (3)

NearHuscarl
NearHuscarl

Reputation: 81270

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

Upvotes: 11

ibrahimkarahan
ibrahimkarahan

Reputation: 3015

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

Upvotes: 4

Pablo Barrera
Pablo Barrera

Reputation: 10953

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

Upvotes: 1

Related Questions