Flutter Displaying a gridview inside a listview
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: