Set the space between Elements in Row Flutter

Question

Code     new Container            alignment  FractionalOffset center            child  new Row              mainAxisAlignment  MainAxisAlignment spaceEvenly              children   lt Widget gt                 new FlatButton                  child  new Text  Don  t have an account    style  new TextStyle color  Color 0xFF2E3233                                    new FlatButton                  child  new Text  Register    style  new TextStyle color  Color 0xFF84A2AF   fontWeight  FontWeight bold                     onPressed  moveToRegister                                                             And here is the result  https   www dropbox com s sxklyutyvbbura8 Screenshot 20181104-150928 png dl 0    How to fix that the two FlatButton elements are side by side without space between the center of the screen width

User · Answer

I believe the original post was about removing the space between the buttons in a row  not adding space   The trick is that the minimum space between the buttons was due to padding built into the buttons as part of the material design specification   So  don t use buttons  But a GestureDetector instead  This widget type give the onClick   onTap functionality but without the styling   See this post for an example   https   stackoverflow com a 56001817 766115

User · Answer

Removing Space-   new Row              mainAxisAlignment  MainAxisAlignment center              children   lt Widget gt                 GestureDetector                  child  new Text  Don  t have an account                        style  new TextStyle color  Color 0xFF2E3233                     onTap                                        GestureDetector                  onTap                          child  new Text                   Register                    style  new TextStyle                      color  Color 0xFF84A2AF   fontWeight  FontWeight bold                                                  OR  GestureDetector              onTap                    child  new Row                mainAxisAlignment  MainAxisAlignment center                children   lt Widget gt                   new Text  Don  t have an account                        style  new TextStyle color  Color 0xFF2E3233                     new Text                     Register                      style  new TextStyle                    color  Color 0xFF84A2AF   fontWeight  FontWeight bold

User · Answer

Just add  quot Container width  5  color  Colors transparent   quot  between elements new Container        alignment  FractionalOffset center        child  new Row          mainAxisAlignment  MainAxisAlignment spaceEvenly          children   lt Widget gt             new FlatButton              child  new Text  Don  t have an account    style  new TextStyle color  Color 0xFF2E3233                              Container width  5  color  Colors transparent             new FlatButton              child  new Text  Register    style  new TextStyle color  Color 0xFF84A2AF   fontWeight  FontWeight bold                 onPressed  moveToRegister

User · Answer

You can use Spacers if all you want is a little bit of spacing between items in a row  The example below centers 2 Text widgets within a row with some spacing between them  Spacer creates an adjustable  empty spacer that can be used to tune the spacing between widgets in a Flex container  like Row or Column  In a row  if we want to put space between two widgets such that it occupies all remaining space      widget   Row       children   lt Widget gt         Spacer flex  20         Text           quot Item  1 quot                  Spacer        Defaults to flex  1       Text           quot Item  2 quot                  Spacer flex  20

User · Answer

There are many ways of doing it  I m listing a few here    Use SizedBox if you want to set some specific space  Row    children   lt Widget gt       Text  1        SizedBox width  50      give it width     Text  2                   Use Spacer if you want both to be as far apart as possible    Row    children   lt Widget gt       Text  1        Spacer       use Spacer     Text  2                   Use mainAxisAlignment according to your needs   Row    mainAxisAlignment  MainAxisAlignment spaceEvenly     use whichever suits your need   children   lt Widget gt       Text  1        Text  2                   Use Wrap instead of Row and give some spacing  Wrap    spacing  100     set spacing here   children   lt Widget gt       Text  1        Text  2                   Use Wrap instead of Row and give it alignment  Wrap    alignment  WrapAlignment spaceAround     set your alignment   children   lt Widget gt       Text  1        Text  2

User · Answer

To make an exact spacing  I use Padding  An example with two images   Row      mainAxisAlignment  MainAxisAlignment spaceAround      children   lt Widget gt         Expanded          child  Padding            padding  const EdgeInsets all 16 0             child  Image asset  images user1 png                              Expanded          child  Padding            padding  const EdgeInsets all 16 0             child  Image asset  images user2 png

User · Answer

Row   children   lt Widget gt     Flexible     child  TextFormField       Container width  20  height  20     Flexible     child  TextFormField         This works for me  there are 3 widgets inside row  Flexible  Container  Flexible

User · Answer

MainAxisAlignment  start - Place the children as close to the start of the main axis as possible     end - Place the children as close to the end of the main axis as possible     center - Place the children as close to the middle of the main axis as possible     spaceBetween - Place the free space evenly between the children     spaceAround - Place the free space evenly between the children as well as half of that space before and after the first and last child     spaceEvenly - Place the free space evenly between the children as well as before and after the first and last child     Example     child  Row          mainAxisAlignment  MainAxisAlignment spaceBetween          children   lt Widget gt             Text  Row1              Text  Row2

[flutter] Set the space between Elements in Row Flutter

Examples related to flutter

Examples related to dart

Examples related to flutter-layout