androidflutteremulationoverflowexception

how to handle the right overflowed


I created 3 three containers in row, it is working perfectly on emulator but when i run app on my andriod phone it is giving me right overflowed by 20 pixels error.

i found the solution to wrap it in SingleChildScrollView but i don't want to scroll my screen i want to fix it without scrolling.

here is output on emulator

enter image description here

and here is the output of andriod enter image description here

Code:

Padding(
              padding: EdgeInsets.only(top: 100),
              
              child: Row(
                
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  
                  new Container(
                    decoration: BoxDecoration(
                        color: Colors.pink,
                        borderRadius: BorderRadius.all(Radius.circular(10))),
                    height: 100,
                    width: 180,
                    child: Padding(
                        padding: EdgeInsets.only(top: 15),
                        child: Center(
                          child: Column(children: <Widget>[
                            Text("Last total working hours",
                                style: TextStyle(
                                    color: fontcolor,
                                    fontSize: headfontsize,
                                    fontFamily: fontFamily)),
                            Text(totalWorkingHours(),
                                style: TextStyle(
                                    color: fontcolor,
                                    fontSize: remainingtextfontsize,
                                    fontFamily: fontFamily)),
                            Text("Hours",
                                style: TextStyle(
                                    color: fontcolor,
                                    fontSize: remainingtextfontsize,
                                    fontFamily: fontFamily)),
                          ]),
                        )),
                  ),
                  new Container(
                      decoration: BoxDecoration(
                          color: Color(int.parse(presentcolor)),
                          borderRadius: BorderRadius.all(Radius.circular(10))),
                      height: 100,
                      width: 100,
                      child: Padding(
                        padding: EdgeInsets.only(top: 15),
                        child: Center(
                          child: Column(children: <Widget>[
                            Text("Presents",
                                style: TextStyle(
                                    color: fontcolor,
                                    fontSize: headfontsize,
                                    fontFamily: fontFamily)),
                            Text("20",
                                style: TextStyle(
                                    color: fontcolor,
                                    fontSize: remainingtextfontsize,
                                    fontFamily: fontFamily)),
                           
                          ]),
                        )),
                      ),
                  new Container(
                      decoration: BoxDecoration(
                          color: Color(int.parse(absentcolor)),
                          borderRadius: BorderRadius.all(Radius.circular(10))),
                      height: 100,
                      width: 100,
                       child: Padding(
                        padding: EdgeInsets.only(top: 15),
                        child: Center(
                          child: Column(children: <Widget>[
                            Text("Absents",
                                style: TextStyle(
                                    color: fontcolor,
                                    fontSize: headfontsize,
                                    fontFamily: fontFamily)),
                            Text("0",
                                style: TextStyle(
                                    color: fontcolor,
                                    fontSize: remainingtextfontsize,
                                    fontFamily: fontFamily)),
                           
                          ]),
                        )),),
                ],
              )),

Update: thanks for all your solutions, i tried them and got the same output here is the snap

enter image description here

but i want a space between the containers, i am using spacer for this but it again disturb the width of the container.

here is the updated code

