Create a rounded button button with border-radius in Flutter

Question

I m currently developing an Android app in Flutter  How can I add a rounded button

User · Answer

You can use this code for a transparent rounded button by passing a transparent color to the color property inside BoxDecoration. eg. color: Colors.transparent. Also, take note that this button makes use of only the Container and GestureDetector widgets.

Container(
    height: 50.0,
    child: GestureDetector(
        onTap: () {},
        child: Container(
            decoration: BoxDecoration(
                border: Border.all(
                    color: Color(0xFFF05A22),
                    style: BorderStyle.solid,
                    width: 1.0,
                ),
                color: Colors.transparent,
                borderRadius: BorderRadius.circular(30.0),
            ),
            child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    Center(
                        child: Text(
                           "BUTTON",
                            style: TextStyle(
                                color: Color(0xFFF05A22),
                                fontFamily: 'Montserrat',
                                fontSize: 16,
                                fontWeight: FontWeight.w600,
                                letterSpacing: 1,
                            ),
                        ),
                    )
                ],
            ),
        ),
    ),
)

User · Answer

In Flutter Container   widget use for styling your widget Using Container   widget you can set border or rounded corner of any widget   If you want to set any type of styling  amp  set decoration put that widget into the Container   widget  that provide many property to decoration   Container    width  100    padding  EdgeInsets all 10     alignment  Alignment center    decoration  BoxDecoration            color  Colors blueAccent            borderRadius  BorderRadius circular 30       make rounded corner   child  Text  Click

User · Answer

Since Sept 2020  flutter 1 22 0   Both  quot RaisedButton quot  and  quot FlatButton quot  are deprecated   The most up-to-date solution is to use new buttons  1  ElevatedButton    Code  ElevatedButton    child  Text  quot ElevatedButton quot      onPressed       gt  print  quot it s pressed quot      style  ElevatedButton styleFrom      primary  Colors red      onPrimary  Colors white      shape  RoundedRectangleBorder        borderRadius  BorderRadius circular 32 0                  Don t forget  there s also an  icon constructor to add an icon easily  ElevatedButton icon    icon  Icon Icons thumb up     label  Text  quot Like quot      onPressed       gt  print  quot it s pressed quot      style  ElevatedButton styleFrom      shape  RoundedRectangleBorder        borderRadius  BorderRadius circular 32 0                  2  OutlinedButton   Code  OutlinedButton icon    icon  Icon Icons star outline     label  Text  quot OutlinedButton quot      onPressed       gt  print  quot it s pressed quot      style  ElevatedButton styleFrom      side  BorderSide width  2 0  color  Colors blue       shape  RoundedRectangleBorder        borderRadius  BorderRadius circular 32 0                  3  TextButton  You can always use TextButton if you don t want outline or color fill

User · Answer

One of the simplest ways to create a rounded button is to use a FlatButton and then specify the roundness by setting its shape property  Follow the code below  x000D   x000D  FlatButton    padding  EdgeInsets all 30 0     color  Colors black    shape  RoundedRectangleBorder      borderRadius  BorderRadius circular 20 0      child  child  Text       Button       style  TextStyle color  Colors white          onPressed           print  Button pressed            x000D   x000D   x000D    Note  In order to change the roundness adjust the value inside BorderRadius circular

User · Answer

If anybody is looking for complete circular button than I achieved it this way   Center              child  SizedBox fromSize                size  Size 80  80      button width and height               child  ClipOval                  child  Material                    color  Colors pink 300      button color                   child  InkWell                      splashColor  Colors yellow     splash color                     onTap            button pressed                     child  Column                        mainAxisAlignment  MainAxisAlignment center                        children   lt Widget gt                           Icon Icons linked camera      icon                         Text  Picture       text

User · Answer

