Marek
Marek

Reputation: 219

A RenderFlex overflowed by 3.0 pixels on the right /Flutter

i´ve been coding for a few hours. I´m new in flutter and this error is showing in my project: A RenderFlex overflowed by 3.0 pixels on the right. The relevant error-causing widget was Row The overflowing RenderFlex has an orientation of Axis.horizontal.

Do you have some solutions how to fix it please

Here is my code below

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Card(
     elevation: 3.0,
     shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0)
     ),
     child: Container(
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(15.0),
         image: DecorationImage(
           fit: BoxFit.cover,
           image: AssetImage(
            'assets/brownies.jpg',
      )
    )
  ),
  child: ListTile(
    contentPadding: EdgeInsets.fromLTRB(50, 50, 50, 50),
    leading: ConstrainedBox(
      constraints: BoxConstraints(
        minWidth: 250,
        minHeight: 250,
        maxWidth: 250,
        maxHeight: 250,
      ),
      child: Column(
        children: [
          Text(
            'Čokoládové brownies',
            style: GoogleFonts.caveat(
              fontSize: 25.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 0),
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.grey.withOpacity(0.5),
              ),
              width: 75,
              child: Row(
                children: [
                  Icon(
                    Icons.access_time,
                  ),
                  Text(
                    '45 min.',
                    overflow: TextOverflow.ellipsis,
                    softWrap: true,
                    style: GoogleFonts.poppins(
                      fontSize: 15.0,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                ],
              ),
            ),
          )
        ],
      )
    ),
    trailing: Icon(
      Icons.arrow_forward_ios,
      size: 27.0,
    ),
    onTap: () {
      Navigator.push(
      context,
      PageTransition(child: Brownies(), type: PageTransitionType.rightToLeft),
      );
    },
  ),
),

),

Upvotes: 0

Views: 937

Answers (1)

BabC
BabC

Reputation: 1084

It's probably this part :

             Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.grey.withOpacity(0.5),
                  ),
                  width: 75,
                  child: Row(
                    children: [
                      Icon(
                        Icons.access_time,
                      ),
                      Text(
                        '45 min.',
                        overflow: TextOverflow.ellipsis,
                        softWrap: true,
                        style: GoogleFonts.poppins(
                          fontSize: 15.0,
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ],
                  ),

You should not set the width of the container containing the Row.

             Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.grey.withOpacity(0.5),
                  ),
                  child: Row(
                    children: [

Upvotes: 0

Related Questions