CODEWITHSUNDEEP
mobileflutterflutter-layout
vtisnado
vtisnado

Reputation: 500

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

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?

enter image description here

Upvotes: 7

Views: 10916

Answers (1)

diegoveloper
diegoveloper

Reputation: 103551

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

Upvotes: 8

Related Questions