I have a Column and three elements in it. I set the mainAxisAlignment to MainAxisAlignment.spaceBetween, so that the first Element is on top of my app. The second in the middle and the third at the bottom.
Now I want to wrap that in a scroll view so that if the content of the Column is taller than the view it can be scrolled.
For example that happens when the keyboard pops up.
My code looks kinda like that:
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Element1(),
Element2(),
Element3(),
]
)
The Column expands its height over the entire screen. And that is what I also want.
But now if I wrap it in a SingelChildScrollView it shrinks to the min content height. :(
SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Element1(),
Element2(),
Element3(),
]
),
)
Is there a way that the Column continues to expand over the entire view height of the screen and is scrollable as soon it's content is taller that the screen height?
You should be able to do this by using ConstrainedBox and LayoutBuilder which will force the Column to take the max available height
LayoutBuilder(
builder: (context, constraints) => SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: constraints.maxHeight,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Element1(),
Element2(),
Element3(),
]),
),
),
)
Related
I have this code
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
HomeHeader(),
Container(
padding: EdgeInsets.only(top: 5, bottom: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
TitleCard(title: "Popular Coffee Bean"),
SizedBox(height: 5),
PopularCoffeeBeans(), //widget Overflowed
SizedBox(height: 10),
TitleCard(title: "Implementation"),
SizedBox(height: 5),
],
),
),
],
),
);
I want to try auto set height that the column shrinks to fit the children. I dont know whats wrong in my code.
I have try to wrap my first Column with Flexible or Expanded Widget, but thats still not working.
any solve for this?
this is my output
The error is not in your column but in your PopularCoffeBeans() Widget. In that container, wherever you have defined the height increase it by 26 pixels. And as for the problem of running it in smaller screen size, I guess you are trying to define height using the screen height which is usually not a good practice. It is better to define a fixed width to avoid the override solution.
I have solve my problem. the problem come, becaue i wraping my horizontal scroll direction using ListView.builder. ListView.builder is bad thing for now to create a horizontal scroll direction, of course if in 1 page there are many scroll pages. ListView.builder only support shrinkWrap by main Axis direction, thats mean shrinkWrap will be fine for vertical scroll Direction, but not good for horizontal scroll Direction.
I try to change that ListView.builder to SingleChildScrollView with simple For loop to get index Data. And with SingleChildScrollView, you dont need to set height of parent widget because the height will follow the size of the children who are inside.
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Container(
padding: EdgeInsets.all(5),
child: Row(
children: [
for(int index = 0; index < data_variable.length; index++)
Container(
padding: EdgeInsets.only(right: 5),
child: Container(
width: MediaQuery.of(context).size.width * 0.5,
child: Center(
child: Text(data_variable[index]),
),
),
),
],
),
),
)
try giving more height to PopularCoffeeBean card your container seem to be overflowing from card container
I have a home/login screen which is made up of a column that fills the entire screen like so:
Column(
children: <Widget>[
Expanded(
child: Container(
child: Logo(),
),
),
showThis ? This() : That(),
],
),
The second child of the column is dynamic and can have different heights, and this screen will have inputs so the keyboard will also affect the height.
I want to center Logo() vertically within the container when it's small (e.g. when keyboard is active), but limit how much the 'top margin' is able to grow, so that when the keyboard is hidden and This()/That() is small enough, Logo() will be in a static position on the screen, say 150 from the top (no longer centred vertically).
One method I have tried was using 2 empty Expanded() above and below Logo() and wrapping the top part in a ConstraintedBox(), but I am not able to get it to behave correctly.
Have you tried with Center() and also if you wanna in a specific position use Stack, for example
Stack(
children: <Widget>[
showThis(),
Positioned(top: 150, child: Logo())
],
)
This is what ended up working for me:
Column(
children: <Widget>[
Expanded(
child: Column(
children: <Widget>[
// constrain top spacing with a max height
Flexible(child: Container(height: 160)),
_logo(),
Spacer(),
],
),
),
_bottomWidget(),
],
),
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(...)],
)
I am build app landing page in Flutter for web. I need make page responsive for different screen size.
I am use MediaQuery for change layout for small screen so widget are layout vertical.
But for medium size screen layout is horizontal. So I need resize app screenshot when screen is make smaller. How to do?
For example: reflectly.app
Here my code so far:
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CenterText(),
SizedBox(height: 10),
Row(
children: <Widget>[
DownloadButtons() ],
),
],
),
Column(
children: <Widget>[
Screenshot(),
],
),
],
)
You need to know the LayoutBuilder component, which is what you want and fixes your needs.
LayoutBuilder takes two parameters, one is a context, the second is a constraints. With those constraints you can set show different layouts for different screens.
Check this example:
LayoutBuilder(
builder: (context, constraints) {
if(constraints.maxHeight < 768 && constraints.maxWidth < 1270) {
return smallDesignContent();
} else {
return bigDefaultDesignContent();
}
},
)
Flutter Widget of the Week - Layout Builder
Documentation
I have been working on flutter, and now have to make the Tab Bar for the page. Since I've succeeded in making the tabs, but there is one thing which is not letting me complete my task which is this,
I have a design blueprint which is like this:
Column{
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <widget>[
Text("Hello World!"),
Container(child: TabWidget())
]
}
I have not given any specific height to the container of the TabWidget() since I wanted the Tabs to take up the full height till the bottom.
TabWidget
child: TabBar(
controller: _controller,
tabs: [
new Tab(
child: Padding(
padding: EdgeInsets.only(top: 18.0),
child: Text(""),
)
),
new Tab(
child: Padding(
padding: EdgeInsets.only(top: 18.0),
child: Text(""),
)
),
]
)
),
Container(
//Deifining the height here, not deifing it will hide the content of the tabs
height: MediaQuery.of(context).size.height/2.3,
child: new TabBarView(
controller: _controller,
children: <Widget>[
new Container(
padding: EdgeInsets.only(top: 15.0),
child: Listview(
scrollDirection: Axis.Vertical,
children: <Widget> [
...
]
)
),
new Container(
padding: EdgeInsets.only(top: 15.0),
child: Listview(
scrollDirection: Axis.Vertical,
children: <Widget> [
...
]
)
)
]
)
)
]
);
Here is the catch, now I have tried my level best to get the result and hence did this :
Use of Expanded() in the TabWidget to take up the height
Use of double.infinity() in the height element of TabBarView
I have read this answer : TabBarView without bounded height, but I don't want my screen to scrollable, Silver is not required in this case. Just the TabBarView should be expanded till the bottom irrespective of from where it is starting
I don't want to give a particular height to my TabBarView, instead, I want it to take the full height till the bottom irrespective of the screen, so my height is dynamic as per the screen.
I'd like to get some inputs on this so that I'd achieve my point. I'm using ListView() in the child of TabBarView, so even if the portion size is small of the screen of the phone user will still be able to scroll the content. But the height should be till bottom, doesn't matter what the screen's size. Thanks.
Any queries are welcome here.
If you can calculate the height of other widgets in the screen above the tabBar then using MediaQuery.of(context).size.height you will get the height of the screen. Deduct the remaining height from the screen height and you can use the resulting value.
P.S. Be careful with the calculations and deduct every height value other than the tab including the safe area one that you will get from MediaQuery.of(context).padding.top & MediaQuery.of(context).padding.bottom.