Using both horizontal and vertical listview.builder on a page in flutter

Question

In my application, I want to show two different products on the home screen, horizontally and vertically. But I want to do this with ListView.Builder as they both come as lists. I couldn't find the right usage of this, can you help with this?

SingleChildScrollView(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        SizedBox(
                          height: 200.0,
                          child: ListView.builder(
                            physics: ClampingScrollPhysics(),
                            shrinkWrap: true,
                            scrollDirection: Axis.horizontal,
                            itemCount: 25,
                            itemBuilder: (BuildContext context, int index) =>
                                Card(
                              child: Center(child: Text('Horizontal List Child')),
                            ),
                          ),
                        ),
                        ListView.builder(
                          itemCount: 10,
                          shrinkWrap: true,
                          scrollDirection: Axis.vertical,
                          itemBuilder: (context, index) {
                            return Expanded(
                              child: Card(
                                  child:
                                      Center(child: Text('Vertical List Child'))),
                            );
                          },
                        )
                      ],
                    ),
                  ),

I can do it without using ListView.builder but I need to use ListView.builder. The height of the vertical part should be equal to the element inside.

score 0 · Answer 1 · answered Sep 06 '21 at 09:46

You must need to define the height of any scroll view. I prefer the horizontal scroll view

      SingleChildScrollView(
          child: Column(
            children: [
              Container(
                height: 150,
                child: ListView.builder(
                  physics: ClampingScrollPhysics(),
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  itemCount: 25,
                  itemBuilder: (BuildContext context, int index) {
                    ...
                    ...
                    ...
                  },
                ),
              ),
              ListView.builder(
                itemCount: 10,
                shrinkWrap: true,
                scrollDirection: Axis.vertical,
                itemBuilder: (context, index) {
                  ...
                  ...
                  ...
                },
              ),
            ],
          )
      )

Thanks for your reply but I keep getting the hasSize error. – oustW. Sep 06 '21 at 09:53 — oustW., Sep 06 '21 at 09:53

Jhoan River · Answer 2 · 2022-03-17T09:22:46.623

Expanded makes item inside becomes full body. just remove it and the height to make item height equals to card

return Scaffold(
  appBar: AppBar(
    title: Text("Sample"),
  ),
  body: Center(
    // Center is a layout widget. It takes a single child and positions it
    // in the middle of the parent.
    child: SingleChildScrollView(
      physics: ScrollPhysics(),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text("Sample 1"),
          ),
          Container(
            height: 100,
            child: ListView.builder(
                physics: ScrollPhysics(),
                itemCount: 5,
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, index) {
                  return Card(
                    child: Image.network("https://i.picsum.photos/id/9/250/250.jpg?hmac=tqDH5wEWHDN76mBIWEPzg1in6egMl49qZeguSaH9_VI",),
                  );
                }

            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text("Sample 2"),
          ),
          ListView.builder(
              physics: ScrollPhysics(),
              itemCount: 5,
              shrinkWrap: true,
              scrollDirection: Axis.vertical,
              itemBuilder: (context, index) {
                return Card(
                  child: Image.network("https://i.picsum.photos/id/9/250/250.jpg?hmac=tqDH5wEWHDN76mBIWEPzg1in6egMl49qZeguSaH9_VI"),
                );
              }
          ),
        ],
      ),
    ),
  ),
);

Actually Expanded stuck there after my attempts. I don't normally use it like that and it doesn't work the way you say. — oustW., Sep 06 '21 at 09:57

Chukwuebuka Amaechi · Answer 3 · 2021-09-06T11:32:51.087

0

Remove the SingleChildScrollView. Add an Expanded as parent to the second ListView. Remove the Expanded from the Card

edited Sep 06 '21 at 11:32

answered Sep 06 '21 at 11:27

Chukwuebuka Amaechi

31
2

score 0 · Answer 4 · answered Sep 07 '21 at 11:28

0

Scaffold(
      body: SafeArea( //in case you dont have appbar
        child: CustomScrollView(
          physics: const BouncingScrollPhysics(),
          slivers: [
            
            const SliverToBoxAdaptar(child:Container(child:ListView(...)))// horizontalList
            const SliverList()// verticalSliverList
          ],
        ),
      ),
    );

try thiss

answered Sep 07 '21 at 11:28

Hamdam Muqimov

319
2
7

I can't use this because there is tab Bar at the top of the page. – oustW. Sep 07 '21 at 12:59
@oustW have a look here https://stackoverflow.com/questions/54512171/horizontal-listview-inside-a-vertical-scrollview-in-flutter – Hamdam Muqimov Sep 07 '21 at 13:07

Using both horizontal and vertical listview.builder on a page in flutter

4 Answers4