Ad
A RenderFlex Overflowed By 77 Pixels On The Right. Error In Flutter
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
var items = [
"https://github.com/AmmarMohib/Economic-app/blob/master/lib/1.jpeg?raw=true",
"https://github.com/AmmarMohib/Economic-app/blob/master/lib/2.jpeg?raw=true",
"https://raw.githubusercontent.com/AmmarMohib/Economic-app/master/lib/3.jpeg",
"https://raw.githubusercontent.com/AmmarMohib/Economic-app/master/lib/4.jpeg"
];
var text =[
"Iphone 12",
"Iphone 12",
"Iphone 12",
"Iphone 12"
];
var reviews =[
"5.0 (23 reviews)",
"5.0 (23 reviews)",
"5.0 (23 reviews)",
"5.0 (23 reviews)"
];
var pie =[
"20 Pieces",
"20 Pieces",
"20 Pieces",
"20 Pieces"
];
var price =[
'90 dollar',
'90 dollar',
'90 dollar',
'90 dollar'
];
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Economic app",
home: Home(),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: Text("Economic app",style: TextStyle(color: Colors.black,fontFamily: 'Lobster',fontWeight: FontWeight.w600,fontSize: 30),),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.notifications_active,
color: Colors.black,
),
onPressed: () {
print(Text("hello"));
},
)
],centerTitle: true,backgroundColor: Colors.white,
),
body:GridView.count(
childAspectRatio: (45/15),
crossAxisCount: 1,
mainAxisSpacing: 7.5,
children: List.generate(items.length , (index) {
return Padding(
padding: const EdgeInsets.only(left:15,right: 15.0,top: 20.0),
child:ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
color: Colors.white,
child: Center(child: Column(
children: [
GridTile(
child: Title(
color: Colors.red,
child: Row(
children: [
Image.network(items[index],height: 100,),
Padding(
padding: const EdgeInsets.only(bottom:75.0,left: 5),
child: Text(text[index],style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),),
),
Container(
transform: Matrix4.translationValues(-105.0, -4, 0.0),
child: IconButton(
icon: Icon(
Icons.star_border_purple500,
color: Colors.yellow,
),
onPressed: () {
},
),
),
Container(transform: Matrix4.translationValues(-110.0, -4, 0.0),child: Text( reviews[index])),
Container(transform: Matrix4.translationValues(-230.0, 25, 0),child: Text(pie[index])),
Container(transform: Matrix4.translationValues(-162.0, -4, 0),child: Text(price[index],style: TextStyle(color: Colors.purple,fontSize: 15),),),
],
)
)),
])
),
),
),
);
})
)
),
);
}
}
this is my code, the problem is that when I run the app in mobile 400px or less it threws error hat A RenderFlex overflowed by 93 pixels on the right. It is not resolving
.I have tried al but it is not solving. I think that you will understand my problem and give me the solution. please help me in solving that Thanks a lot.
Ad
Answer
just use Column
and Row
instead of using Transform
look below codes:
GridTile(
child: Title(
color: Colors.red,
child: Row(
children: [
Image.network(
items[index],
height: 100,
),
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(
left: 15,
),
child: Text(
text[index],
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
Row(
children: [
IconButton(
icon: Icon(
Icons.star_border_purple500,
color: Colors.yellow,
),
onPressed: () {},
),
SizedBox(width: 5),
Text(reviews[index]),
SizedBox(width: 5),
Text(
price[index],
style: TextStyle(
color: Colors.purple,
fontSize: 15,
),
),
],
),
Container(
margin: EdgeInsets.only(left: 15),
child: Text(pie[index]),
),
],
),
],
),
),
),
Ad
source: stackoverflow.com
Related Questions
- → How do you create a 12 or 24 mnemonics code for multiple cryptocurrencies (ETH, BTC and so on..)
- → Flutter: input text field don't work properly in a simple example..... where am I wrong?
- → Can I customize the code formatting of Dart code in Atom?
- → Is it possible to develop iOS apps with Flutter on a Linux virtual machine?
- → Display SnackBar in Flutter
- → JSON ObjectMapper in Flutter
- → Material flutter app source code
- → TabBarSelection No such method error
- → How do I set the animation color of a LinearProgressIndicator?
- → Add different routes/screens to Flutter app
- → Is there a way to get the size of an existing widget?
- → How to share a file using flutter
- → Is there an easy way to find particular text built from RichText in a Flutter test?
Ad