Another cool solution that works in 2021 TextButton        child  Padding          padding  const EdgeInsets all 5 0           child  Text  Follow Us  toUpperCase                    style  TextButton styleFrom        backgroundColor  Colors amber        shadowColor  Colors red        elevation  2        textStyle  TextStyle fontSize  18   fontWeight  FontWeight bold         shape  RoundedRectangleBorder        borderRadius  BorderRadius circular 5 0               onPressed             print  Pressed

User · Answer

You can simply use RaisedButton or you can use InkWell to get custom button and also properties like onDoubleTap  onLongPress and etc    new InkWell    onTap       gt  print  hello      child  new Container        width  100 0      height  50 0      decoration  new BoxDecoration        color  Colors blueAccent        border  new Border all color  Colors white  width  2 0         borderRadius  new BorderRadius circular 10 0              child  new Center child  new Text  Click Me   style  new TextStyle fontSize  18 0  color  Colors white                   If you want to use splashColor  highlightColor properties in InkWell widget  use Material widget as the parent of InkWell widget instead of decorating the container deleting decoration property   Read why  here

User · Answer

Now we have Icon Button to achieve rounded button click and overlay  However background color is not yet available but the same can be achieved by Circle avatar widget as follows  CircleAvatar              backgroundColor  const Color 0xffF4F3FA               child  IconButton                onPressed       gt  FlushbarHelper createInformation                        message   Work in progress                         show context                 icon  Icon Icons more vert                                Hope this helps some one

User · Answer

RaisedButton            child  Text  quot Button quot              onPressed                  shape  RoundedRectangleBorder borderRadius  new BorderRadius circular 30 0             side  BorderSide color  Colors red

User · Answer

1  Solution Summary You can use shape for FlatButton and RaisedButton  2  Rounded Button shape  RoundedRectangleBorder    borderRadius  BorderRadius circular 18 0     side  BorderSide color  Colors red       Square Button shape  RoundedRectangleBorder    borderRadius  BorderRadius zero    side  BorderSide color  Colors red       Complete Example Row    mainAxisAlignment  MainAxisAlignment end    children   lt Widget gt       FlatButton        shape  RoundedRectangleBorder          borderRadius  BorderRadius circular 18 0           side  BorderSide color  Colors red          color  Colors white        textColor  Colors red        padding  EdgeInsets all 8 0         onPressed               child  Text           quot Add to Cart quot  toUpperCase            style  TextStyle            fontSize  14 0                                 SizedBox width  10       RaisedButton        shape  RoundedRectangleBorder          borderRadius  BorderRadius circular 18 0           side  BorderSide color  Colors red          onPressed               color  Colors red        textColor  Colors white        child  Text  quot Buy now quot  toUpperCase            style  TextStyle fontSize  14

User · Answer

There are many ways of doing it  I am listing few here     1  Using RoundedRectangleBorder  RaisedButton    shape  RoundedRectangleBorder borderRadius  BorderRadius circular 20      onPressed           child  Text  Button         2  Using ClipRRect  ClipRRect    borderRadius  BorderRadius circular 40     child  RaisedButton      onPressed             child  Text  Button              3  Using ClipOval  ClipOval    child  RaisedButton      onPressed             child  Text  Button              4  Using ButtonTheme  ButtonTheme    shape  RoundedRectangleBorder borderRadius  BorderRadius circular 20      child  RaisedButton      onPressed             child  Text  Button              5  Using StadiumBorder  RaisedButton    shape  StadiumBorder      onPressed           child  Text  Button

User · Answer

You can simply use RaisedButton    Padding    padding  EdgeInsets only left  150 0  right  0 0     child  RaisedButton      textColor  Colors white      color  Colors black      child  Text  Search        onPressed             shape  new RoundedRectangleBorder        borderRadius  new BorderRadius circular 30 0                   Output     More info  RSCoder

User · Answer

