flutterlistview

Flutter render overflow ListView Builder


I am getting what I think is a render overflow issue using a ListView builder. I am sure that the ListView is the issue. I have looked into wrapping the ListView in an Expaneded widget because it might solve the issue, but I can not get that to work. Here is a snipped of the code:

@override
Widget build(BuildContext context) {
  debugPrint('Exercises in build: $exercises');
  
  return AlertDialog(
    title: const Text('Add Exercise'),
    content: exercises == null
        ? const Center(child: CircularProgressIndicator())
        : exercises!.isEmpty
            ? const Center(child: Text('No exercises found.'))
            : Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  TextField(
                    controller: widget.controller,
                    decoration: const InputDecoration(labelText: 'Search Exercise'),
                    onChanged: (value) {
                      searchText.value = value;
                    },
                  ),
                  const SizedBox(height: 16),
                  Flexible(
                    child: ValueListenableBuilder<String>(
                      valueListenable: searchText,
                      builder: (context, value, child) {
                        final filteredExercises = exercises!
                            .where((exercise) =>
                                exercise.name.toLowerCase().contains(value.toLowerCase()))
                            .toList();
                        return ListView.builder(
                          shrinkWrap: true, // Ensures proper sizing
                          itemCount: filteredExercises.length,
                          itemBuilder: (context, index) {
                            return ListTile(
                              title: Text(filteredExercises[index].name),
                              onTap: () {
                                widget.controller.text = filteredExercises[index].name;
                                Navigator.of(context).pop();
                                widget.onAdd(filteredExercises[index]);
                              },
                            );
                          },
                        );
                      },
                    ),
                  ),
                ],
              ),
    actions: [
      TextButton(
        onPressed: () {
          Navigator.of(context).pop();
          widget.controller.clear();
        },
        child: const Text('Cancel'),
      ),
    ],
  );

Here is the error I am getting:

The following RenderObject was being processed when the exception was fired: RenderIntrinsicWidth#85b9c relayoutBoundary=up6 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    parentData: <none> (can use size)
    constraints: BoxConstraints(280.0<=w<=312.7, 0.0<=h<=702.2)
    size: Size(280.0, 702.2)
    stepWidth: null
    stepHeight: null
    child: RenderFlex#3ede5 relayoutBoundary=up7 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
        parentData: <none> (can use size)
        constraints: BoxConstraints(w=280.0, 0.0<=h<=702.2)
        size: Size(280.0, 702.2)
        direction: vertical
        mainAxisAlignment: start
        mainAxisSize: min
        crossAxisAlignment: stretch
        verticalDirection: down
        child 1: RenderPadding#88821 relayoutBoundary=up8 NEEDS-PAINT
            parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
            constraints: BoxConstraints(w=280.0, 0.0<=h<=Infinity)
            size: Size(280.0, 56.0)
            padding: EdgeInsets(24.0, 24.0, 24.0, 0.0)
            textDirection: ltr
            child: RenderSemanticsAnnotations#9ccfb relayoutBoundary=up9 NEEDS-PAINT
                parentData: offset=Offset(24.0, 24.0) (can use size)
                constraints: BoxConstraints(w=232.0, 0.0<=h<=Infinity)
                semantic boundary
                size: Size(232.0, 32.0)
                child: RenderParagraph#73c17 relayoutBoundary=up10 NEEDS-PAINT
                    parentData: <none> (can use size)
                    constraints: BoxConstraints(w=232.0, 0.0<=h<=Infinity)
                    size: Size(232.0, 32.0)
                    textAlign: start
                    textDirection: ltr
                    softWrap: wrapping at box width
                    overflow: clip
                    locale: en_US
                    maxLines: unlimited
        child 2: RenderPadding#cdc90 relayoutBoundary=up8 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
            parentData: offset=Offset(0.0, 56.0); flex=1; fit=FlexFit.loose (can use size)
            constraints: BoxConstraints(w=280.0, 0.0<=h<=574.2)
            size: Size(280.0, 574.2)
            padding: EdgeInsets(24.0, 16.0, 24.0, 24.0)
            textDirection: ltr
            child: RenderSemanticsAnnotations#b5239 relayoutBoundary=up9 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
                parentData: offset=Offset(24.0, 16.0) (can use size)
                constraints: BoxConstraints(w=232.0, 0.0<=h<=534.2)
                semantic boundary
                size: Size(232.0, 534.2)
                child: RenderClipRect#5e573 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
                    parentData: <none>
                    constraints: MISSING
                    size: MISSING
        child 3: RenderPadding#390e9 relayoutBoundary=up8 NEEDS-PAINT
            parentData: offset=Offset(0.0, 630.2); flex=null; fit=null (can use size)
            constraints: BoxConstraints(w=280.0, 0.0<=h<=Infinity)
            size: Size(280.0, 72.0)
            padding: EdgeInsets(24.0, 0.0, 24.0, 24.0)
            textDirection: ltr
            child: _RenderOverflowBar#9e616 relayoutBoundary=up9 NEEDS-PAINT
                parentData: offset=Offset(24.0, 0.0) (can use size)
                constraints: BoxConstraints(w=232.0, 0.0<=h<=Infinity)
                size: Size(232.0, 48.0)
                spacing: 8.0
                overflowAlignment: end
                textDirection: ltr
                child 1: RenderSemanticsAnnotations#563d4 relayoutBoundary=up10 NEEDS-PAINT
                    parentData: offset=Offset(157.3, 0.0) (can use size)
                    constraints: BoxConstraints(0.0<=w<=232.0, 0.0<=h<=Infinity)
                    semantic boundary
                    size: Size(74.7, 48.0)
