Search code examples
iconsflutter

Round button with text and icon in flutter

how to have a button with text and icon for the flutter?

I wanted to have a button which looks like icon with a text that is able to put at the bottom of the screen

For example, the icon is like at here: android-button-with-icon-and-text

enter image description here

Solution

  • EDIT 1: With Flutter 1.20 release Flutter Team did breaking changes introducing new buttons. So the below mentioned button types are deprecated. Use TextButton instead of FlatButton and ElevatedButton instead of RaisedButton.

    TextButton.icon(onPressed: null, icon: null, label: null);
ElevatedButton.icon(onPressed: null, icon: null, label: null);

    See breaking changes for buttons and their themes here

    Note: FlatButton and RaisedButton is DEPRECATED

    You can simply use named constructors for creating different types of buttons with icons. For instance

    FlatButton.icon(onPressed: null, icon: null, label: null);
RaisedButton.icon(onPressed: null, icon: null, label: null);

    But if you have specfic requirements then you can always create custom button with different layouts or simply wrap a widget in GestureDetector.