A RenderFlex overflowed by Infinity pixels on the right when using DropdownButton widget

Question

When I created a drop-down button widget I got this error saying RenderFlex overflowed by Infinity pixels on the right. The source code is:

    import 'package:flutter/material.dart';

class test extends StatefulWidget {
  @override
  _testState createState() => _testState();
}

class _testState extends State<test> {

//gender
  List<DropdownMenuItem<int>> genderList = [];
  void genderLoad(){
    genderList.add(new DropdownMenuItem(child: new Text("Male"),value: 1,));
    genderList.add(new DropdownMenuItem(child: new Text("Female"),value: 2,));
  }
//end of gender


  @override
  Widget build(BuildContext context) {
    genderLoad();
    return Scaffold(
      body: new Container(
        child: new Center(

          child: new DropdownButton(items: genderList, onChanged: null),
        ),
      ),
    );
  }
}

After I build the program I didn't see any DropDownButton on the app rather I got error message on the console. Below is the Error message:

Performing hot restart... Syncing files to device Android SDK built for x86... Restarted application in 5,558ms.

I/flutter (15333): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (15333): The following assertion was thrown during performLayout():
I/flutter (15333): RenderIndexedStack object was given an infinite size during layout.
I/flutter (15333): This probably means that it is a render object that tries to be as big as possible, but it was put
I/flutter (15333): inside another render object that allows its children to pick their own size.
I/flutter (15333): The nearest ancestor providing an unbounded width constraint is:
I/flutter (15333):   RenderFlex#9b57d relayoutBoundary=up7 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (15333):   creator: Row ← Padding ← Container ← DefaultTextStyle ← Stack ← Listener ← _GestureSemantics ←
I/flutter (15333):   RawGestureDetector ← GestureDetector ← Semantics ← DropdownButton<int> ← Center ← ⋯
I/flutter (15333):   parentData: offset=Offset(0.0, 0.0) (can use size)
I/flutter (15333):   constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=683.4)
I/flutter (15333):   size: MISSING
I/flutter (15333):   direction: horizontal
I/flutter (15333):   mainAxisAlignment: spaceBetween
I/flutter (15333):   mainAxisSize: min
I/flutter (15333):   crossAxisAlignment: center
I/flutter (15333):   textDirection: ltr
I/flutter (15333):   verticalDirection: down
I/flutter (15333): The constraints that applied to the RenderIndexedStack were:
I/flutter (15333):   BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=683.4)
I/flutter (15333): The exact size it was given was:
I/flutter (15333):   Size(Infinity, 683.4)
I/flutter (15333): See https://flutter.io/layout/ for more information.
I/flutter (15333): 
I/flutter (15333): When the exception was thrown, this was the stack:
I/flutter (15333): #0      RenderBox.debugAssertDoesMeetConstraints.<anonymous closure> (package:flutter/src/rendering/box.dart:1749:9)
I/flutter (15333): #1      RenderBox.debugAssertDoesMeetConstraints (package:flutter/src/rendering/box.dart:1823:6)
I/flutter (15333): #2      RenderBox.size=.<anonymous closure> (package:flutter/src/rendering/box.dart:1543:17)
I/flutter (15333): #3      RenderBox.size= (package:flutter/src/rendering/box.dart:1543:65)
I/flutter (15333): #4      RenderStack.performLayout (package:flutter/src/rendering/stack.dart:480:7)
I/flutter (15333): #5      RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #6      RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:738:15)
I/flutter (15333): #7      RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #8      RenderPadding.performLayout (package:flutter/src/rendering/shifted_box.dart:199:11)
I/flutter (15333): #9      RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #10     RenderStack.performLayout (package:flutter/src/rendering/stack.dart:510:15)
I/flutter (15333): #11     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #12     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (15333): #13     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #14     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (15333): #15     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #16     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (15333): #17     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #18     RenderPositionedBox.performLayout (package:flutter/src/rendering/shifted_box.dart:385:13)
I/flutter (15333): #19     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #20     MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:142:11)
I/flutter (15333): #21     _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:339:7)
I/flutter (15333): #22     MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:212:7)
I/flutter (15333): #23     RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:356:14)
I/flutter (15333): #24     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #25     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (15333): #26     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #27     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (15333): #28     _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1188:11)
I/flutter (15333): #29     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #30     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (15333): #31     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #32     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (15333): #33     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #34     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (15333): #35     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #36     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (15333): #37     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #38     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (15333): #39     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #40     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (15333): #41     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #42     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (15333): #43     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #44     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (15333): #45     RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:2881:13)
I/flutter (15333): #46     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #47     RenderStack.performLayout (package:flutter/src/rendering/stack.dart:510:15)
I/flutter (15333): #48     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #49     __RenderTheatre&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (15333): #50     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #51     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (15333): #52     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #53     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (15333): #54     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #55     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (15333): #56     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #57     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (15333): #58     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #59     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (15333): #60     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (15333): #61     RenderView.performLayout (package:flutter/src/rendering/view.dart:147:13)
I/flutter (15333): #62     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1509:7)
I/flutter (15333): #63     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:768:18)
I/flutter (15333): #64     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:281:19)
I/flutter (15333): #65     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:677:13)
I/flutter (15333): #66     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:219:5)
I/flutter (15333): #67     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15)
I/flutter (15333): #68     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9)
I/flutter (15333): #69     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:751:7)
I/flutter (15333): #71     _Timer._runTimers (dart:isolate/runtime/libtimer_impl.dart:382:19)
I/flutter (15333): #72     _Timer._handleMessage (dart:isolate/runtime/libtimer_impl.dart:416:5)
I/flutter (15333): #73     _RawReceivePortImpl._handleMessage (dart:isolate/runtime/libisolate_patch.dart:171:12)
I/flutter (15333): (elided one frame from package dart:async)
I/flutter (15333): 
I/flutter (15333): The following RenderObject was being processed when the exception was fired:
I/flutter (15333):   RenderIndexedStack#d77d9 relayoutBoundary=up8 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (15333):   creator: IndexedStack ← Row ← Padding ← Container ← DefaultTextStyle ← Stack ← Listener ←
I/flutter (15333):   _GestureSemantics ← RawGestureDetector ← GestureDetector ← Semantics ← DropdownButton<int> ← ⋯
I/flutter (15333):   parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
I/flutter (15333):   constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=683.4)
I/flutter (15333):   size: Size(Infinity, 683.4)
I/flutter (15333):   alignment: AlignmentDirectional.centerStart
I/flutter (15333):   textDirection: ltr
I/flutter (15333):   fit: loose
I/flutter (15333):   overflow: clip
I/flutter (15333):   index: null
I/flutter (15333): This RenderObject has no descendants.
I/flutter (15333): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter (15333): Another exception was thrown: A RenderFlex overflowed by Infinity pixels on the right.

