Unlike native iOS, Scrollable could still scroll even there is only a little height of the content inside the scroll view. So the question is:
How to make SingleChildScrollView scrollable even content hight is lower than the scroll view height?
FYI, Even I expanded my content to fit the parent container. following this link, The SingleChildScrollView still couldn't scroll.
Here this is definitely a hack but it works it doesn't seem like this should be this hard to figure out. If this is unacceptable to you let me know I'll see what else I can figure out that is more legit.
Container(
height: 400,
child: ListView(
children: <Widget>[
Container(
padding: const EdgeInsets.symmetric(vertical: 500),
child: Column(
children: <Widget>[
...numbers.map(
(number) => Text(
number.toString(),
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20),
),
),
],
),
),
],
),
),
I did not try this with SingleChildScrollView
Related
In container I am using list view builder, while I am using Axis.horizantal without declaring height of I am getting render box layout issue
you can use the combination of SingleChildScrollView and Row to replicate the Behaviour of Listview with horizontal Scroll.
An example is mentioned below, this one worked for me.
Container(
color: Colors.black,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: const [
Icon(Icons.phone),
],
),
),
),
I have this view in my app
and this is the code for it:
return Container(
color: Colors.black,
child: ListView(
children: <Widget>[
Column(
children: <Widget>[
...
],
)
],
),
);
But if I click on my form I get stuck and the list of items is hidden by the keyboard, so I'd like to make my Container scrollable.
How can I do?
Instead of wrapping your Column with a ListView try with a SingleChildScrollView instead. You can also try adding a bottom padding equal to keyboard size MediaQuery.of(context).viewInsets.bottom.
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 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.