Wrapper leave extra space for conditionally hidden elements

[tannakartikey]

Please thumbs up this issue if you have also experienced it. You may also add more information if there is something relevant that was not mentioned. However, please refrain from comments that are not constructive, like "I have this problem too", etc.

Expected behavior (required)

When some elements are rendered are dynamically using the Wrapper widget, if an element is conditionally hidden, the spacing for that element should not be rendered.

Current behavior (required)

Let's say I am rendering 5 elements with spacing between each of them set to 10. Out of 5 elements 2nd and 3rd are not rendered because of the conditional visibility setting. In this case the spacing between 1st and 4th element will be 30 instead of 10.

To Reproduce (required)

1. Create a new page
2. Add Wrapper widget
3. Add an element with a small width. Let's say an image or a button 30px wide
4. Render 6-7 elements with noticeable spacing, let's say 25px
5. Hide an element or multiple elements using conditional visibility. Just set "false" value to condition
6. Observe the empty spacing left for the element even though they are hidden.

Bug Report Code (required, generate from Widget Tree)

Expanded(
  child: Wrap(
    spacing: 25,
    runSpacing: 25,
    alignment: WrapAlignment.start,
    crossAxisAlignment: WrapCrossAlignment.start,
    direction: Axis.horizontal,
    runAlignment: WrapAlignment.start,
    verticalDirection: VerticalDirection.down,
    clipBehavior: Clip.none,
    children: [
      Image.network(
        'https://picsum.photos/seed/246/600',
        width: 50,
        height: 50,
        fit: BoxFit.cover,
      ),
      Visibility(
        visible: false,
        child: Image.network(
          'https://picsum.photos/seed/246/600',
          width: 50,
          height: 50,
          fit: BoxFit.cover,
        ),
      ),
      Visibility(
        visible: false,
        child: Image.network(
          'https://picsum.photos/seed/246/600',
          width: 50,
          height: 50,
          fit: BoxFit.cover,
        ),
      ),
      Image.network(
        'https://picsum.photos/seed/246/600',
        width: 50,
        height: 50,
        fit: BoxFit.cover,
      ),
      Image.network(
        'https://picsum.photos/seed/246/600',
        width: 50,
        height: 50,
        fit: BoxFit.cover,
      ),
      Image.network(
        'https://picsum.photos/seed/246/600',
        width: 50,
        height: 50,
        fit: BoxFit.cover,
      ),
      Image.network(
        'https://picsum.photos/seed/246/600',
        width: 50,
        height: 50,
        fit: BoxFit.cover,
      ),
      Image.network(
        'https://picsum.photos/seed/246/600',
        width: 50,
        height: 50,
        fit: BoxFit.cover,
      ),
      Image.network(
        'https://picsum.photos/seed/246/600',
        width: 50,
        height: 50,
        fit: BoxFit.cover,
      ),
      Image.network(
        'https://picsum.photos/seed/246/600',
        width: 50,
        height: 50,
        fit: BoxFit.cover,
      ),
      Image.network(
        'https://picsum.photos/seed/246/600',
        width: 50,
        height: 50,
        fit: BoxFit.cover,
      ),
      Image.network(
        'https://picsum.photos/seed/246/600',
        width: 50,
        height: 50,
        fit: BoxFit.cover,
      ),
      Image.network(
        'https://picsum.photos/seed/246/600',
        width: 50,
        height: 50,
        fit: BoxFit.cover,
      ),
      Image.network(
        'https://picsum.photos/seed/246/600',
        width: 50,
        height: 50,
        fit: BoxFit.cover,
      ),
      Image.network(
        'https://picsum.photos/seed/246/600',
        width: 50,
        height: 50,
        fit: BoxFit.cover,
      ),
      Image.network(
        'https://picsum.photos/seed/246/600',
        width: 50,
        height: 50,
        fit: BoxFit.cover,
      ),
      Image.network(
        'https://picsum.photos/seed/246/600',
        width: 50,
        height: 50,
        fit: BoxFit.cover,
      ),
      Image.network(
        'https://picsum.photos/seed/246/600',
        width: 50,
        height: 50,
        fit: BoxFit.cover,
      ),
      Image.network(
        'https://picsum.photos/seed/246/600',
        width: 50,
        height: 50,
        fit: BoxFit.cover,
      ),
      Image.network(
        'https://picsum.photos/seed/246/600',
        width: 50,
        height: 50,
        fit: BoxFit.cover,
      ),
    ],
  ),
)

Context (required)

Your environment

• Version of FlutterFlow used:
• Platform (e.g. Web, MacOS Desktop):
• Browser name and version:
• Operating system and version (desktop or mobile):

[hariprasadms]

Hi @tannakartikey - Thanks for posting this issue.

This issue is mostly related to wrapper widget spacing is not considered while using conditional display.
Mostly to do with UI of FF editor. Otherwise, wrapper widget functionality works fine in run mode in rendering images inside wrapper widget while using conditional display.

Below is the quick vide for developer debugging info.

wrapper_spacing_issue_459.mp4

[tannakartikey]

@hariprasadms I have faced in the issue in rendering as well and not just in the builder UI

Here is the screenshot from the Debug screen

Here you can see the components and the settings on the Wrap element (notice two elements are hidden with false constant)

[hariprasadms]

Hi @shelpert - Do we have any updates on this bug please.

[shelpert]

Hi,

This is unfortunately not a bug, but rather the way that the Wrapper widget works. In the code example above, the Visibility widgets are still children of the Wrapper, so even if the Visibility widget returns an empty container when its child should not be visible, the Wrapper will still put space between them.

The solution to this problem is to generate the children of the Wrapper dynamically from a list, and filter that list based on your condition. In general, it's best practice to generate children dynamically anyways when you have this many. Hope this helps!