Answer 1

set isExpanded: true. And give its Container a proper height (e.g. 48), or set isDense: true or do not pass a null onChanged event or a null list of items, but if you want to disable the widget for any reason (user have not to click on it) I guess that setting the former conditions allow to do all you want.

class _testState extends State<test> {
//gender
  List<DropdownMenuItem<int>> genderList = [];
  void genderLoad() {
    genderList.clear();
    genderList.add(new DropdownMenuItem(
      child: new Text("Male"),
      value: 1,
    ));
    genderList.add(new DropdownMenuItem(
      child: new Text("Female"),
      value: 2,
    ));
  }
//end of gender

  @override
  Widget build(BuildContext context) {
    genderLoad();
    return Scaffold(
        appBar: AppBar(
          // Here we take the value from the MyHomePage object that was created by
          // the App.build method, and use it to set our appbar title.
          title: Text('hello'),
        ),
        body: Container(
          height: 48,
            color: Colors.lightGreenAccent,
            child: DropdownButton(
                isDense: false,
                isExpanded: true,
                items: genderList,
                onChanged: (selected){
                  print(selected);
                })));
  }
}

There is this open issue that makes DropDownButton widget not rendering when you pass empty values on required fields.

So that all these:

• DropdownButton(items: [], onChanged: (int) {})
• DropdownButton(items: genderList, onChanged: null)
• DropdownButton(items: [], onChanged: null)

Have problems. A workaround is the one shown in this post.

return Scaffold(
  body: new Container(
    width: 48,
    child: new Center(
      child: new DropdownButton (
          isExpanded: true,
          items: [],
          onChanged: null
      ),
    ),
  ),
);