Space between Column s children in Flutter

Question

I have a Column widget with two TextField widgets as children and I want to have some space between both of them   I already tried mainAxisAlignment  MainAxisAlignment spaceAround  but the result was not what I wanted

User · Answer

Column    children   lt Widget gt       FirstWidget        Spacer        SecondWidget            Spacer creates a flexible space to insert into a  Flexible  widget   Like a column

User · Answer

Just use padding to wrap it like this   Column    children   lt Widget gt     Padding      padding  EdgeInsets all 8 0       child  Text  Hello World            Padding      padding  EdgeInsets all 8 0       child  Text  Hello World2               You can also use Container padding     or SizeBox height  x x   The last one is the most common but it will depents of how you want to manage the space of your widgets  I like to use padding if the space is part of the widget indeed and use sizebox for lists for example

User · Answer

For some kinda simple things like that You can easily use Wrap look at that example     Wrap         crossAxisAlignment  WrapCrossAlignment start         alignment  WrapAlignment center         direction  Axis vertical         spacing  30     to apply margin in the main axis of the wrap        runSpacing  30     to apply margin in the cross axis of the wrap        children   lt Widget gt           Text  Text 1            Text  Text 2

User · Answer

You can also use a helper function to add spacing after each child  List lt Widget gt  childrenWithSpacing      required List lt Widget gt  children    double spacing   8         final space   Container width  spacing  height  spacing     return children expand  widget    gt   widget  space   toList       So then  the returned list may be used as a children of a column Column    children  childrenWithSpacing      spacing  14      children          Text  This becomes a text with an adjacent spacing          if  true    true  Text  Also  makes it easy to add conditional widgets                    I m not sure though if it s wrong or have a performance penalty to run the children through a helper function for the same goal

User · Answer

There are many ways of doing it  I m listing a few here     Use Container and give some height   Column    children   lt Widget gt       Widget1        Container height  10      set height     Widget2            Use Spacer  Column    children   lt Widget gt       Widget1        Spacer       use Spacer     Widget2            Use Expanded  Column    children   lt Widget gt       Widget1        Expanded child  SizedBox        use Expanded     Widget2            Use mainAxisAlignment  Column    mainAxisAlignment  MainAxisAlignment spaceAround     mainAxisAlignment   children   lt Widget gt       Widget1        Widget2            Use Wrap   Wrap    direction  Axis vertical     make sure to set this   spacing  20     set your spacing   children   lt Widget gt       Widget1        Widget2

User · Answer

You may have to use SizedBox   widget between your column s children  Hope that ll be usefull

User · Answer

There are many answers here but I will put here the most important one which everyone should use  1  Column  Column            children   lt Widget gt               Text  Widget A      Can be any widget             SizedBox height  20      height is space betweeen your top and bottom widget             Text  Widget B      Can be any widget                          2  Wrap      Wrap            direction  Axis vertical     We have to declare Axis vertical  otherwise by default widget are drawn in horizontal order             spacing  20     Add spacing one time which is same for all other widgets in the children list             children   lt Widget gt                 Text  Widget A       Can be any widget               Text  Widget B       Can be any widget

User · Answer

you can use Wrap   widget instead Column   to add space between child widgets And use spacing property to give equal spacing between children  Wrap    spacing  20     to apply margin in the main axis of the wrap   runSpacing  20     to apply margin in the cross axis of the wrap   children   lt Widget gt        Text  child 1         Text  child 2

User · Answer

Column children   lt Widget gt      Container margin  EdgeInsets only top 12  child  yourWidget       Container margin  EdgeInsets only top 12  child  yourWidget

User · Answer

Columns Has no height by default  You can Wrap your Column to the Container and add the specific height to your Container  Then You can use something like below   Container     width  double infinity   Your desire Width    height  height   Your desire Height    child  Column        mainAxisAlignment  MainAxisAlignment spaceBetween        children   lt Widget gt            Text  One             Text  Two

User · Answer

You can solve this problem in different way      If you use Row Column then you have to use mainAxisAlignment    MainAxisAlignment spaceEvenly      If you use Wrap Widget you have to use runSpacing  5  spacing    10       In anywhere you can use SizeBox

User · Answer

The sized box will not help in the case  the phone is in landscape mode  body  Column        mainAxisAlignment  MainAxisAlignment spaceBetween        crossAxisAlignment  CrossAxisAlignment stretch        children   lt Widget gt           Expanded             child  Container              margin  EdgeInsets all 15 0               decoration  BoxDecoration                color  Color 0xFF1D1E33                 borderRadius  BorderRadius circular 10 0                                                  Expanded             child  Container              margin  EdgeInsets all 15 0               decoration  BoxDecoration                color  Color 0xFF1D1E33                 borderRadius  BorderRadius circular 10 0                                                  Expanded             child  Container              margin  EdgeInsets all 15 0               decoration  BoxDecoration                color  Color 0xFF1D1E33                 borderRadius  BorderRadius circular 10 0

User · Answer

You can put a SizedBox with a specific height between the widgets  like so   Column    children   lt Widget gt       FirstWidget        SizedBox height  100       SecondWidget              Why to prefer this over wrapping the widgets in Padding  Readability  There is less visual boilerplate  less indention and the code follows the typical reading-order

User · Answer

You can use Padding widget in between those two widget or wrap those widgets with Padding widget   Update  SizedBox widget can be use in between two widget to add space between two widget and it makes code more readable than padding widget   Ex   Column    children   lt Widget gt       Widget1        SizedBox height  10       Widget2

User · Answer

The same way SizedBox is used above for the purpose of code readability  you can use the Padding widget in the same manner and not have to make it a parent widget to any of the Column s children  Column    children   lt Widget gt       FirstWidget        Padding padding  EdgeInsets only top  40 0        SecondWidget

[dart] Space between Column's children in Flutter

Examples related to dart

Examples related to flutter

Examples related to flutter-layout