Flutter Displaying a gridview inside a listview
7,758
You can create a scrollable ListView with multiple children, one being a GridView, with the structure below. To enable the scrolling for all of the elements in the ListView
, you need to set its parameter physics
to NeverScrollablePhysics.
- ListView
- Container // your searchbar would go here
- GridView // physics: NeverScrollablePhysics
- Children
Here is a full code example:
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(),
home: Scaffold(
body: ListView(
children: <Widget>[
Container(
color: Colors.red,
height: 50.0,
),
GridView.count(
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 3,
shrinkWrap: true,
children: generateNumbers().map((int i) {
return Text(i.toString());
}).toList(),
)
],
),
),
);
}
List<int> generateNumbers() => List<int>.generate(30, (i) => i + 1);
}
Here is the result:
![Admin](/assets/logo_square_200-5d0d61d6853298bd2a4fe063103715b4daf2819fc21225efa21dfb93e61952ea.png)
Author by
Admin
Updated on December 05, 2022Comments
-
Admin over 1 year
i'm trying to display a search bar above a gridview (from a stream-builder). Id like the search bar to scroll up with the gridview. I've tried any number of ways to wrap the them in expanded/flexible widgets but I always end up with errors. Has anyone managed this?
Here's what i have right now, it will scroll but the search bar stays at the top.
new Column( children: <Widget>[ new Flexible( child: new Column( children: <Widget>[ new Container( margin: new EdgeInsets.only(left: 4.0, right: 4.0), color: Colors.white, child: new Row( children: <Widget>[ new Container( margin: new EdgeInsets.only(left: 8.0, right: 8.0, top: 8.0, bottom: 8.0), child: Icon(Icons.search), ), new Container( child: Flexible( child: new TextField( onChanged: (String text) { setState(() { _searchController.text = text; }); }, decoration: new InputDecoration.collapsed(hintText: 'Search...'), controller: _searchController, ), ) ), ], ), ), new Flexible( child: new StreamBuilder( stream: stgDocument.collection('people').orderBy('scroll').snapshots(), builder: (context, snapshot) { if (!snapshot.hasData) return const Text('Loading...'); _getMembers(snapshot); return new GridView.builder( //itemCount: snapshot.data.documents.length, itemCount: _searchedMemberList.length, gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2), itemBuilder: (context, index) => _buildPeopleCards(context, _searchedMemberList[index]), //_buildPeopleCards(context, snapshot.data.documents[index]) ); } ) ), ], ), ), ], )