Flutter Displaying a gridview inside a listview Flutter Displaying a gridview inside a listview flutter flutter

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:

Animated Example