Round button with text and icon in flutter

Question

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

User · Answer

You can do something like   RaisedButton icon  elevation  4 0                      icon  Image asset  images image upload png   width  20 height  20                           color  Theme of context  primaryColor                      onPressed  getImage                      label  Text  Add Team Image  style  TextStyle                          color  Colors white  fontSize  16 0

User · Answer

You can achieve that by using a FlatButton that contains a Column  for showing a text below the icon  or a Row  for text next to the icon   and then having an Icon Widget and a Text widget as children   Here s an example   class MyPage extends StatelessWidget       override   Widget build BuildContext context    gt        Scaffold          appBar  AppBar            title  Text  Hello world                       body  Center            child  Column              mainAxisAlignment  MainAxisAlignment center              children   lt Widget gt                 FlatButton                  onPressed       gt                      color  Colors orange                  padding  EdgeInsets all 10 0                   child  Column     Replace with a Row for horizontal icon   text                   children   lt Widget gt                       Icon Icons add                       Text  Add                                                                                                           floatingActionButton  FloatingActionButton            onPressed       gt                tooltip   Increment             child  Icon Icons add                           This will produce the following

User · Answer

Congrats to the previous answers    But I realised if the icons are in a row  say three icons as represented in the image above   you need to play around with columns and rows  Here is the code  Column          crossAxisAlignment  CrossAxisAlignment start              children   lt Widget gt                 Row                  mainAxisAlignment  MainAxisAlignment spaceAround                  children                      FlatButton                        onPressed                               child  Icon                          Icons call                                              FlatButton                        onPressed                               child  Icon                          Icons message                                              FlatButton                        onPressed                               child  Icon                          Icons block                          color  Colors red                                                                              Row                  mainAxisAlignment  MainAxisAlignment spaceAround                  children   lt Widget gt                     Text                          Call                                          Text                       Message                                          Text                       Block                       style  TextStyle letterSpacing  2 0  color  Colors red                                                                                          Here is the result

User · Answer

If You need the text to be centered  and the image to be besides it  like this    Then You can achieve it with this widget tree   RaisedButton    onPressed           child  Row      mainAxisAlignment  MainAxisAlignment spaceBetween      children   lt Widget gt         Expanded child  Text           Push it    10          textAlign  TextAlign center                   Image network           https   picsum photos 250 image 9                             Full example available on my dartpad dev  link

User · Answer

The way i usually do it is by embedding a Row inside the Raised button   class Sendbutton extends StatelessWidget          override       Widget build BuildContext context            return RaisedButton            onPressed                   color  Colors black            textColor  Colors white            child  Row              children   lt Widget gt                 Text  Send                  Icon Icons send

User · Answer

Screenshot      SizedBox fromSize    size  Size 56  56      button width and height   child  ClipOval      child  Material        color  Colors orange     button color       child  InkWell          splashColor  Colors green     splash color         onTap            button pressed         child  Column            mainAxisAlignment  MainAxisAlignment center            children   lt Widget gt               Icon Icons call      icon             Text  Call       text

User · Answer

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

User · Answer

Use Column or Row in a Button child  Row for horizontal button  Column for vertical  and dont forget to contain it with the size you need   Container    width  120 0    height  30 0    child  RaisedButton      color  Color 0XFFFF0000       child  Row        children   lt Widget gt           Text  Play this song   style  TextStyle color  Colors white             Icon Icons play arrow  color  Colors white

User · Answer

If you need a button like this     You can use RaisedButton and use the child property to do this  You need to add a Row and inside row you can add a Text widget and an Icon Widget to achieve this  If you want to use png image  you can use similar widget to achieve this    RaisedButton      onPressed             color  Theme of context  accentColor      child  Padding        padding  EdgeInsets fromLTRB            SizeConfig safeBlockHorizontal   5            0            SizeConfig safeBlockHorizontal   5            0         child  Row          mainAxisAlignment  MainAxisAlignment spaceBetween          children   lt Widget gt             Text               Continue               style  TextStyle                fontSize  20                fontWeight  FontWeight w700                color  Colors white                                        Icon              Icons arrow forward              color  Colors white

[icons] Round button with text and icon in flutter

Examples related to icons

Examples related to flutter