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

user_8251973 0
Viewed 7533

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.

Image on the app showing error

dart flutter android
2 Answers

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);
                })));
  }
}

enter image description here

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
      ),
    ),
  ),
);

enter image description here

user_46779510

Your problem is that you passed null for onChanged property of DropdownButton where it's required parameter. That way DropdownButton fails it's inner assertions and is unable to draw properly. Unfortunately Flutter does not catch this issue during compilation.

Try this:

  @override
  Widget build(BuildContext context) {
    genderLoad();
    return Scaffold(
      body: new Container(
        child: new Center(
          child: new DropdownButton(
            items: genderList,
            onChanged: onDropdownChanged,
          ),
        ),
      ),
    );
  }

  void onDropdownChanged(value) {
     //TODO
  }
user_56594920
Related