Flutter: error with EXPANDED although already wrapped with COLUMN

Viewed 2816

I just wanted to create some text labels based on a list and output them in an expandable column's cell. Ok, today I have learned that I need to put EXPANDED ahead and additionally that EXPANDED needs to be wrapped by FLEX, ROW, or COLUMN.

But I keep getting an error that

 The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a
RenderObject, which has been set up to accept ParentData of incompatible type BoxParentData.
Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically,
Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside an Align widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
  _ScrollSemantics-[GlobalKey#05460] ← Scrollable ← PrimaryScrollController ← SingleChildScrollView
← Expanded ← Align ← Padding ← DecoratedBox ← Padding ← Container ← ⋯
child: Column(
  children: <Widget>[
    CupertinoButton(
      child: Text('expand', style: TextStyle(color: CupertinoColors.activeBlue)),
      onPressed: () {
        setState(() {
          step1Expanded = !step1Expanded;
        );
      },
    ), //Button
    Container(
      child: Column(
        children: <Widget>[
          Expanded(
            flex: 1,
            child: (step1Expanded)? step1RowWidget(taskPrmtrs) : Container()
          ),
        ] //Widget
      ),
    ), //Container
  ],
),

Widget step1RowWidget(List<Parameter> parameters)  {
  TextEditingController name;
   Row(
      children: <Widget>[
        Text("Hallo"),
        Column(
          children: <Widget>[
              for (var parameter in parameters) Text(parameter.descr)
            ],
          ),
        Column(
          children: <Widget>[
            for (var parameter in parameters) Text(parameter.descr)
//            for (var parameter in parameters) _createTextField()
          ],
        ),
  ],
  );
}

Widget _createTextField() {
  TextEditingController name;
  CupertinoTextField(
    controller: name,
    decoration: BoxDecoration(
      ),
    placeholder: "Wert",
    );
}

The error happens slightly above the middle of the snippet in the line with expanded. What else can be the issue?

UPDATE: With adding 2 EXPANDED lines I fixed the issue (based on the answers below). I also needed the upper EXPANDED(CONTAINER( to fix it. However, when the screen opens, the 2nd outer CONTAINER of the outer most COLUMN now fills the screen to the bottom (the one wrapping the column of button and inner, dynamic column). Expected behavior: The parent CONTAINER to the CUPERTINOBUTTON shall wrap tightly around the BUTTON (based on margin/padding) and it shall not create empty space down to the bottom of the screen. This seems to be caused by the EXPANDED, I guess

  navigationBar: CupertinoNavigationBar(
      middle: Text('Header'),
    ),
    child: SafeArea(
      child: Column(
        children: <Widget>[
          Container(
            alignment: Alignment.center,
            margin: new EdgeInsets.all(10.0),
            padding: new EdgeInsets.all(10.0),
            child: new Expanded(
              flex: 1,
              child: new SingleChildScrollView(
                scrollDirection: Axis.vertical,//.horizontal
                child: Text(fillParamGeneric(taskText, taskPrmtrs)),
              ),
            ),
          ),
          Expanded ( // ADDED according to answers here
            child: Container( // ADDED "child:"
              alignment: Alignment.center,
              margin: new EdgeInsets.all(10.0),
              padding: new EdgeInsets.all(10.0),
              child: Column(
                children: <Widget>[
                  CupertinoButton(
                    child: Text('expand', style: TextStyle(color: CupertinoColors.activeBlue)),
                    onPressed: () {
                      setState(() {
                        step1Expanded = !step1Expanded;
                      });
                    },
                  ),
                  Expanded( // ADDED according to answers here
                    child: Column(
                        children: <Widget>[
                          (step1Expanded)? step1RowWidget(taskPrmtrs) : Container(width: 0.0, height: 0.0)
                        ]
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    ),
  );
}
2 Answers

What you can do is just take the Container widget off and instead use an Expanded widget. This way, it will take any remaining space from the outer Column. The Column widget does not impose any constraints on its children, so since you did not give the Container any size or constraints, then it will by default try to be as big as it possibly can.

The issue is that you have a column inside your column.

And as columns take infinite height. It throws an over flow error.

What you can do is wrap the column inside the container with an Expanded.

Related