userName
userName

Reputation: 945

Error with ListView output: RenderBox was not laid out

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

Upvotes: 0

Views: 51

Answers (2)

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63614

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) {});
        },
      ),
    )
  ],
),

Upvotes: 1

DiyorbekDev
DiyorbekDev

Reputation: 774

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

Upvotes: 0

Related Questions