无法在 FutureBuilder 中滚动 ListView

Question

我已经尝试了 stackoverflow 上的几乎所有解决方案，例如使用带有单个子滚动视图和物理属性的 Expanded widget，但仍然无法在占据屏幕后半部分的 futurebuilder 中启用滚动，前半部分是静态的，但后半部分包含 listview未来的建造者，但它不可滚动！

错误底部溢出了 1313 像素

这是我的代码

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();
                      }
                    },
                  ),
                ],
              ),
            ),
      ),
    );
  }

Answer 1

=> 用这个改变下半场

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();
                }
              },
            ),
          ),

Answer 2

尝试以下格式希望对您有所帮助。将 FutureBuilder 包裹在 Expanded 内 或 灵活

body: Column(
  children: [
    Container(),
    Expanded(
      child: FutureBuilder(
        future: yourFutureCall();
        builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
          return ListView.builder(
            shrinkWrap: true,
            physics:
                const NeverScrollableScrollPhysics(), //OR use -> const ClampingScrollPhysics(),
            itemBuilder: (BuildContext context, int index) {
              return Container();
            },
          );
        },
      ),
    ),
  ],
),

Answer 3

我不确定，因为我无法运行代码，但我看到的是由于缺乏指定的宽度和高度而导致的无界小部件，这是颤振世界中的常见错误。

如果@Jasmin Sojitra的答案不起作用尝试将全屏的高度和宽度放在第一个容器上，如果将 Container 的子级放入 SingleChildScrollView 中仍然存在问题。