RenderObject: RenderIntrinsicWidth#85b9c relayoutBoundary=up6 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    parentData: <none> (can use size)
    constraints: BoxConstraints(280.0<=w<=312.7, 0.0<=h<=702.2)
    size: Size(280.0, 702.2)
    stepWidth: null
    stepHeight: null
    child: RenderFlex#3ede5 relayoutBoundary=up7 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
        parentData: <none> (can use size)
        constraints: BoxConstraints(w=280.0, 0.0<=h<=702.2)
        size: Size(280.0, 702.2)
        direction: vertical
        mainAxisAlignment: start
        mainAxisSize: min
        crossAxisAlignment: stretch
        verticalDirection: down
        child 1: RenderPadding#88821 relayoutBoundary=up8 NEEDS-PAINT
            parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
            constraints: BoxConstraints(w=280.0, 0.0<=h<=Infinity)
            size: Size(280.0, 56.0)
            padding: EdgeInsets(24.0, 24.0, 24.0, 0.0)
            textDirection: ltr
            child: RenderSemanticsAnnotations#9ccfb relayoutBoundary=up9 NEEDS-PAINT
                parentData: offset=Offset(24.0, 24.0) (can use size)
                constraints: BoxConstraints(w=232.0, 0.0<=h<=Infinity)
                semantic boundary
                size: Size(232.0, 32.0)
                child: RenderParagraph#73c17 relayoutBoundary=up10 NEEDS-PAINT
                    parentData: <none> (can use size)
                    constraints: BoxConstraints(w=232.0, 0.0<=h<=Infinity)
                    size: Size(232.0, 32.0)
                    textAlign: start
                    textDirection: ltr
                    softWrap: wrapping at box width
                    overflow: clip
                    locale: en_US
                    maxLines: unlimited
        child 2: RenderPadding#cdc90 relayoutBoundary=up8 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
            parentData: offset=Offset(0.0, 56.0); flex=1; fit=FlexFit.loose (can use size)
            constraints: BoxConstraints(w=280.0, 0.0<=h<=574.2)
            size: Size(280.0, 574.2)
            padding: EdgeInsets(24.0, 16.0, 24.0, 24.0)
            textDirection: ltr
            child: RenderSemanticsAnnotations#b5239 relayoutBoundary=up9 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
                parentData: offset=Offset(24.0, 16.0) (can use size)
                constraints: BoxConstraints(w=232.0, 0.0<=h<=534.2)
                semantic boundary
                size: Size(232.0, 534.2)
                child: RenderClipRect#5e573 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
                    parentData: <none>
                    constraints: MISSING
                    size: MISSING
        child 3: RenderPadding#390e9 relayoutBoundary=up8 NEEDS-PAINT
            parentData: offset=Offset(0.0, 630.2); flex=null; fit=null (can use size)
            constraints: BoxConstraints(w=280.0, 0.0<=h<=Infinity)
            size: Size(280.0, 72.0)
            padding: EdgeInsets(24.0, 0.0, 24.0, 24.0)
            textDirection: ltr
            child: _RenderOverflowBar#9e616 relayoutBoundary=up9 NEEDS-PAINT
                parentData: offset=Offset(24.0, 0.0) (can use size)
                constraints: BoxConstraints(w=232.0, 0.0<=h<=Infinity)
                size: Size(232.0, 48.0)
                spacing: 8.0
                overflowAlignment: end
                textDirection: ltr
                child 1: RenderSemanticsAnnotations#563d4 relayoutBoundary=up10 NEEDS-PAINT
                    parentData: offset=Offset(157.3, 0.0) (can use size)
                    constraints: BoxConstraints(0.0<=w<=232.0, 0.0<=h<=Infinity)
                    semantic boundary
                    size: Size(74.7, 48.0)

════════════════════════════════════════════════════════════════════════════════


Solution

  • ListView.builder set in Container

    @override
    Widget build(BuildContext context) {
      debugPrint('Exercises in build: $exercises');
    
      return AlertDialog(
        title: const Text('Add Exercise'),
        content: exercises == null
            ? const Center(child: CircularProgressIndicator())
            : exercises!.isEmpty
            ? const Center(child: Text('No exercises found.'))
            : Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(
              controller: widget.controller,
              decoration: const InputDecoration(labelText: 'Search Exercise'),
              onChanged: (value) {
                searchText.value = value;
              },
            ),
            const SizedBox(height: 16),
            Flexible(
              child: ValueListenableBuilder<String>(
                valueListenable: searchText,
                builder: (context, value, child) {
                  final filteredExercises = exercises!
                      .where((exercise) =>
                      exercise.name.toLowerCase().contains(value.toLowerCase()))
                      .toList();
                  return Container(width: 280,height: 500,
                    child: ListView.builder(
                      shrinkWrap: true, // Ensures proper sizing
                      itemCount: filteredExercises.length,
                      itemBuilder: (context, index) {
                        return ListTile(
                          title: Text(filteredExercises[index].name),
                          onTap: () {
                            widget.controller.text = filteredExercises[index].name;
                            Navigator.of(context).pop();
                            widget.onAdd(filteredExercises[index]);
                          },
                        );
                      },
                    ),
                  );
                },
              ),
            ),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(context).pop();
              widget.controller.clear();
            },
            child: const Text('Cancel'),
          ),
        ],
      );