Container(
              width: MediaQuery.of(context).size.width,
              child: FittedBox(
                // Scales down if size is not enough.
                fit: BoxFit.scaleDown,
                child: Padding(
                    padding: EdgeInsets.only(top: 100),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        new Container(
                          decoration: BoxDecoration(
                              color: Colors.pink,
                              borderRadius:
                                  BorderRadius.all(Radius.circular(10))),
                          height: 100,
                          width: 180,
                          child: Padding(
                              padding: EdgeInsets.only(top: 15),
                              child: Center(
                                child: Column(children: <Widget>[
                                  Text("Last total working hours",
                                      style: TextStyle(
                                          color: fontcolor,
                                          fontSize: headfontsize,
                                          fontFamily: fontFamily)),
                                  Text(totalWorkingHours(),
                                      style: TextStyle(
                                          color: fontcolor,
                                          fontSize: remainingtextfontsize,
                                          fontFamily: fontFamily)),
                                  Text("Hours",
                                      style: TextStyle(
                                          color: fontcolor,
                                          fontSize: remainingtextfontsize,
                                          fontFamily: fontFamily)),
                                ]),
                              )),
                        ),
                        new Container(
                          decoration: BoxDecoration(
                              color: Color(int.parse(presentcolor)),
                              borderRadius:
                                  BorderRadius.all(Radius.circular(10))),
                          height: 100,
                          width: 100,
                          child: Padding(
                              padding: EdgeInsets.only(top: 15),
                              child: Center(
                                child: Column(children: <Widget>[
                                  Text("Presents",
                                      style: TextStyle(
                                          color: fontcolor,
                                          fontSize: headfontsize,
                                          fontFamily: fontFamily)),
                                  Text("20",
                                      style: TextStyle(
                                          color: fontcolor,
                                          fontSize: remainingtextfontsize,
                                          fontFamily: fontFamily)),
                                ]),
                              )),
                        ),
                        new Container(
                          decoration: BoxDecoration(
                              color: Color(int.parse(absentcolor)),
                              borderRadius:
                                  BorderRadius.all(Radius.circular(10))),
                          height: 100,
                          width: 100,
                          child: Padding(
                              padding: EdgeInsets.only(top: 15),
                              child: Center(
                                child: Column(children: <Widget>[
                                  Text("Absents",
                                      style: TextStyle(
                                          color: fontcolor,
                                          fontSize: headfontsize,
                                          fontFamily: fontFamily)),
                                  Text("0",
                                      style: TextStyle(
                                          color: fontcolor,
                                          fontSize: remainingtextfontsize,
                                          fontFamily: fontFamily)),
                                ]),
                              )),
                        ),
                      ],
                    )),
              )),

please help me how to fix this.


Solution

  • Use ListView instead of Row

    Padding(
              padding: EdgeInsets.only(top: 100),
              
              child: ListView(
                children: <Widget>[
                  new Container(
                    decoration: BoxDecoration(
                        color: Colors.pink,
                        borderRadius: BorderRadius.all(Radius.circular(10))),
                    height: 100,
                    width: 180,
                    child: Padding(
                        padding: EdgeInsets.only(top: 15),
                        child: Center(
                          child: Column(children: <Widget>[
                            Text("Last total working hours",
                                style: TextStyle(
                                    color: fontcolor,
                                    fontSize: headfontsize,
                                    fontFamily: fontFamily)),
                            Text(totalWorkingHours(),
                                style: TextStyle(
                                    color: fontcolor,
                                    fontSize: remainingtextfontsize,
                                    fontFamily: fontFamily)),
                            Text("Hours",
                                style: TextStyle(
                                    color: fontcolor,
                                    fontSize: remainingtextfontsize,
                                    fontFamily: fontFamily)),
                          ]),
                        )),
                  ),
                  new Container(
                      decoration: BoxDecoration(
                          color: Color(int.parse(presentcolor)),
                          borderRadius: BorderRadius.all(Radius.circular(10))),
                      height: 100,
                      width: 100,
                      child: Padding(
                        padding: EdgeInsets.only(top: 15),
                        child: Center(
                          child: Column(children: <Widget>[
                            Text("Presents",
                                style: TextStyle(
                                    color: fontcolor,
                                    fontSize: headfontsize,
                                    fontFamily: fontFamily)),
                            Text("20",
                                style: TextStyle(
                                    color: fontcolor,
                                    fontSize: remainingtextfontsize,
                                    fontFamily: fontFamily)),
                           
                          ]),
                        )),
                      ),
                  new Container(
                      decoration: BoxDecoration(
                          color: Color(int.parse(absentcolor)),
                          borderRadius: BorderRadius.all(Radius.circular(10))),
                      height: 100,
                      width: 100,
                       child: Padding(
                        padding: EdgeInsets.only(top: 15),
                        child: Center(
                          child: Column(children: <Widget>[
                            Text("Absents",
                                style: TextStyle(
                                    color: fontcolor,
                                    fontSize: headfontsize,
                                    fontFamily: fontFamily)),
                            Text("0",
                                style: TextStyle(
                                    color: fontcolor,
                                    fontSize: remainingtextfontsize,
                                    fontFamily: fontFamily)),
                           
                          ]),
                        )),),
                ],
              )),