A RenderFlex overflowed by 36 pixels on the right using row

Is your UI design suffering from this common mistake? Discover why a RenderFlex overflowed by 36 pixels on the right using row can wreck your layout. Learn how to fix it now!

Table of Contents

• Steps to fix RenderFlex overflowed by 36 pixels on the right using row
  • Terminal message
  • Solution

Steps to fix RenderFlex overflowed by 36 pixels on the right using row

Terminal message

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.

This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

import 'package:flutter/material.dart';


void main() {

 runApp(const MyApp());

}


class MyApp extends StatelessWidget {

 const MyApp({super.key});


 // This widget is the root of your application.

 @override

 Widget build(BuildContext context) {

   return MaterialApp(

     debugShowCheckedModeBanner: false,

     title: 'Flutter Demo',

     theme: ThemeData(

       primarySwatch: Colors.blue,

     ),

     home: const MyHomePage(title: 'Flutter Demo Home Page'),

   );

 }

}


class MyHomePage extends StatefulWidget {

 const MyHomePage({super.key, required this.title});


 final String title;


 @override

 State<MyHomePage> createState() => _MyHomePageState();

}


class _MyHomePageState extends State<MyHomePage> {

 final ButtonStyle buttonStyle = ButtonStyle(

   padding: MaterialStateProperty.all<EdgeInsets>(const EdgeInsets.all(15)),

   foregroundColor: MaterialStateProperty.all<Color>(Colors.red),

   shape: MaterialStateProperty.all<RoundedRectangleBorder>(

     RoundedRectangleBorder(

       borderRadius: BorderRadius.circular(18.0),

       side: const BorderSide(color: Colors.red),

     ),

   ),

 );

 final TextStyle fontStyle = const TextStyle(fontSize: 14);


 @override

 Widget build(BuildContext context) {

   return Scaffold(

     appBar: AppBar(

       title: Text(widget.title),

     ),

     body: Column(

       children: [

         Row(

           children: [

             TextButton(style: buttonStyle, onPressed: () {}, child: Text("One", style: fontStyle)),

             TextButton(style: buttonStyle, onPressed: () {}, child: Text("Two", style: fontStyle)),

             TextButton(style: buttonStyle, onPressed: () {}, child: Text("Three", style: fontStyle)),

             TextButton(style: buttonStyle, onPressed: () {}, child: Text("Three", style: fontStyle)),

             TextButton(style: buttonStyle, onPressed: () {}, child: Text("Three", style: fontStyle)),

             TextButton(style: buttonStyle, onPressed: () {}, child: Text("Three", style: fontStyle)),

           ],

         ),

       ],

     ), // This trailing comma makes auto-formatting nicer for build methods.

   );

 }

}

Also Read: [Solved] A RenderFlex overflowed by 719 pixels on the bottom

Solution

import 'package:flutter/material.dart';


void main() {

 runApp(const MyApp());

}


class MyApp extends StatelessWidget {

 const MyApp({super.key});


 // This widget is the root of your application.

 @override

 Widget build(BuildContext context) {

   return MaterialApp(

     debugShowCheckedModeBanner: false,

     title: 'Flutter Demo',

     theme: ThemeData(

       primarySwatch: Colors.blue,

     ),

     home: const MyHomePage(title: 'Flutter Demo Home Page'),

   );

 }

}


class MyHomePage extends StatefulWidget {

 const MyHomePage({super.key, required this.title});


 final String title;


 @override

 State<MyHomePage> createState() => _MyHomePageState();

}


class _MyHomePageState extends State<MyHomePage> {

 final ButtonStyle buttonStyle = ButtonStyle(

   padding: MaterialStateProperty.all<EdgeInsets>(const EdgeInsets.all(15)),

   foregroundColor: MaterialStateProperty.all<Color>(Colors.red),

   shape: MaterialStateProperty.all<RoundedRectangleBorder>(

     RoundedRectangleBorder(

       borderRadius: BorderRadius.circular(18.0),

       side: const BorderSide(color: Colors.red),

     ),

   ),

 );

 final TextStyle fontStyle = const TextStyle(fontSize: 14);


 @override

 Widget build(BuildContext context) {

   return Scaffold(

     appBar: AppBar(

       title: Text(widget.title),

     ),

     body: Column(

       children: [

         SingleChildScrollView(

           scrollDirection: Axis.horizontal,

           child: Row(

             children: [

               TextButton(style: buttonStyle, onPressed: () {}, child: Text("One", style: fontStyle)),

               TextButton(style: buttonStyle, onPressed: () {}, child: Text("Two", style: fontStyle)),

               TextButton(style: buttonStyle, onPressed: () {}, child: Text("Three", style: fontStyle)),

               TextButton(style: buttonStyle, onPressed: () {}, child: Text("Three", style: fontStyle)),

               TextButton(style: buttonStyle, onPressed: () {}, child: Text("Three", style: fontStyle)),

               TextButton(style: buttonStyle, onPressed: () {}, child: Text("Three", style: fontStyle)),

             ],

           ),

         ),

       ],

     ), // This trailing comma makes auto-formatting nicer for build methods.

   );

 }

}