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
Related
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(),
]),
),
),
)
I have an horizontal SingleChildScrollView widget with variable amount of different buttons. I want to display button with right arrow only when there is too much buttons to show all on screen. I want to avoid situation when someone could dont know about more buttons hidden behind right edge of the screen.
How to achieve this?
Container(
height: iconsBarHeight,
color: Theme.of(context).scaffoldBackgroundColor,
padding: const EdgeInsets.fromLTRB(16, 16, 8, 0),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Button2(),
Button4(),
Button1(),
Button6(),
Button7(),
Button3(),
Button2(),
],
),
),
);
you can add ScrollControlller to SingleChildScrollView, and get the max extent of it. If max extent is greater than width of screen, then show the button.
scrollController.position.maxScrollExtent
I have two widgets in a row. The first widget is a black line with width 5.0, the second widget is a text widget whose size may vary according to the content. I want the first container to have the same height as of the second widget
One way is to make both widget child of an IntrinsicHeight widget and then declare the height of the first container as double.infinity. This should solve your problem. Example code is given below:
IntrinsicHeight(
child: Row(
children: <Widget>[
Container( //this is the first container
height: double.infinity
),
secondWidget(
)
],
)
Let me know if you have further query. Happy coding!
You can use Expanded widget. It divides siblings to the same height or width.
here is the code:
Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
),
),
Expanded(
child: Container(
color: Colors.green,
),
)
And here is the result:
That is so easy. I wish it could help.
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 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.