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