Flutter RenderFlex overflowed

user_15144377 0
Viewed 170

Hi i am new in flutter and i am facing this error

A RenderFlex overflowed by 9.0 pixels on the right.
The relevant error-causing widget was Row

this is my code down below:

return Scaffold(
  backgroundColor: Colors.white,
  appBar: AppBar(
    backgroundColor: Colors.white,
    elevation: 0.0,
    iconTheme: IconThemeData(
      color: Colors.grey[600],
    ),
    leading: Padding(
      padding: const EdgeInsets.only(left: 8.0),
      child: GestureDetector(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: [
            Icon(
              Icons.arrow_back_ios_outlined,
            ), 
            Text(
              'Back',
              style: GoogleFonts.poppins(
                color: Colors.grey[600],
                fontSize: 20
              ),
            ),
          ],
        ),

And here is screenshot from my device emulator enter image description here

Can you help me please how to fix this error?

flutter-layout dart flutter
2 Answers

Wrapping the Icon with an Expanded widget will get rid of the error here.

return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0.0,
        iconTheme: IconThemeData(
          color: Colors.grey[600],
        ),
        leading: Padding(
          padding: const EdgeInsets.only(left: 8.0),
          child: GestureDetector(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: [
                Expanded(
                  child: Icon(
                    Icons.arrow_back_ios_outlined,
                  ),
                ),
                Text(
                  'Back',
                  style: GoogleFonts.poppins(
                      color: Colors.grey[600], fontSize: 20),
                ),
              ],
            ),
          ),
        ),
      ),
    );

Does this solve your problem?

user_89955550

I tried add leadingWidth with value 100 to AppBar and that fixed my problem

user_151443770
Related