shrinkWrap doesn't work in Column

[aaumond]

Hi @wwwdata, I find this package really useful and very interesting to have a nice animated app.

I'm trying to integrate it in my project by placing the ImplicitlyAnimatedList widget in a Column with the shrinkWrap boolean true. Even so, the child widgets take up all the available height. I don't understand why.

I tried removing the Flexible widget but it's the same. I would like to not constrain the size of the ImplicitlyAnimatedList widget but rather have it fit its content. Is this possible?

Here is the associated code:

Scaffold(
        body: Padding(
          padding: const EdgeInsets.symmetric(
            vertical: 30,
            horizontal: 10,
          ),
          child: StreamBuilder<List<DataObject>>(
            stream: DataProvider.listenObjects(),
            builder: (context, snapshot) => !snapshot.hasData
                ? const Center(
                    child: CircularProgressIndicator(),
                  )
                : Column(
                    children: [
                      Flexible(
                        child: ImplicitlyAnimatedList<DataObject>(
                          shrinkWrap: true,
                          primary: false,
                          scrollDirection: Axis.horizontal,
                          items: snapshot.data!,
                          areItemsTheSame: (a, b) => a == b,
                          insertDuration: const Duration(milliseconds: 700),
                          itemBuilder: (context, animation, item, index) =>
                              FadeTransition(
                            opacity: animation,
                            child: DataObjectWidget(dataObject: item),
                          ),
                          removeDuration: const Duration(milliseconds: 700),
                          removeItemBuilder: (context, animation, oldItem) =>
                              SizeFadeTransition(
                            axis: Axis.horizontal,
                            curve: Curves.easeOutSine,
                            animation: animation,
                            child: DataObjectWidget(dataObject: oldItem),
                          ),
                        ),
                      ),
                      // ... other widgets
                    ],
                  ),
          ),
        ),
      )

Thanks in advance for your help.

[wwwdata]

So you are using it for a horizontal scroll list, right? In that case, the same rules apply as for regular horizontal scroll lists in Flutter:

• You have to give the horizontal scroll list constraints from the outside
• This means you need to give the list a fixed height
• The elements can still have variable widths if necessary

This is because you are never rendering "all" elements of the list => the framework cannot know how high the highest element will be => you need to provide the height constraint from the outside.

So wrap your horizontal list with a SizedBox for example and a height.

You can only skip the height constraints for horizontal lists if you for example render a SingleChildScrollView and all items in a row because in that case, the framework has to render the whole list first and can then know the height of the highest item and correctly allocate the space.

Is your horizontal list going to be a very long one? If not, then just render the elements in a SingleChildScrollView, use a Row and render all the items in there. You could then wrap your widgets with an animated widget as well to animate them in/out when they are added/removed from your list.