Home > Back-end >  Error with ListView output: RenderBox was not laid out
Error with ListView output: RenderBox was not laid out

Time:06-11

RenderBox was not laid out error when rendering DropDownMenu and ListView. Also writes: Vertical viewport was given unbounded height. How can these errors be fixed?

BlocConsumer<StudentBloc, StudentState>(
  listener: _listener,
  builder: (context, state) {
    return Column(
      children: [
        DropdownButton<Group>(
          value: _group,
          icon: const Icon(Icons.arrow_downward),
          elevation: 16,
          onChanged: _changeDropdownMenuState,
          items: _groupsList.map<DropdownMenuItem<Group>>(
            (Group value) {
              return DropdownMenuItem<Group>(
                value: value,
                child: Text(value.groupName ?? ''),
              );
            },
          ).toList(),
        ),
        ListView.builder(
          itemCount: _lessonsList.length,
          itemBuilder: (BuildContext context, int index) {
            final lesson = _lessonsList[index];
            bool? checkboxValue = _checkboxValues[index];
            return CheckboxListTile(
              title: Text(lesson.lessonName ?? ''),
              controlAffinity: ListTileControlAffinity.leading,
              contentPadding: EdgeInsets.zero,
              value: checkboxValue,
              onChanged: (bool? value) =>
                  _changeCheckboxState(value, index, lesson),
            );
          },
        ),
      ],
    );
  },
)

CodePudding user response:

BlocConsumer<StudentBloc, StudentState>(
  listener: _listener,
  builder: (context, state) {
    return ListView(
      children: [
        DropdownButton<Group>(
          value: _group,
          icon: const Icon(Icons.arrow_downward),
          elevation: 16,
          onChanged: _changeDropdownMenuState,
          items: _groupsList.map<DropdownMenuItem<Group>>(
            (Group value) {
              return DropdownMenuItem<Group>(
                value: value,
                child: Text(value.groupName ?? ''),
              );
            },
          ).toList(),
        ),
        ListView.builder(
          shrinkWrap: true,
          physics:const NeverScrollableScrollPhysics(),
          itemCount: _lessonsList.length,
          itemBuilder: (BuildContext context, int index) {
            final lesson = _lessonsList[index];
            bool? checkboxValue = _checkboxValues[index];
            return CheckboxListTile(
              title: Text(lesson.lessonName ?? ''),
              controlAffinity: ListTileControlAffinity.leading,
              contentPadding: EdgeInsets.zero,
              value: checkboxValue,
              onChanged: (bool? value) =>
                  _changeCheckboxState(value, index, lesson),
            );
          },
        ),
      ],
    );
  },
);

CodePudding user response:

Wrapping istView.builder with Expanded solves the render issue.

Column(
  children: [
    DropdownButton(...),
    Expanded(
      child: ListView.builder(
        itemBuilder: (context, index) {
          return CheckboxListTile(value: true, onChanged: (v) {});
        },
      ),
    )
  ],
),
  • Related