Flutter: scrollablle nested listview builder

Question

I have data in nested list and i want to show them in a scrollable card. As i have nested list. So, i need to use nested list view and both should be scrollable.

Here is the data.

{"content":[{"uid":8,"pic":"http:\/\/192.168.1.100:8080\/profile_img\/8_1599452969.jpg","country":"India","last_login":"06-09-2020","teaching_board":"CBSE","teaching_subjects":"English, Math","highest_education":"PHD","average_orating":"3.50",,"pricing":[{"uid":8,"subject":"Math","board":"CBSE","price":1000},{"uid":8,"subject":"Science","board":"CBSE","price":1000},{"uid":8,"subject":"Math","board":"CBSE","price":2500}]},{"uid":9,"pic":"http:\/\/192.168.1.100:8080\/profile_img\/8_1599452969.jpg","country":"India","tabout":"I am Raja and you can call me Babu.","last_login":"06-09-2020","teaching_board":"CBSE","teaching_subjects":"Hindi, English, Math","highest_education":"M.Sc PHD","average_orating":"5.00","pricing":[{"uid":9,"subject":"Math","board":"CBSE","price":2500},{"uid":9,"subject":"Science","board":"CBSE","price":2500}]}],"success":true}

Here is the flutter code.

child:Container(
                decoration: BoxDecoration(
                 // borderRadius: BorderRadius.circular(25),
                  color: Colors.black87,
                ),
                padding: EdgeInsets.only(top: 10, bottom: 5),
                height: MediaQuery.of(context).size.height,
                width: double.infinity,
                child: ListView.builder(
                    controller: _scrollcontroller,
                    itemCount: (recommended) ? lists.length : searchlists.length,
                    itemBuilder: (BuildContext context, int index) {
                      return buildList1(context, index);
                    }),
              ),


Widget buildList1(BuildContext context, int index) {
      return  InkWell(
        onTap: () {
          String teacherid = lists[index].uid ;
          print(teacherid);
        },
      Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(25),
        color: Colors.white,
      ),
      width: double.infinity,
      height: 380,
      margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
      padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
      
      child: 
       Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
            Container(
            child: Row(   
              crossAxisAlignment: CrossAxisAlignment.start,
              children:     <Widget>[
                
                Container(
                              width: 100,
                              height: 100,
                              margin: EdgeInsets.only(top:5, right: 10, bottom: 5),
                              child: CircleAvatar(
                                        radius: 100,
                                        backgroundColor: Color(0xff476cfb),
                                        child: ClipRRect(
                                          child: Image.network(
                                            lists[index].pic, 
                                            fit: BoxFit.fill,
                                            ),
                                        ),
                              ),
                        
                            ),

                Expanded(
            child: Column(
              
              crossAxisAlignment: CrossAxisAlignment.start,
              children:     <Widget>[
                Text(
              '#' + lists[index].name, 
                  style: TextStyle(
                      color: primary,
                      fontWeight: FontWeight.bold,
                      fontSize: 18),
                ),
              Divider(),
              Text(
                      'Education - ' + lists[index].highestEducation,
                        style: TextStyle(
                            color: primary, fontSize: 13, letterSpacing: .3)),
              Text(
                      'Ratings - ' + lists[index].averageOrating,
                        style: TextStyle(
                            color:Colors.black87, fontSize: 16, fontWeight: FontWeight.bold, letterSpacing: .3)),
              ]
              ),
                ),
               ] 
            
            ),
          ),
            Expanded(
              child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: <Widget>[
              ListView.builder( 
          shrinkWrap: true,
          itemCount : lists[index].pricing.length,
            itemBuilder: (context, index) {
        return Padding(
          padding: EdgeInsets.all(2.0),
          child: Column(
            children: [
              Text(lists[index].pricing[index]['price']),
            ],
          ),
        );
      },
           
              ), 
                 ]
            ),
            ),
        ],
       ),
      ),
      ),
}

Issues - I am stuglling to show second listview builder and i have no idea how can i make it scollable. At the moment it is showing this error.

A RenderFlex overflowed by 99968 pixels on the bottom.

Edit : My JSONParse is working fine but if you want i can put the code here.

You need to wrap your second ListView.builder a parent widget below with a height Container(height: 200,child: ListView.builder()) — Raine Dale Holgado
– Raine Dale Holgado, Commented Sep 29, 2020 at 4:08
Thanks for the comment. Will that be scrollable? I am making changes and trying. — Roxx
– Roxx, Commented Sep 29, 2020 at 4:11
RangeError (index): Invalid value in range 0..1 this is showing in container. — Roxx
– Roxx, Commented Sep 29, 2020 at 4:26
Wow I just realised this question is downvoted. Not sure why. — Roxx
– Roxx, Commented Sep 29, 2020 at 5:51

Raine Dale Holgado · Accepted Answer · 2020-09-29 05:23:25Z

Here's an example

class TestContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: double.infinity,
        child: ListView.builder(
            itemCount: kListDataContent.length,
            itemBuilder: (context, index) {
              return InkWell(
                onTap: () {},
                child: Container(
                  height: 380,
                  child: Column(children: [
                    Container(
                      height: 100,
                      width: 100,
                      color: Colors.red,
                    ),
                    Expanded(
                      child: Column(children: <Widget>[
                        Container(
                          height: 200,
                          child: ListView(
                            children: [
                              for (var item
                                  in kListDataContent[index].priceList)
                                Column(
                                  children: [
                                    Text("${item.price}"),
                                    Text("${item.string1}"),
                                    Text("${item.string2}"),
                                    Text("${item.string3}"),
                                  ],
                                ),
                            ],
                          ),
                        ),
                      ]),
                    )
                  ]),
                ),
              );
            }),
      ),
    );
  }
}

final kListDataContent = [
  Content(
    content: "Content1",
    priceList: [
      Price(price: 1, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
      Price(price: 2, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
      Price(price: 3, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
      Price(price: 4, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
    ],
  ),
  Content(
    content: "Content2",
    priceList: [
      Price(price: 11, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
      Price(price: 22, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
      Price(price: 33, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
      Price(price: 44, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
    ],
  ),
  Content(
    content: "Content3",
    priceList: [
      Price(price: 111, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
      Price(price: 222, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
      Price(price: 333, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
      Price(price: 444, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
    ],
  )
];

class Price {
  int price;
  String string1;
  String string2;
  String string3;
  Price({
    this.price,
    this.string1,
    this.string2,
    this.string3,
  });
}

class Content {
  String content;
  List<Price> priceList;
  Content({
    this.content,
    this.priceList,
  });
}

OR

  Container(
    height: 200,
    child: ListView.builder(
      shrinkWrap: true,
      itemCount: kListDataContent[index].priceList.length,
      itemBuilder: (context, priceIndex) {
        return Padding(
          padding: EdgeInsets.all(2.0),
          child: Column(
            children: [
              Text("${kListDataContent[index].priceList[priceIndex].price}"),
              Text("${kListDataContent[index].priceList[priceIndex].string1}"),
              Text("${kListDataContent[index].priceList[priceIndex].string2}"),
              Text("${kListDataContent[index].priceList[priceIndex].string2}"),
            ],
          ),
        );
      },
    ),
  ),

Thanks for the answer. But I need little help in itemCount : lists[index].pricing.length. I think this is not correct. RangeError (index): Invalid value: Not in range 0..1, inclusive: 2
Your code will work totally fine as you have used fixed length. I am trying to the count using lists[index].pricing.length.
@Rocx, there that should give you an idea. Hope that help now

Collectives™ on Stack Overflow

Flutter: scrollablle nested listview builder

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related