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

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.

CodePudding user response：

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) {
                  ...
                  ...
                  ...
                },
              ),
            ],
          )
      )

CodePudding user response：

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

    ListView.builder(
    itemCount: 10,
    shrinkWrap: true,
    scrollDirection: Axis.vertical,
    itemBuilder: (context, index) {
           return Card(
               child: Center(child: Text('Vertical List 
    Child')
       )
     );
   },
 )

CodePudding user response：

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

CodePudding user response：

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