Fixing RenderFlex Overflow Caused by Virtual Keyboard in Flutter

While developing with Flutter recently, I ran into the A RenderFlex overflowed by ... error a lot.

The cause was that I was using a Scaffold for the Page-level widget with a Column in the body parameter containing multiple widgets. Usually, for code readability and reusability, I create separate files and widgets for certain components within the Column. One of those widgets had a Column wrapped in Expanded. Here's the widget hierarchy before the error occurred:

Scaffold
	SafeArea
		Column
			Padding
			SizedBox
			Expanded
				Form
					Column
						Expanded
							Padding
								Column
									ListTile
									SizedBox
									Column
										TextFormField
										SizedBox
										Text
										SizedBox
										Wrap
											ChoiceChips
						Container
							FilledButton

The problem appeared when the virtual keyboard showed up. When the height was small, the Chip widgets at the bottom of the Wrap widget and the FilledButton were colliding with each other.

Here's an example I recreated that's similar to the situation at that time:

What I wanted as a solution was — since the "Next" button was already positioned nicely above the keyboard — to make only the Chips scrollable when the virtual keyboard appeared.

I looked at many examples, but most said wrapping the Scaffold body with SingleChildScrollView and setting reverse: true would solve it, or that setting resizeToAvoidBottomInset: false on the Scaffold would fix it. Neither of these worked for my situation.

Wrapping the body with SingleChildScrollView scrolls the entire area, so parts I wanted to keep fixed would scroll too. Since I only wanted a specific section to scroll, this wasn't a good approach for my situation.

Using resizeToAvoidBottomInset: false hides the FilledButton behind the virtual keyboard. Then you'd need to use bottomSheet on the Scaffold, but even with SafeArea applied to the body, on iPhones the button appeared at the Home indicator position at the bottom — SafeArea wasn't being applied. Adding padding would fix that, but then the same padding would persist when the keyboard appeared, which wasn't satisfactory.

While trying to make the Chip widgets scrollable by adding Layout widgets, it was really hard to code because multiple files were connected, there were nested Columns within Columns, and I kept getting RenderFlex overflow errors every time I added something to test.

The biggest reason I kept hitting this error was having a Column inside an Expanded within a Column, and then another Expanded within that inner Column. Since I built things without properly understanding this layout structure, it was hard to find the root cause. I ended up commenting out the existing widgets and rebuilding the layout from scratch with simple examples.

Expanded is a widget used in Row, Column, or Flex to stretch along the main axis as much as possible.
It must be used as a child of Row, Column, or Flex. After other children occupy their space, the Expanded widget fills the remaining space.

After various attempts, I found a way to make only the Chip widgets scroll while avoiding the RenderFlex overflow:

Scaffold
	SafeArea
		Column
			Padding
			SizedBox
			Expanded
				Form
					Column
						Padding
							Column
								ListTile
								SizedBox
								Column
									TextFormField
									SizedBox
									Text
									SizedBox
						Expanded
							SingleChildScrollView
								Wrap
									ChoiceChips
						Container
							FilledButton

This isn't the only way, but in my situation, to make a specific area scrollable inside a Column, I needed to use both Expanded and SingleChildScrollView together.

I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best.

— Marilyn Monroe