I want to have a GridView in Flutter with a crossAxisCount of to but periodically show a widget that takes up the whole width (an advertisement banner). How can I do that with a GridView?
Here is my code where I want to incorporate ad banners for every 10th row or so:
GridView.count(
childAspectRatio: 1 / 1.05,
controller: _scrollController,
scrollDirection: Axis.vertical,
crossAxisCount: 2,
crossAxisSpacing: 0,
mainAxisSpacing: 5.0,
physics: const AlwaysScrollableScrollPhysics(),
children: widgetList.map((value) {
return value;
}).toList(),
)
You can use Wrap instead of GridView.
I need a simple grid of widgets but without scrolling, similar to how I coded GridView below.
GridView.count(
padding: const EdgeInsets.all(20.0),
crossAxisCount: 2,
crossAxisSpacing: 20,
shrinkWrap: true,
// mainAxisSpacing: 20,
children: [
_TextField0(focusNode: focusNode),
_TextField1(focusNode: focusNode),
_TextField2(focusNode: focusNode),
_TextField3(focusNode: focusNode),
],
),
)
Is there a way to disable scrolling in GridView or is there another widget I should be looking at?
Yes, GridView (or ListView) has a parameter for scroll behavior. In your case, simply pass in:
physics: const NeverScrollableScrollPhysics()
How align item on top (bottom search field) after filter data in GridView.builder?
Below is my example:
Column(
children: [
Padding(
padding: EdgeInsets.all(10),
child: GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: widget.emps.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount:
MediaQuery.of(context).orientation == Orientation.portrait ? 2 : 4,
mainAxisSpacing: 20,
crossAxisSpacing: 20,
childAspectRatio: 0.693,
),
itemBuilder: (context, int index) {
return widget.emps[index].ename.contains(searchString) ? EmpCard(
emp: widget.emps[index],
press: () {
},
):Container();
}
there is no issue in alignment, issue is you are displaying container() instead of EmpCard() when you are not find a match,
you have to first create list for search outside of GridView.builder() and that has to be displayed. then alignment issue will be automatically solved.
update-
take new list out side build method;
List search=[];
//-----
onUpdate(value){
searchString=value;
search=[];
for(int i=0;i<widget.emp.lenght;i++)
{
if(<--Your search condition-->){
search.add(<--add your widgets here-->)}
}
}
then create your GridView.builder() with this search list istead of widget.emps.
I have a GridView that I want to make scrollable even when the mouse is outside of the GridView. I have tried to add the GridView inside a SingleChildScrollView and added shrinkWrap: true to the GridView. I have also tried adding a Column around the GridView and Expanded as well. Here is the code:
return SingleChildScrollView(
child: Column(
children: [
Container(
constraints: BoxConstraints(maxWidth: 750),
child: GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
padding:
EdgeInsets.symmetric(horizontal: 30, vertical: 10),
itemCount: course.subjects.length,
itemBuilder: (context, idx) {
return CourseSubjectListEl(course, idx, data);
},
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 10,
childAspectRatio: 0.7,
mainAxisSpacing: 0,
crossAxisCount: 2),
),
),
],
),
);
As you can see on the screenshot, you can only scroll when the mouse is over the GridView. I think this problem can cause confusion for web users, where you normally can scroll with the mouse everywhere.
You can add
primary: false,
Property inside GridView. That will make the GridView scroll physics false and will act on how the parent scrolls (which in case is your SingleChildScrollView).
Probably you might want to remove physics: NeverScrollableScrollPhysics(), and add the above property.
Note: Make sure your scrollview contains the whole width of the screen you want to scroll
I have a problem with gridview and column. In this case, i want put an image in upper of gridview. Please give me a solution..
return new Container(
child: new Column(
children: <Widget>[
new Container(
child: new Image.asset(
"assets/promo.png",
fit: BoxFit.cover,
),
),
new Container(
child: new GridView.count(
crossAxisCount: 2,
childAspectRatio: (itemWidth / itemHeight),
controller: new ScrollController(keepScrollOffset: false),
shrinkWrap: true,
scrollDirection: Axis.vertical,
children: new List<Widget>.generate(16, (index) {
return new GridTile(
header: new Container(
padding: const EdgeInsets.all(10.0),
alignment: Alignment.centerRight,
child: new Icon(
Icons.shopping_cart,
size: 20.0,
color: Colors.red,
),
),
child: new MyList(
nomor: '$index',
));
}),
),
),
],
),
);
and this is the result:
Flutter Gridview in Column
You just need to put your grid view into Expanded widget, for example:
body: new Column(
children: <Widget>[
new Expanded(
child: GridView.count(
// Create a grid with 2 columns. If you change the scrollDirection to
// horizontal, this would produce 2 rows.
crossAxisCount: 2,
// Generate 100 Widgets that display their index in the List
children: List.generate(10, (index) {
return _buildCard(index);
}),
),
),
new Text("text")
],
),
Reason for the error:
Column expands to the maximum size in main axis direction (vertical axis), and so does the GridView (scroll direction is vertical by default)
Solution
You need to constrain the height of the GridView, so that it expands to fill the remaining space inside Column, there are several ways of solving this issue, use whichever suits you better.
If you want to allow GridView to take up all remaining space inside Column use Flexible.
Column(
children: <Widget>[
Flexible(
child: GridView(...),
)
],
)
If you want to limit your GridView to certain height, you can use SizedBox.
Column(
children: <Widget>[
SizedBox(
height: 200, // constrain height
child: GridView(...),
)
],
)
If your GridView is small, you may try shrinkWrap property on it.
Column(
children: <Widget>[
GridView(
shrinkWrap: true, // use it
)
],
)
If Column is the parent of GridView then it will give rendering issue as
It happens because Column and GridView both take the entire space of the screen individually which is there default behavior(Default axis of scrolling is Vertical).
Solution:
To solve the above problem we have to disable scrolling of GridView, This can be possible by shrinkWrap and physics property
shrinkWrap:true - With this GridView only occupies the space it needs
physics: NeverScrollableScrollPhysics() - It disables scrolling functionality of GridView, which means now we have only SingleChildScrollView who provide the scrolling functionality.
Code:
SingleChildScrollView
Column
GridView(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
//...
)
The answer mentioned by #RuslanLeshchenko is correct but if it is still not working for you, trying the following properties on GridView
Try changing shrinkwrap to true
Apply physics: BouncingScrollPhysics()
Inside your Gridview make sure to add this 2 properties.
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
Just wrap with scaffold and scrollview
Scaffold(
resizeToAvoidBottomInset: true,
body: SingleChildScrollView(
child: Column(
children: [
...
Tested working on dialog model aswell.
I had the same problem and couldn't fix.
Then again I used a GridView.builder().
I changed it to GridView.count and added shrinkWrap: true and physics: NeverScrollableScrollPhysics() as mentioned in the other comments.
It works fine now. Thanks!
You can solve it by these two properties and change them as follows :
shrinkWrap: true,
primary: false,
shrinkWrap will wrap your and will handle overflow.
Through primary we can set either you want to make this list scrollable or it's parent list. By setting it to false it allows to take scroll of parent list or scrollable view.
NOTE : You can also wrap your column with SingleChildScrollView to have scroll in your view.
Happy Fluttering !
Try changing childAspectRatio property of GridView to 0.8 or lower.
body:Container(
body: Container(
child: Column(
children: [
Text('Exemple'),
Expanded(
child: GridView.count(
children: <Widget>[
//Widgets
]
)
)
]
)
)
Just wrap GridView inside ListView
Column(
children: <Widget>[
ListView(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
children: [
GridView(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
),
],
),
)
Also it works with SingleChildScrollView
SingleChildScrollView(
child: Column(
children: <Widget>[
ListView(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
children: [
GridView(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
),
],
),
)
)
Works like a charm (: