how to handle the right overflowed

Question

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

and here is the output of andriod

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

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.

Answer 1

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)),
                       
                      ]),
                    )),),
            ],
          )),

Answer 2

You are using hardcoded values of width for containers in the row. Adding widths of all containers without padding, we get 380px(180+100+100). So, even with zero padding, the row will cause an overflow if the width of the device is lesser than 380 px. Your emulator must have a greater width than your device, that's why it's overflowing on the device but not on the emulator.

To solve this issue, use Flexible widget with appropriate flex values instead of harcoded values. Wrap each of 3 containers with a Flexible widget and appropriate flex values. Click here for a dartpad demonstration. Note that I have changed values of variables that isn't provided in your code block.

Answer 3

Since you are hardcoding the width. I think easiest way is to wrap the whole thing in a fitted box and use scale down. This will make the size of the buttons smaller if the necessary width is not available. Like so:

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(
              children: [
                    // Your 3 containers here.
                ],
            ),
          ),
        ),
      ),