Right overflowed by 23 pixels in flutter listview

Question

I created a listview But it shows OVERFLOWED BY PIXELS ERROR

Here is the listview for you

return ListView.builder(

      itemCount: titles.length,
      itemBuilder: (context, index) {
        return Card(
            elevation: 50,
            child: InkWell(


              splashColor: Colors.green,
              highlightColor: Colors.red,
              child: Row(
                children: <Widget>[


              Container(


                height: 100.0,
                  width:50.0,

                decoration: BoxDecoration(
                    gradient:LinearGradientStyle.linearGradient(
                        orientation:LinearGradientStyle.ORIENTATION_HORIZONTAL,
                        gradientType: LinearGradientStyle.GRADIENT_TYPE_AMIN
                    )
                ),),

                  Container(
                      margin: EdgeInsets.all(10),
                      child: Text(
                        numbers[index],
                      )),


                  Container(
                    margin: EdgeInsets.all(10),
                    child: GradientText((titles[index]),
                      gradient:gradient,

                      style:TextStyle(fontSize:20.0,fontWeight:FontWeight.bold, ),
                    ),
                    //Text(titles[index]),
                  )
                ],
              ),
              onTap: () => onTaps[index](),
            ));
      });

If you need more code please comment ...

Instead of Overflow error It should come to 2nd line of the list.If you have any solution then please help me....

You can maybe try the [wrap widget](https://www.youtube.com/watch?v=z5iw2SeFx2M) — Tinus Jackson, Nov 07 '19 at 11:42
In this case, I would highly recommend you to use ListTile: https://www.youtube.com/watch?v=l8dj0yPBvgQ It will make your code looks much cleaner and avoid this problems. — Karim, Nov 07 '19 at 12:42
@tinus jackson do you know any method to use wrap widget in this case. i tried using but error appears in the screen — raman raman, Nov 07 '19 at 12:52

score 1 · Accepted Answer · answered Nov 07 '19 at 11:54

ListView.builder(

      itemCount: 1,
      itemBuilder: (context, index) {
        return Card(
            elevation: 50,
            child: InkWell(


              splashColor: Colors.green,
              highlightColor: Colors.red,
              child: Row(
                children: <Widget>[


              Container(


                height: 100.0,
                  width:50.0,

                ),

                  Container(
                      margin: EdgeInsets.all(10),
                      child: Text(
                        "numbers[index]",
                      )),


                  Flexible(
                                      child: Container(
                      margin: EdgeInsets.all(10),
                      child: Text("GradientText"*30,

                        style:TextStyle(fontSize:20.0,fontWeight:FontWeight.bold, ),
                      ),
                      //Text(titles[index]),
                    ),
                  )
                ],
              ),
              onTap: () {},
            ));
      }),

Use Flexible widget like parent which widget has overflow

Thank you it helped me.How can I wrap it with WRAP widget instead of using flexible as parent — raman raman, Nov 07 '19 at 12:21
Wrap widget has children property instead of child property. Thats why flexible is better for your situation. — Can Karabag, Nov 07 '19 at 12:47
I wrapped using children but error appeared.then I used your solution to solve this — raman raman, Nov 07 '19 at 12:49
You could use expanded, flexible widgets inside of Row and Column widgets. Check this: https://stackoverflow.com/questions/52645944/flutter-expanded-vs-flexible It could teach somethings to you to learn how to design at flutter — Can Karabag, Nov 07 '19 at 12:53

score 1 · Answer 2 · answered Feb 20 '20 at 11:56

I had a similar issue with DropdownButton. I was trying to create a dropdown for questions and answers, for that I had to create DropdownButton for a custom model.

My life was saved by isExpanded: true,

List<Question> questions;

   Widget buildDropDown() {
    return DropdownButton<Question>(
      isExpanded: true,
      value: _selectedQuestion,
      style: TextStyle(color: Colors.white),
      items: questions.map<DropdownMenuItem<Question>>((Question question) {
        return DropdownMenuItem(
          child: Text(
            question.title,
          ),
          value: question,
        );
      }).toList(),
      onChanged: (Question question) {
        setState(() {
          _selectedQuestion = question;
        });
      },
    );
  }

class Question {
  String title;
  String answer;
  int id;

  Question({this.id, this.title});

  void setAnswer(String answer) {
    this.answer = answer;
  }
}

Right overflowed by 23 pixels in flutter listview

2 Answers2