I'm having trouble with managing vertical overflow in my Flutter application.
Essentially, I have a main column with a container child that holds another column with 3 containers each containing a gridview:
stateful widget
Scaffold
body: Center
Column
Container
Column
Container
Gridview
Container
Gridview
Container
Gridview
What I've Tried:
Method 1:
to try and solve the vertical overflow, I have tried wrapping the containers in expanded, but the problem with that is it smushes everything together and I want all the content of the gridviews to be displayed at full height, with the ability to scroll down through the main column.
Method 2:
so next i tried wrapping the main column in a singlechildscrollview and removing the expanded wrappers from the containers, but that is giving me the "vertical viewport was given unbounded height" error.
What I Want:
ultimately, i want the containers to size automatically, to fit the content, and to be able to scroll down to view all of the content ion the main column.
i'm aware of the sizedbox solution, but again, i want the containers to resize automatically to fit the content inside.
what are my best options for achieving this?
UPDATE
these two official Flutter video explains this situation and the solution very well
https://youtu.be/ORiTTaVY6mM
https://youtu.be/LUqDNnv_dh0
it looks like what i want is to use sliverlists and slivergrids inside of a customscrollview instead of gridviews and listviews inside of a column
customscrollview
slivergrid
slivergrid
slivergrid
NOT
column
gridview
gridview
gridview
Try below code hope its help to you. try to wrap your GridView inside Expanded Widget
Center(
child: Column(
children: [
Expanded(
child: Container(
constraints: BoxConstraints(
maxHeight: double.infinity,
),
child: GridView(
shrinkWrap: true,
),
),
),
Expanded(
child: Container(
constraints: BoxConstraints(
maxHeight: double.infinity,
),
child: GridView(
shrinkWrap: true,
),
),
),
Expanded(
child: Container(
constraints: BoxConstraints(
maxHeight: double.infinity,
),
child: GridView(
shrinkWrap: true,
),
),
),
],
),
),
Or try flutter_staggered_grid_view Package hope its help to you.
Related
I have a Flutter project in which SliverList is used inside a CustomScrollView. The SliverList has its delegate property set to SliverChildListDelegate. The SliverChildListDelegate is populated with widgets that have their width set to 200. On building the app the widgets take the width of the whole app regardless. If these same widgets are put in a Column under SingleChildScrollView the width is respected and set to 200. How can I limit the with of the children widgets inside SliverChildListDelegate?
This looks more like a trick than an official solution. I just wrap it with Row and put that Widget in between 2 Spacers. E.g:
SliverList(
delegate: SliverChildListDelegate([
Row(
children: [
Spacer(),
Container(
height: 6,
width: 200,
color: Colors.red,
),
Spacer(),
],
),
]),
)
I need to make a scrollable for all content for partiular page, but the problem is that I need to have dynamic list at the middle, which grows. So I use CustomScrollView. From top to bottom at slivers[] I have SliverToBoxAdapter decorated as I need, then SliverList and then another one SliverToBoxAdapter. This totaly what I need it is scrollable all together, byt decoration problem with SliverList. So i need to wrap somehow SliverList with the same style so it looks like content inside SliverToBoxAdapter (Borders, evevation, background etc). But I cant understand how to achieve this. The CustomScrollView accepts only Slivers..
I tried to put List inside SliverToBoxAdapter but it scrolls separately or...
Ive solved it but I think in comletely wrong way, with wrapShrink to True, but the Docs day it is very expensive.. And also weird because i moreover need to block scroll Physics with NeverScrollableScrollPhysics(). So looking for better solution
Maybe I do not need to use Slivers?
The general problem is I need vertically lets say Container then List (growable) and then another Container under the list, no matter how long the list are.
Like this
container
List with ability to
dynamically grow when user
taps button
Container strongly under
the List with button
by tapping which user add
the element to the List
Any solutions, ideas, advices ...
Thanks for attention)
Code for sake of simplicity
The BoxAdapter and SliverList
child: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Center(
child: Container(
child: Column(
children: [
Characteristics(),
],
),
),
),
),
// this is how I have done
// but do not like not lazy..
// if put SliverList directly cant decorate it..
SliverToBoxAdapter(
child: ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (contex, index){
return Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: Text('Grid Item $index'),
);
},
itemCount: 20,
)
),
],
),
In iOS's native AutoLayout constraints, It very easy to make a equal width constraints between ViewA and ViewB . And these two views will get a same width always.
But in flutter ,it seems can't be achived this kindof constraints so easily?
Do I have to make a SizedBox with specific width for both WidgetA and WidgetB explicitly?
You can always put your widgets in a Row(), and wrap every widget in Expanded(). This way they will always have 50% width of the parent Row(). And if you need to constrain the width, just wrap the Row() in a SizedBox().
SizedBox(
width: 500.0,
child: Row(
children: [
Expanded(
child: Container(),
),
Expanded(
child: Container(),
),
],
),
),
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 am trying to position a container inside a stack but keeps getting this exception.How can i position the container of given size inside the stack using lets say right:0,top:0?The code i am using is shown below:
What changes should i make in my code to make it work?
**return SizedBox.fromSize(
size:Size.fromHeight(300.0),
child:Container(
decoration:BoxDecoration(**
color:Color(0xFFF3F3F5),
),
child:ListView.builder(
scrollDirection:Axis.horizontal,
itemCount:3,
physics:BouncingScrollPhysics(),
itemBuilder:(BuildContext context,index){
print(10);
return Stack(
children:<Widget>[
Positioned(
right:0,
top:0,
child:Container(
margin:EdgeInsets.symmetric(horizontal:15.0),
height:80,
width:140,
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(16.0),
color:Color(0xFFDDE3F0),
),
),),
],
);
}
),
),
);
**
You can solve this in two way.
1) use shrinkwrap property of listView and set it to true.
shrinkWrap: false,
2) using column and Expanded. Wrap your ListView with Expanded and Wrap Expanded with Column.
Column->Expanded->ListView.
You should give the Container that wraps your ListView a height.