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()
Related
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.
How can I customize or control GridView.builder scroll behavior such that it doesn't bounce back up to the top of the grid once the end of the grid is reached? I've tried changing physics but that doesn't seem to work for GridView. I've also tried to add a constant scroll behavior using ClampingScrollPhysics instead of BouncingScrollPhysics but this simply renders the grid unscrollable.
The bounce back is so bad that it doesn't allow the user to click on the last row of grid items. I tried to wrap the gridview in a container with padding but this also does not work. Any ideas?
return GridView.builder(
padding: const EdgeInsets.all(10.0),
// // physics: ClampingScrollPhysics(),
itemCount: loadedGroups.length,
itemBuilder: (ctx, i) => ChangeNotifierProvider.value(
value: loadedGroups[i],
child: CardWidget(
id: loadedGroups[i].groupId as String,
cardLabel: loadedGroups[i].title,
imgPath: loadedGroups[i].imageUrl as String,
labelColor: Color.fromRGBO(0, 0, 0, .70),
)),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 2 / 2,
crossAxisSpacing: 10,
mainAxisSpacing: 25,
mainAxisExtent: 190,
));
}
I used a GridView.count() to display dynamic data in my app, but each of my GridView elements doesn't fully display.
Here is what it looks like :
Here is my code :
Column(
children: [
buildSubheadingText('Mes projets'),
buildVerticalSpace(5.0),
GridView.count(
shrinkWrap: true,
physics: BouncingScrollPhysics(),
//physics: NeverScrollableScrollPhysics(),
crossAxisCount: 2,
children: ContextManager.projects.map((value) {
return ProjectCard(project: value);
}).toList()
)
],
);
I have added the attributes shrinkWrap at true and physics at BouncingScrollPhysics or NeverScrollableScrollPhysics as advised in the answers of this topic but as you can see it doesn't work for me.
Also, I don't want to use a fixed height because data is dynamic here.
Thanks for helping.
You can set custom height for grid using childAspectRatio attribute
Example:-
Column(
children: [
buildSubheadingText('Mes projets'),
buildVerticalSpace(5.0),
GridView.count(
shrinkWrap: true,
physics: BouncingScrollPhysics(),
childAspectRatio: 2/3, //gives custom height to your grid element
crossAxisCount: 2,
children: ContextManager.projects.map((value) {
return ProjectCard(project: value);
}).toList()
)
],
);
GridView children's size depends on childAspectRatio, default it is 1.0, you can increase height by changing default childAspectRatio. like
child: GridView.count(
crossAxisCount: 2,
childAspectRatio: 1 / 1.2, //width /height
Please try using this library,
staggered_grid_view
I'm having a bit of annoyance. I want a scroll bar present in my flutter web 'page' at all times, to indicate to the user that there's still some elements to view them. And I achieved this using scrollbar isAlwaysShown to true in my Theme class.
Now, when I use GridView.builder to generate elements on the screen, I must provide height constraints beforehand, or else I'll get an error that says 'height is infinite'.
The problem with this is, there are 2 scroll bars visible at all times. One from the SingleChildScrollView, and one from the GridView.builder. I need the SingleChildScrollView with the column so I can have a footer at the bottom of the page.
My question is, how can I get rid of the GridView.builder scroll bar?
Thanks in advance...
My code:
Scaffold(
key: _scaffoldKey,
appBar: AppBar(),
drawer: const DrawerWidget(),
body: SingleChildScrollView(
child: Column(
children: [
Container(
constraints: BoxConstraints(maxHeight: _size.height),
margin: Responsive.isDesktop(context)
? const EdgeInsets.symmetric(vertical: 10)
: null,
padding: Responsive.isDesktop(context)
? desktopPadding
: smallAndMediumPadding,
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
itemCount: 12,
itemBuilder: (BuildContext context, int index) {
return GridCard(name: '', image: '');
}
)
),
/////////////// Footer ///////////////////
Footer()
]
)
)
)
Actually you can remove the BoxConstraints from your Container and to solve the height issue you have a property in GridView.builder named shrinkWrap. You just need to set it true and it will solve your height issue.
shrinkWrap: true,
and after that you may have issue with Scrolling the GridView.builder so to solve that use another property primary and set it to false
primary : false,
You shouldn't use multiple Scrollables inside each other to get footer functionality. By using shrinkWrap on the inner scrollable (GridView) you'd effectively turn it into a regular unscrollable widget and use scrolling of the outer view (SingleChildScrollView). It is terrible for performance because Flutter would have to build, layout and (probably) render entire GridView including all the items every time.
You should instead use CustomScrollView to display your grid and footer like this:
Scaffold(
body: CustomScrollView(
slivers: [
SliverPadding(
// not sure what you were trying to do with your padding
padding: (Responsive.isDesktop(context)
? const EdgeInsets.symmetric(vertical: 10)
: EdgeInsets.zero) +
(Responsive.isDesktop(context)
? desktopPadding
: smallAndMediumPadding),
sliver: SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
),
delegate: SliverChildBuilderDelegate(
(context, index) => GridCard(name: '', image: ''),
childCount: 12,
),
),
),
SliverToBoxAdapter(
child: Footer(),
),
],
),
)
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