Search code examples
androidflutterlistviewflutter-futurebuildersinglechildscrollview

Cannot Scroll ListView inside FutureBuilder


I have tried almost all the solution on stackoverflow like using Expanded widget with single child scroll view and physics property and what not but still cannot enable scroll inside futurebuilder which occupy second half of my screen, the first half is static but second half contains listview inside future builder but it's not scrollable !!

The Error is Bottom Overflowed by 1313 pixels

This Is My Code

Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        resizeToAvoidBottomInset: true,
        body:Container(
              child: Column(
                children: [
                  Column(
                    children: [
                      Padding(
                        padding: const EdgeInsets.fromLTRB(15,12,15,0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Image.asset('assets/hamburger.png',height: 25,width: 25,alignment: Alignment.topLeft,),
                            Image.asset('assets/log.png',height: 37,width: 37,alignment: Alignment.center,),
                            Image.asset('assets/searc.png',height: 25,width: 25,alignment: Alignment.topRight,),
                          ],
                        ),
                      ),
                      SizedBox(height: 10,),
                      Padding(
                        padding: const EdgeInsets.fromLTRB(15, 0, 0, 0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: [
                            CircleAvatar(
                              radius: 30,
                              backgroundImage: NetworkImage(img)
                            ),
                            // split(data[index]["image"])
                            SizedBox(width: 20,),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              // mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Row(
                                  children: [
                                    Text('Hello',style: TextStyle(
                                      color: Colors.black,
                                      fontSize: 15,
                                    ),textAlign: TextAlign.start,),
                                    SizedBox(width: 5,),
                                    Text(name,style: TextStyle(
                                        color: Colors.black,
                                        fontSize: 15,
                                        fontWeight: FontWeight.bold
                                    ),textAlign: TextAlign.start,),
                                  ],
                                ),
                                Text('Welcome To Quad Life',style: TextStyle(
                                  color: Colors.grey,
                                  fontSize: 13,
                                ),textAlign: TextAlign.start,),
                              ],
                            ),
                          ],
                        ),
                      ),
                      SizedBox(height: 10,),
                      Padding(
                        padding: const EdgeInsets.fromLTRB(15, 0, 15, 0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            SizedBox(
                              width:MediaQuery.of(context).size.width*0.4,
                              height: 70,
                              child: Card(
                                elevation: 5,
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(15),
                                ) ,
                                child: Padding(
                                  padding: const EdgeInsets.symmetric(vertical: 5),
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Text(data.length.toString(),
                                        style:
                                        TextStyle(color: Colors.black,
                                        fontSize: 15,
                                            fontWeight: FontWeight.bold),),
                                      SizedBox(height: 5,),
                                      Text('Operators',style:
                                      TextStyle(color: Colors.grey,
                                          fontSize: 15,
                                      fontWeight: FontWeight.bold),),

                                    ],
                                  ),
                                ),
                              ),
                            ),
                            SizedBox(
                              width:MediaQuery.of(context).size.width*0.4,
                              height: 70,
                              child: Card(
                                elevation: 5,
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(15),
                                ) ,
                                child: Padding(
                                  padding: const EdgeInsets.symmetric(vertical: 5),
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Text(data1.length.toString(),style:
                                      TextStyle(color: Colors.black,
                                          fontSize: 15,
                                          fontWeight: FontWeight.bold),),
                                      SizedBox(height: 5,),
                                      Text('Supervisors',style:
                                      TextStyle(color: Colors.grey,
                                          fontSize: 15,
                                          fontWeight: FontWeight.bold),),
                                    ],
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      Column(
                        children: [
                          Padding(
                            padding: const EdgeInsets.fromLTRB(0, 15, 0, 0),
                              child: Padding(
                                padding: const EdgeInsets.symmetric(horizontal: 15),
                                child: Card(
                                  elevation: 20,
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(15),
                                  ) ,
                                  child: SizedBox(
                                    width: MediaQuery.of(context).size.width,
                                    height: 150,
                                    child: LineChart(
                                      LineChartData(
                                        borderData: FlBorderData(
                                          show: true,
                                          border: Border.all(width: 0)
                                        ),
                                        gridData: FlGridData(
                                          show: false,
                                        ),
                                        titlesData: FlTitlesData(
                                          show: false,
                                          bottomTitles: SideTitles(
                                            showTitles: true,
                                          )
                                        ),
                                        maxX: 50,
                                        maxY: 100,
                                        minX: 0,
                                        minY: 0,
                                        lineBarsData: [
                                          LineChartBarData(
                                            spots: [
                                              FlSpot(0, 50),
                                              FlSpot(10, 60),
                                              FlSpot(15, 55),
                                              FlSpot(20, 60),
                                              FlSpot(30, 70),
                                              FlSpot(40, 65),
                                              FlSpot(50, 90),

                                            ],
                                            isCurved: true,
                                            colors: [Colors.orange,Colors.orangeAccent.shade700],
                                            barWidth: 5,
                                            belowBarData: BarAreaData(
                                              show: true,
                                              colors: gradientcolors.map((e) => e.withOpacity(0.3)).toList()
                                            )
                                          ),
                                        ],
                                      )
                                    ),
                                  ),
                                ),
                              ),
                          ),
                          SizedBox(height: 10,),
                          Padding(
                            padding: const EdgeInsets.fromLTRB(15, 0, 15, 0),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                SizedBox(
                                  width:MediaQuery.of(context).size.width*0.45,
                                  height: 70,
                                  child: Card(
                                    elevation: 3,
                                    shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(7),
                                    ) ,
                                    child: Padding(
                                      padding: const EdgeInsets.symmetric(vertical: 5),
                                      child: Column(
                                        mainAxisAlignment: MainAxisAlignment.center,
                                        children: [
                                          Text('New Operator',style:
                                          TextStyle(color: Colors.black,
                                              fontSize: 14,),),
                                          SizedBox(height: 5,),
                                          Text('Register new verfied Operator',
                                            textAlign: TextAlign.center,
                                            style:
                                          TextStyle(color: Colors.grey,
                                              fontSize: 9,
                                              fontWeight: FontWeight.bold),),

                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                                SizedBox(
                                  width:MediaQuery.of(context).size.width*0.45,
                                  height: 70,
                                  child: Card(
                                    elevation: 3,
                                    shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(7),
                                    ) ,
                                    child: Padding(
                                      padding: const EdgeInsets.symmetric(vertical: 5),
                                      child: Column(
                                        mainAxisAlignment: MainAxisAlignment.center,
                                        children: [
                                          Text('New Supervisors',style:
                                          TextStyle(color: Colors.black,
                                              fontSize: 14,),),
                                          SizedBox(height: 5,),
                                          Text('Register new verfied Supervisors',
                                            textAlign: TextAlign.center,
                                            style:
                                          TextStyle(color: Colors.grey,
                                              fontSize: 9,
                                              fontWeight: FontWeight.bold),),
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),

                        ],
                      ),
                      SizedBox(height: 5,),
                      Padding(
                        padding: EdgeInsets.fromLTRB(15, 0, 0, 0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: [
                            Text('Verify Operators',style: TextStyle(
                              color: Colors.grey.shade500,
                              fontSize: 15,
                          fontWeight: FontWeight.bold,
                            ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                  FutureBuilder(
                    builder: (context, snapshot){
                      if(snapshot != null){
                        return Column(
                          children: [
                            ListView.builder(
                              scrollDirection: Axis.vertical,
                              physics:NeverScrollableScrollPhysics(),
                              shrinkWrap: true,
                              // builder: (BuildContext context, int index) {
                              //   return SizedBox(height: 0);
                              // },
                              itemCount: data == null ? 0 :data.length ,
                              itemBuilder: (context, index){
                                return InkWell(
                                  onTap: (){},
                                  child: Padding(
                                    padding: const EdgeInsets.all(0),
                                    child: Container(
                                      height: MediaQuery.of(context).size.height*0.1,
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.all(Radius.circular(20)),
                                      ),
                                      child: Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                        children: [
                                          Row(
                                            mainAxisAlignment: MainAxisAlignment.start,
                                            children: [
                                              Container(
                                                margin: EdgeInsets.only(left: 15),
                                                child: SizedBox(
                                                  height: 50,
                                                  width: 50,
                                                  child: ClipRRect(
                                                    borderRadius: BorderRadius.circular(15),
                                                    child: Image(
                                                      image: NetworkImage(split(data[index]["image"])),
                                                    ),
                                                  ),
                                                ),
                                              ),
                                              SizedBox(width: 10,),
                                              Padding(
                                                padding: const EdgeInsets.only(top: 25),
                                                child: Column(
                                                  crossAxisAlignment: CrossAxisAlignment.start,
                                                  children: [
                                                    Text(data[index]["fullName"],
                                                      textAlign: TextAlign.left,
                                                      style: TextStyle(
                                                        fontSize: 15,
                                                        color: Colors.black,
                                                        fontWeight: FontWeight.bold,
                                                      ),),
                                                    Text(capitalize(data[index]["experience"][data[index]["experience"].length-1]['designation']),
                                                      textAlign: TextAlign.left,
                                                      style: TextStyle(
                                                          fontSize: 15,
                                                          color: Colors.grey,
                                                          fontWeight: FontWeight.w100

                                                      ),),

                                                  ],
                                                ),
                                              ),

                                            ],
                                          ),
                                          Padding(
                                            padding: const EdgeInsets.only(right: 20),
                                            child: TextButton(onPressed: (){},
                                              child: Text('Verify Now',style:
                                              TextStyle(color: Colors.green,fontWeight: FontWeight.bold,
                                                  fontSize: 15),),),
                                          )
                                        ],
                                      ),
                                    ),
                                  ),
                                );
                              },
                            ),
                          ],
                        );
                      }else{
                        return CircularProgressIndicator();
                      }
                    },
                  ),
                ],
              ),
            ),
      ),
    );
  }

Solution

  • =>Change Second half with this

    Expanded(
                flex: 1,
                child: FutureBuilder(
                  builder: (context, snapshot) {
                    if (snapshot != null) {
                      return ListView.builder(
                          scrollDirection: Axis.vertical,
                          shrinkWrap: true,
                          // builder: (BuildContext context, int index) {
                          //   return SizedBox(height: 0);
                          // },
                          itemCount: data == null ? 0 : data.length,
                          itemBuilder: (context, index) {
                            return InkWell(
                                onTap: () {},
                                child: Padding(
                                  padding: const EdgeInsets.all(0),
                                  child: Container(
                                    height:
                                        MediaQuery.of(context).size.height * 0.1,
                                    decoration: BoxDecoration(
                                      borderRadius:
                                          BorderRadius.all(Radius.circular(20)),
                                    ),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.start,
                                          children: [
                                            Container(
                                              margin: EdgeInsets.only(left: 15),
                                              child: SizedBox(
                                                height: 50,
                                                width: 50,
                                                child: ClipRRect(
                                                  borderRadius:
                                                      BorderRadius.circular(15),
                                                  child: Image(
                                                    image: NetworkImage(split(
                                                        data[index]["image"])),
                                                  ),
                                                ),
                                              ),
                                            ),
                                            SizedBox(
                                              width: 10,
                                            ),
                                            Padding(
                                              padding:
                                                  const EdgeInsets.only(top: 25),
                                              child: Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                children: [
                                                  Text(
                                                    data[index]["fullName"],
                                                    textAlign: TextAlign.left,
                                                    style: TextStyle(
                                                      fontSize: 15,
                                                      color: Colors.black,
                                                      fontWeight: FontWeight.bold,
                                                    ),
                                                  ),
                                                  Text(
                                                    capitalize(data[index]
                                                        ["experience"][data[index]
                                                                ["experience"]
                                                            .length -
                                                        1]['designation']),
                                                    textAlign: TextAlign.left,
                                                    style: TextStyle(
                                                        fontSize: 15,
                                                        color: Colors.grey,
                                                        fontWeight:
                                                            FontWeight.w100),
                                                  ),
                                                ],
                                              ),
                                            ),
                                          ],
                                        ),
                                        Padding(
                                          padding: const EdgeInsets.only(right: 20),
                                          child: TextButton(
                                            onPressed: () {},
                                            child: Text(
                                              'Verify Now',
                                              style: TextStyle(
                                                  color: Colors.green,
                                                  fontWeight: FontWeight.bold,
                                                  fontSize: 15),
                                            ),
                                          ),
                                        )
                                      ],
                                    ),
                                  ),
                                ));
                          });
                    } else {
                      return CircularProgressIndicator();
                    }
                  },
                ),
              ),