A RenderFlex overflowed by 77 pixels on the right. error in flutter

Question

    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.

Try to add your widget inside Flexible or Expanded widget see my answer here https://stackoverflow.com/a/68444861/13997210 — Ravindra S. Patil, Jul 31 '21 at 16:11

score 1 · Accepted Answer · answered Jul 31 '21 at 17:28

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

A RenderFlex overflowed by 77 pixels on the right. error in flutter

1 Answers1