Flutter How to vertical scrolling a screen with a ListView horizontal and GridView

Question

I have a layout like the attached image. Im looking to have in the same screen and horizontal Listview with the popular/latest items and below a GridView with the full list of items.

The ListView should have horizontal scrolling, but also, all the screen can vertical scroll. The dark bar at the right simulates the scrollbar (not necesary, just for illustration purposes).

You can see this behavior in the Google Play app itself, where you can swipe horizontal to see more items in a category, but also scroll vertical to see more category lists.

Im tried Stack and Column widgets, but nothing works. Any idea in how to structure this layout?

Answer 1

You can use Slivers , try this example I made :

    @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: new AppBar(),
            body: CustomScrollView(
              slivers: [
                SliverToBoxAdapter(
                  child: SizedBox(
                    height: 100,
                    child: ListView.builder(
                        itemExtent: 150,
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (context, index) => Container(
                              margin: EdgeInsets.all(5.0),
                              color: Colors.orangeAccent,
                            ),
                        itemCount: 20),
                  ),
                ),
                SliverGrid(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                    childAspectRatio: 1.5,
                  ),
                  delegate: SliverChildBuilderDelegate(
                    (context, index) => Container(
                          margin: EdgeInsets.all(5.0),
                          color: Colors.yellow,
                        ),
                  ),
                )
              ],
            ));
      }

Also you can learn more about Sliver from this link : https://medium.com/flutter-io/slivers-demystified-6ff68ab0296f