[flutter]"A RenderFlex overflowed" when DropdwonButton is put in Row

Situation

As the title says, when I put a DropdownButton inside a Row with flutter, I get an exception of "A RenderFlex overflowed".

Solution

If you want to expand the DropdwonButton to fill the screen, wrap the DropdownButton in Expanded. If you don't need to expand it, set the DropdownButton's isExpanded property to false.

Cause

The size of the widget was specified incorrectly.

Row tries to expand as much as possible to fit the child widget, but DropdownButton tries to expand as much as possible to fit the parent widget if isExpanded = true.

In other words, the cause of the exception is that the width becomes infinite by repeating the process of expanding DropdownButton → expanding Row → expanding DropdownButton...

The same problem can occur not only with the combination of Row and DropdownButton, but also with a widget that spreads according to the child and a widget that spreads according to the parent.