to use any shape in You r Button make sure you perform all the code inside Button widget     shape  RoundedRectangleBorder          borderRadius  new BorderRadius circular 18 0           side  BorderSide color  Colors red         if you want make it Square used   BorderRadius circular 0 0   it automatically make into Square  the button like this     Here is the all source code for the give UI Screen   Scaffold      backgroundColor  Color 0xFF8E44AD       body  new Center        child  Column          children   lt Widget gt             Container              margin  EdgeInsets fromLTRB 90  10  20  0               padding  new EdgeInsets only top  92 0               child  Text                 Currency Converter                 style  TextStyle                  fontSize  48                  fontWeight  FontWeight bold                  color  Colors white                                                         Container              margin  EdgeInsets only                padding  EdgeInsets all 25               child  TextFormField                decoration  new InputDecoration                  filled  true                  fillColor  Colors white                  labelText   Amount                   border  OutlineInputBorder                    borderRadius  BorderRadius circular 10                                                                             Container              padding  EdgeInsets all 25               child  TextFormField                decoration  new InputDecoration                  filled  true                  fillColor  Colors white                  labelText   From                   border  OutlineInputBorder                    borderRadius  BorderRadius circular 10                                                                             Container              padding  EdgeInsets all 25               child  TextFormField                decoration  new InputDecoration                    filled  true                    fillColor  Colors white                    labelText   To                     border  OutlineInputBorder                      borderRadius  BorderRadius circular 10                                                               SizedBox height  20 0             MaterialButton              height  58              minWidth  340              shape  RoundedRectangleBorder                  borderRadius  new BorderRadius circular 12                onPressed                     child  Text                 CONVERT                 style  TextStyle                  fontSize  24                  color  Colors black                                              color  Color 0xFFF7CA18

User · Answer

You can create a custom view and put it inside a GestureDetector for it to behave like a button  The benefit is that you can provide endless types of custom decoration  including making it round with specified radius  to the container

User · Answer

You can use the RaisedButton Widget  Raised Button Widget has shape property which you can utilise as shown in below snippet    RaisedButton            child  Text  Press Me              onPressed  null            shape  RoundedRectangleBorder borderRadius  new BorderRadius circular 30 0

User · Answer

You can use the below code to make rounded button with a gradient color    Container            width  130 0            height  43 0            decoration  BoxDecoration              borderRadius  BorderRadius circular 30 0               gradient  LinearGradient                   Where the linear gradient begins and ends               begin  Alignment topRight                end  Alignment bottomLeft                   Add one stop for each color  Stops should increase from 0 to 1               stops   0 1  0 9                 colors                       Colors are easy thanks to Flutter s Colors class                  Color 0xff1d83ab                   Color 0xff0cbab8                                                          child  FlatButton              child  Text                 Sign In                 style  TextStyle                  fontSize  16 0                  fontFamily   Righteous                   fontWeight  FontWeight w600                                              textColor  Colors white              color  Colors transparent              shape                  RoundedRectangleBorder borderRadius  BorderRadius circular 30 0                onPressed

User · Answer

Different ways to create a Rounded button are as follows FlatButton Button with Shape RoundedRectangleBorder FlatButton  minWidth  260  height  60  shape  RoundedRectangleBorder  borderRadius  BorderRadius circular 18 0   side  BorderSide color  Colors red    color  Colors white  textColor  Colors red  padding  EdgeInsets all 8 0   onPressed         child  Text   quot Add to Cart quot  toUpperCase    style  TextStyle  fontSize  14 0            RaisedButton Button with Shape RoundedRectangleBorder RaisedButton  padding  EdgeInsets only left  100  right  100  top  20  bottom  20   shape  RoundedRectangleBorder  borderRadius  BorderRadius circular 28 0   side  BorderSide color  Colors red    onPressed         color  Colors red  textColor  Colors white  child  Text  quot Buy now quot  toUpperCase    style  TextStyle fontSize  14               RaisedButton Button with Shape StadiumBorder   RaisedButton  padding  EdgeInsets only left  100  right  100  top  20  bottom  20   shape  StadiumBorder    onPressed         child  Text  quot Button quot       RaisedButton Button with ClipRRect ClipRRect  borderRadius  BorderRadius circular 40   child  RaisedButton  padding  EdgeInsets only  left  100  right  100  top  20  bottom  20   onPressed         child  Text  quot Button quot          RaisedButton Button with ClipOval ClipOval  child  RaisedButton  onPressed         child  Text  quot Button quot           RaisedButton Button with ButtonTheme ButtonTheme  shape  RoundedRectangleBorder  borderRadius  BorderRadius circular 20    child  RaisedButton  onPressed         child  Text  quot Button quot          practical demonstration of a round button can be found in below dartpad link Rounded Button Demo Examples on DartPad

