main issue is i want to add some space between Rows and this Rows are children of SingleChildScrollView, my widget tree :
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
// first row with 3 column
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(),
Container(),
Container(),
],
),
Row(
// second row also with 3 column ans so on
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(),
Container(),
Container(),
//Row( third row also with 3 column ans so on
//Row( fourth row also with 3 column ans so on
// ....
],
),
],
),
),
i got the following out put :
so how to add more space to the widget SingleChildScrollView , so to expect that mainAxisAlignment:MainAxisAlignment.spaceBetween put some space between the rows , or how simply add a space between rows?
Things like SizedBox work great if you are happy with a fixed pixel gap. Spacer is another alternative, and is flexed, which may or may not be what you want, depending on what you have it nested under. If you prefer to work with relative sizes, I can also recommend FractionallySizedBox, which operates on a percentage of the area, and works great for responsive designs. If you wanted to have a 5% vertical gap, for example, you could express this as:
FractionallySizedBox(heightFactor: 0.05),
try between the rows
SizedBox(height:20),
final code
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
// first row with 3 column
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(),
Container(),
Container(),
],
),
SizedBox(height:20),
Row(
// second row also with 3 column ans so on
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(),
Container(),
Container(),
//Row( third row also with 3 column ans so on
//Row( fourth row also with 3 column ans so on
// ....
],
),
],
),
),
Insert a Padding widget.
Row(...),
Padding(padding: EdgeInsets.only(bottom: 10),
Row(...)
You can also use Spacer( ... . )
For me Padding is ok
Row(...),
SizedBox(width:20). // If want horizontal space use width for vertical use height
Row(...)
you can use SizedBox b/w Rows
Related
I am facing error in the Text widget which is in Column.
body: Padding(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.songModel.displayNameWOExt, <------- here is my text
),
Text(
widget.songModel.artist.toString(),
overflow: TextOverflow.fade,
),
],
),
],
), ), );
This is what happened to me
This is what i need look like
Wrap the Text that is inside a Row widget with an Expanded widget:
Expanded(child: Text(/* Here the text*/),
wrap the text with the container and give a specific size to the container after that use overflow: TextOverflow.fade or any other property of "overflow", because these properties only work when you give a size to textfield but you cant give size to textfield so wrap it with container.
try embedding the Text() widget inside a Expanded() widget expanded documentation
Expanded is a widget that expands a child of a Row, Column, or Flex so that the child fills the available space.
I'm struggling with this and can't describe it as well as I should on search engine, so here's my problem: I have a Row containing two Expanded with flex: 5 aiming to have two width-equal cells; inside the first cell, I have a Column (containing a Table and a Button); inside the second cell I have a Column (containing a ListView and a Button); I'd like to force the ListView to become scrollable once its content gets higher than first cell's intrinsic height, so second cell's height never gets higher than first cell's height.
Row(
children: [
Expanded(
flex: 5,
child: Column(
children: [
DataTable(),
ElevatedButton()
]
), // Column
), // Expanded
Expanded(
flex: 5,
child: Column(
children: [
ListView(),
ElevatedButton()
]
), // Column
) // Expanded
]
) // Row
I lost myself trying stuff with shrinkWrap: true on the ListView, IntrinsicHeight() around the Row, etc.
Thank you for your help!
EDIT:
Solution I found is going the hard way by listening to first cell's size changes and to set its height as second cell's height (thanks to this Medium link). Even tho I'd rather go for a cleaner way, it seems to work like it should.
This is what my code currently looks like:
Row(
children: [
Expanded(
flex: 5,
child: WidgetSize(
onChange: (size) {
if (size != null)
setState(() => heightOfTable = (size as Size).height);
},
child: Column(
children: [
DataTable(),
ElevatedButton()
]
), // Column
), // WidgetSize
), // Expanded
Expanded(
flex: 5,
child: Container(
height: heightOfTable,
child: Column(
children: [
ListView(),
ElevatedButton()
]
), // Column
), // Container
) // Expanded
]
) // Row
If you've got a better idea, please let me know! :)
I think you can try wrapping the ListView inside a Container and give a suitable height and `width.
Row(
children: [
Expanded(
flex: 5,
child: Column(
children: [
DataTable(),
ElevatedButton()
]
), // Column
), // Expanded
Expanded(
flex: 5,
child: Column(
children: [
Container(
height:,
width:,
child: ListView()),
ElevatedButton()
]
), // Column
) // Expanded
]
) // Row
I have a Row with three elements. I want to have the second element right in the middle of the space occupied by the row and not depending on the first element of the row. I've tried like this but seems that the _buildLogo widget is center align between the end of first element and the starting point of the third element.
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
_buildCancelButton(),
_buildLogo(),
_buildExtraText(),
],
),
I've also tried with a Stack/Row combination but then I have problems with the vertical alignment.
child: Stack(
children: [
_buildLogo(),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
_buildCancelButton(),
_buildExtraText(),
],
),
),
],
I will attach a picture with my result.
Adding Spacer() between the _buildLogo() will lead with the same result.
_buildCancelButton(),
Spacer(),
_buildLogo(),
Spacer(),
_buildExtraText(),
I think your logo actually is in the middle, but it kind a looks a little bit off, because of the icon on the left side. Maybe a 'dumb' beginner-solution is adding some sapces after the 'AirDolomiti'-text (like this: 'AirDolomiti ').
Did this help or did I missunderstand your question?
Use Spacer(). It will align your 2nd widget in center.
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
_buildCancelButton(),
Spacer(), //add it here
_buildLogo(),
Spacer(), // add it here
_buildExtraText(),
],
),
Note: the buildLogo's horizontal alignment will depend on first and third widget's width
If Left and right widget are same size then the middle widget will be in center. So make it equal, use sizedbox.
I am trying to have 2 rows inside my snackbar and for this I put it inside one column. and the result is that of the gif.
How can I make it the default height of the snackbar? I don't want the column to continue to fill the entire screen
SnackBar(
backgroundColor: _color,
content: Container(
child: Column(
children: <Widget>[
Row(children: <Widget>[_icon]),
Row(children: <Widget>[
SizedBox(width: 10),
]),
Row(children: <Widget>[
Text(_accion_toast + ". " + mensaje),
]),
]),
),
duration: Duration(milliseconds: 1500),
);
How can I do it?
You can specify how the column should allocate the size to the children with its mainAxisSize property.
You can pass the value MainAxisSize.min to use only the space needed.
Check the docs here: https://api.flutter.dev/flutter/widgets/Column-class.html
And
https://api.flutter.dev/flutter/rendering/MainAxisSize-class.html
You have to mainAxisSize property to reduce size as below.
Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
As I mentioned in comment, by default Column takes up the entire available space, so if you want to restrict it to the minimum, you need to set
Column(
mainAxisSize: MainAxisSize.min // this property
children: [],
)
I've tried the following and got the out, but the body went blank.
Is there any way to add a coloumn or a listview inside a bottom navigation bar
Column(
mainAxisAlignment:MainAxisAlignment.end,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
//button1
),
Expanded(
//button2
),
Expanded(
//button3)
),
Row(
children: <Widget>[
Expanded(
//button4
),
Expanded(
//button5)
],
)
],
),
Apart from the issue posed by Expanded widget (as pointed out in the answer by alexandreohara),
Column's mainAxisSize attribute is set to MainAxisSize.max by default. That means the column will try to occupy all the space available (the entire screen height).
Setting Column's mainAxisSize to MainAxisSize.min will wrap the Column widget to occupy the least possible space(vertically) and not span the entire screen.
Following is the way it can be done:
Column(
mainAxisSize: MainAxisSize.min,
children: [...]
);
There's no problem using a Column in a BottomNavigationBar. I think that your problem is wrapping everything in Expanded. It doesn't know the width of the widgets inside, and because of that, it will return blank.
Try to remove those Expanded widgets and try this:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween
children: [FlatButton(...), FlatButton(...)],
)