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.

It's because you are hard coding the sizes of the boxes. Use [flexible](https://api.flutter.dev/flutter/widgets/Flexible-class.html) widgets instead. — PatrickMahomes, Jul 20 '21 at 12:22

score 2 · Accepted Answer · answered Jul 20 '21 at 12:07

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

hey, i used listview, but it disturb the height of the container, so i go to the flexible widget. — TimeToCode, Jul 20 '21 at 13:25

Mohit Singh · Answer 2 · 2021-07-20T13:30:35.753

1

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.

edited Jul 20 '21 at 13:30

answered Jul 20 '21 at 12:34

Mohit Singh

323
4
13

hey, i use your answer but i want space between the container, i post the output of that code, can u please help me with the use of spacer() – TimeToCode Jul 20 '21 at 13:23
1

@TimeToCode just use margin property of each container. I have updated the dartpad link to use margin property. Let me know if this works out for you. – Mohit Singh Jul 20 '21 at 13:33

score 1 · Answer 3 · answered Jul 20 '21 at 13:00

1

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

answered Jul 20 '21 at 13:00

srihari ayapilla

163
7

1

that works. thank you ! but can u please add the space between the container, how i can do that? – TimeToCode Jul 20 '21 at 13:24
1

Containers have a parameter called 'margin', give some marging to your containers. margin: EdgeInsets.symmetric(horizontal: 4.0) like so. – srihari ayapilla Jul 21 '21 at 07:24

how to handle the right overflowed

3 Answers3