User · Answer

You can use ButtonTheme   also  Here is a example code - ButtonTheme                minWidth  200 0                shape  RoundedRectangleBorder                    borderRadius  BorderRadius circular 18 0                     side  BorderSide color  Colors green                  child  RaisedButton                  elevation  5 0                  hoverColor  Colors green                  color  Colors amber                  child  Text                     quot Place Order quot                     style  TextStyle                        color  Colors white  fontWeight  FontWeight bold                                      onPressed

User · Answer

here is another solution   Container                      height  MediaQuery of context  size height   0 10                      width  MediaQuery of context  size width                      child  ButtonTheme                        minWidth  MediaQuery of context  size width   0 75                        child  RaisedButton                          shape  RoundedRectangleBorder                              borderRadius  new BorderRadius circular 25 0                               side  BorderSide color  Colors blue                            onPressed     async                                 do something                                                     color  Colors red 900                           textColor  Colors white                          child  Padding                            padding  const EdgeInsets all 8 0                             child  Text  Button Text                                style  TextStyle fontSize  24

User · Answer

You can always use material button if you are using Material App as your main Widget   Padding    padding  EdgeInsets symmetric vertical  16 0     child  Material      borderRadius  BorderRadius circular 30 0    Set this up for rounding corners      shadowColor  Colors lightBlueAccent shade100      child  MaterialButton        minWidth  200 0        height  42 0        onPressed       Actions here           color  Colors lightBlueAccent        child  Text  Log in   style  TextStyle color  Colors white

User · Answer

New Elevate Button-------- gt       style --- gt           customElevatedButton  radius  color     gt  ElevatedButton styleFrom            shape  RoundedRectangleBorder              borderRadius  BorderRadius circular radius    null   100   radius                          primary  color                icon--- gt       Widget saveIcon     gt  iconsStyle1            Icons save                common icon style      iconsStyle1 icon    gt  Icon            icon            color  white            size  15              button use--- gt       ElevatedButton icon                              icon  saveIcon                                style                                  customElevatedButton color  Colors green 700                                label  Text  Save                                   style  TextStyle color  Colors white                                onPressed

User · Answer

Here is the code for your problem you just have to take simple container with border radius in boxdecoration       new Container        alignment  Alignment center        decoration  BoxDecoration          borderRadius  BorderRadius all Radius circular 15 0            color  Colors blue                  child  Row          mainAxisAlignment  MainAxisAlignment center          children   lt Widget gt             Padding              padding  const EdgeInsets all 10 0               child  new Text                 Next                 style  new TextStyle                   fontWeight  FontWeight w500                    color  Colors white                    fontSize  15 0

User · Answer

Container          width  yourWidth          height  yourHeight           decoration  BoxDecoration              borderRadius  radius              gradient  yourGradient              border  yourBorder           child  FlatButton            onPressed                   shape  RoundedRectangleBorder borderRadius  radius                and use the same radius

User · Answer

You can also achieve it by using  StadiumBorder shape FlatButton    onPressed           child  Text  StadiumBorder      shape  StadiumBorder      color  Colors pink    textColor  Colors white

[flutter] Create a rounded button / button with border-radius in Flutter

Examples related to flutter

Examples related to dart