How to remove the RenderFlex error in flutter for column with listview.builder?

1

I am building the column in flutter as below code which has a nested ListView.Builder, but it is giving display error of RenderFlex, how should I resolve it?

A RenderFlex overflowed by 116 pixels on the bottom.

   Column(
          children: [
            SizedBox(height: 25,),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment:CrossAxisAlignment.center,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment:CrossAxisAlignment.center,
                  children: <Widget>[
                    //order container
                    Container(

                      height: 32,
                      width: 160,
                      decoration: BoxDecoration(

                        color: Colors.white,
                        border: Border.all(
                          width:0.5,
                          color: Color(0xFF766F6F),


                        ),

                        borderRadius: BorderRadius.circular(10.0),
                      ),
                      child: Center(
                        child: Text('Order Date',
                          style: TextStyle(backgroundColor: Colors.white,
                            color:Color(0xFF2e2a2a),
                            fontFamily: 'Roboto',
                            fontSize: 12,

                          ),
                        ),
                      ),
                    ),
                    Container(
                      height: 32,
                      width: 160,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        border: Border.all(
                          width:0.5,
                          color: Color(0xFF766F6F),
                        ),
                        borderRadius: BorderRadius.circular(10.0),
                      ),
                      child: Center(
                        child: Text('19 May 2020'),
                      ),
                    ),

                  ],),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment:CrossAxisAlignment.center,
                  children: <Widget>[
                    Container(

                      height: 32,
                      width: 160,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        border: Border.all(
                          width:0.5,
                          color: Color(0xFF766F6F),

                        ),
                        borderRadius: BorderRadius.circular(10.0),
                      ),
                      child: Center(
                        child: Text('Party',
                          style: TextStyle(backgroundColor: Colors.white,
                            color:Color(0xFF2e2a2a),
                            fontFamily: 'Roboto',
                            fontSize: 12,

                          ),),
                      ),
                    ),
                    Container(
                      height: 32,
                      width: 160,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        border: Border.all(

                          width:0.5,
                          color: Color(0xFF766F6F),

                        ),
                        borderRadius: BorderRadius.circular(10.0),
                      ),
                      child: Center(
                        child: Text('Vardhman Textiles Ltd',                               style: TextStyle(backgroundColor: Colors.white,
                          color:Color(0xFF2e2a2a),
                          fontFamily: 'Roboto',
                          fontSize: 12,

                        ),),
                      ),
                    ),

                  ],),
              ],),
            SizedBox(height: 30,),
            ListView.separated(
              separatorBuilder:
                  (BuildContext context, int index) {
                return SizedBox(
                  height: 16,
                );
              },
              shrinkWrap: true,
              itemCount: snapshot.data.content[key].length,
              itemBuilder: (context, index) {


                return Column(
                  children: [

                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[

                        Container(
                          height: 40,
                          width: 320,
                          decoration: BoxDecoration(
                            color: Color(0xFFFF0000),
                            border: Border.all(
                              color: Color(0xFFFF0000),
                            ),
                            borderRadius: BorderRadius.circular(10.0),
                          ),
                          child: Center(
                            child: Text('ITEM DETAILS - ' + "1/2",
                              style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold,
                                fontFamily: 'Roboto',
                                fontSize: 20,

                              ),
                            ),
                          ),
                        ),

                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          // crossAxisAlignment:CrossAxisAlignment.center,
                          children: <Widget>[
                            Container(

                              height: 32,
                              width: 160,
                              decoration: BoxDecoration(
                                color: Colors.white,
                                border: Border.all(

                                  width:0.5,
                                  color: Color(0xFF766F6F),
                                ),
                                borderRadius: BorderRadius.circular(10.0),
                              ),
                              child: Center(
                                child: Text("Catalog Item",   style: TextStyle(backgroundColor: Colors.white,
                                  color:Color(0xFF2e2a2a),
                                  fontFamily: 'Roboto',
                                  fontSize: 12,

                                ),
                                ),
                              ),
                            ),
                            Container(
                              height: 32,
                              width: 160,
                              decoration: BoxDecoration(
                                color: Colors.white,
                                border: Border.all(

                                  width:0.5,
                                  color: Color(0xFF766F6F),
                                ),
                                borderRadius: BorderRadius.circular(10.0),
                              ),
                              child: Center(
                                child: Text(snapshot
                                    .data.content[key][index][0].sodPk,   style: TextStyle(backgroundColor: Colors.white,
                                  color:Color(0xFF2e2a2a),
                                  fontFamily: 'Roboto',
                                  fontSize: 12,

                                ),
                                ),
                              ),
                            ),

                          ],),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment:CrossAxisAlignment.center,
                          children: <Widget>[
                            Container(

                              height: 32,
                              width: 160,
                              decoration: BoxDecoration(
                                color: Colors.white,
                                border: Border.all(
                                  width:0.5,
                                  color: Color(0xFF766F6F),
                                ),
                                borderRadius: BorderRadius.circular(10.0),
                              ),
                              child: Center(
                                child: Text('QTY.',   style: TextStyle(backgroundColor: Colors.white,
                                  color:Color(0xFF2e2a2a),
                                  fontFamily: 'Roboto',
                                  fontSize: 12,

                                ),
                                ),
                              ),
                            ),
                            Container(
                              height: 32,
                              width: 160,
                              decoration: BoxDecoration(
                                color: Colors.white,
                                border: Border.all(
                                  width:0.5,
                                  color: Color(0xFF766F6F),
                                ),
                                borderRadius: BorderRadius.circular(10.0),
                              ),
                              child: Center(
                                child: Text('10', style: TextStyle(backgroundColor: Colors.white,
                                  color:Color(0xFF2e2a2a),
                                  fontFamily: 'Roboto',
                                  fontSize: 12,

                                ),),
                              ),
                            ),

                          ],),




                      ],
                    ),
                  ],
                );
              },
            )
          ],
        )

Please guide me as I am new to the flutter learning, thanks, I am trying to use Stack, but no good, When I used stack the first child column was overlapped by the listview.builder, so removed it,

Please guide me the resolution

flutter
dart
flutter-listview
asked on Stack Overflow Aug 27, 2020 by Vicky Singh

1 Answer

1

You can try wrap your ListView.separated with Expanded Widget. What expanded do is expands a child of a Row, Column, or Flex so that the child fills the available space. So it won't overflow

answered on Stack Overflow Aug 27, 2020 by Aldy Yuan

User contributions licensed under CC BY-SA 3.0