Unexpected error when entering/exiting from a page

[martinogarrizzo5]

Current Behavior

It looks like that enabling Android predictive back feature causes some strange error when using the component in .overlay version. I receive this error in console:

════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building MultipleSearchSelection<Commission>-[<958925654>](dirty, state: _MultipleSearchSelectionState<Commission>#b9248):
RenderBox was not laid out: RenderTransform#26dcd NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 2251 pos 12: 'hasSize'

Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=02_bug.yml

The relevant error-causing widget was:
    MultipleSearchSelection<Commission>-[<958925654>] MultipleSearchSelection:file:///Users/martin/Desktop/mobile-apps/some-app/lib/widgets/multi_search_field.dart:43:12

When the exception was thrown, this was the stack:
#2      RenderBox.size (package:flutter/src/rendering/box.dart:2251:12)
box.dart:2251
#3      RenderTransform._effectiveTransform (package:flutter/src/rendering/proxy_box.dart:2632:49)
proxy_box.dart:2632
#4      RenderTransform.applyPaintTransform (package:flutter/src/rendering/proxy_box.dart:2715:24)
proxy_box.dart:2715
#5      RenderObject.getTransformTo (package:flutter/src/rendering/object.dart:3586:25)
object.dart:3586
#6      RenderBox.localToGlobal (package:flutter/src/rendering/box.dart:3091:39)
box.dart:3091
#7      _MultipleSearchSelectionState._overlayedShowedItems (package:multiple_search_selection/multiple_search_selection.dart:951:33)
multiple_search_selection.dart:951
#8      _MultipleSearchSelectionState.build (package:multiple_search_selection/multiple_search_selection.dart:1603:15)
multiple_search_selection.dart:1603
#9      StatefulElement.build (package:flutter/src/widgets/framework.dart:5934:27)
framework.dart:5934

Looking at the source code at line 948 of multiple_search_selection.dart It looks like that it cannot calculate correctly the size of the box:

  Widget _overlayedShowedItems() {
    final renderBox =
        _searchFieldKey.currentContext?.findRenderObject() as RenderBox?;
    final position = renderBox?.localToGlobal(Offset.zero);
    final size = renderBox?.size;

This is the widget I built in my app:

class MultiSearchField<T> extends StatelessWidget {
  final List<T> items;
  final List<T>? initialPickedItems;
  final Widget Function(T) getItemLabel;
  final Widget Function(T) getPickedItemLabel;
  final String Function(T) fieldToCheck;
  final String placeholder;
  final IconData? suffixIcon;
  final MultipleSearchController<T>? controller;
  final int? maxSelectedItems;
  final String? error;
  final void Function(List<T>)? onPickedChange;
  final T Function(String)? onCreateOption;

  const MultiSearchField({
    super.key,
    required this.items,
    required this.getItemLabel,
    required this.getPickedItemLabel,
    required this.fieldToCheck,
    this.onCreateOption,
    this.initialPickedItems,
    this.placeholder = "Search",
    this.suffixIcon,
    this.controller,
    this.maxSelectedItems,
    this.error,
    this.onPickedChange,
  });

  @override
  Widget build(BuildContext context) {
    final customStyles = Theme.of(context).extension<CustomStyles>()!;
    final l10n = S.of(context)!;

    return MultipleSearchSelection<T>.overlay(
      controller: controller,
      itemsVisibility: ShowedItemsVisibility.onType,
      maximumShowItemsHeight: 200,
      clearSearchFieldOnSelect: true,
      placePickedItemContainerBelow: true,
      items: items,
      initialPickedItems: initialPickedItems,
      showClearAllButton: false,
      showSelectAllButton: false,
      noResultsWidget: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(6),
            color: Colors.white,
          ),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(l10n.noResults),
          ),
        ),
      ),
      onPickedChange: (items) {
        if (onPickedChange != null) {
          onPickedChange!(items);
        }
      },
      overlayOptions: OverlayOptions(
        closeOnItemSelected: false,
        createOptions: onCreateOption != null
            ? CreateOptions<T>(
                create: onCreateOption!,
                createBuilder: (text) => Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(6),
                      color: Colors.white,
                    ),
                    child: Padding(
                      padding: const EdgeInsets.symmetric(
                        vertical: 16.0,
                        horizontal: 12,
                      ),
                      child: Text("${l10n.outOfList}: $text"),
                    ),
                  ),
                ),
                pickCreated: true,
              )
            : null,
      ),
      showedItemsBoxDecoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(6),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 4,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      pickedItemsBoxDecoration: const BoxDecoration(),
      pickedItemsContainerMaxHeight: 1000,
      maxSelectedItems: maxSelectedItems,
      searchField: TextField(
        decoration: InputDecoration(
          labelText: placeholder,
          suffixIcon: suffixIcon != null
              ? IconButton(
                  onPressed: null,
                  color: Theme.of(context).colorScheme.secondary,
                  disabledColor: Theme.of(context).colorScheme.secondary,
                  padding: const EdgeInsets.symmetric(horizontal: 24),
                  icon: Icon(suffixIcon, size: 28),
                )
              : null,
          errorText: error,
          errorBorder: error != null
              ? Theme.of(context).inputDecorationTheme.border!.copyWith(
                  borderSide: BorderSide(
                    color: Theme.of(context).colorScheme.error,
                  ),
                )
              : null,
        ),
      ),
      fieldToCheck: fieldToCheck,
      itemBuilder: (item, index, isPicked) {
        return Padding(
          padding: const EdgeInsets.fromLTRB(6, 6, 6, 0),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(6),
              color: Colors.white,
            ),
            child: Padding(
              padding: const EdgeInsets.symmetric(
                vertical: 16.0,
                horizontal: 12,
              ),
              child: getItemLabel(item),
            ),
          ),
        );
      },
      pickedItemBuilder: (item) {
        return Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(6),
            color: customStyles.colors.primary,
            border: Border.all(color: customStyles.colors.inputBackground),
          ),
          child: Padding(
            padding: const EdgeInsets.all(6),
            child: getPickedItemLabel(item),
          ),
        );
      },
    );
  }
}

Expected behavior/code

I would expect to don't receive this kind of error. Disabling predictive back turned everything to work again. Can you help me about this?

Environment

• macOS Tahoe and Pixel 7A phone as debug device
• Doctor summary (to see all details, run flutter doctor -v):
  [✓] Flutter (Channel stable, 3.38.3, on macOS 26.2 25C56 darwin-arm64, locale it-IT)
  [!] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
  ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
  [✓] Xcode - develop for iOS and macOS (Xcode 26.1)
  [✓] Chrome - develop for the web
  [✓] Connected device (3 available)
  [✓] Network resources

[esentis]

Hello there friend and thanks for taking the time to fill the issue !
I'll try to reproduce the issue and get back at you asap.

[esentis]

@martinogarrizzo5 I find hard time reproducing the issue. Can you provide a single file minimal reproducible code ? It will help a lot the debugging.

[martinogarrizzo5]

Hi tried myself creating a blank project with the routing, predictive back and the plugin component but all worked. I will need to inspect better to understand why it's working there and not in my project.
Thanks for the help but for the moment I don't know what to share to you to better understand what's happening