Wrap multiple Chip create an overflow - Flutter

Question

In way to create the profil page on my app, I have this sample of code :

return Container(
          height: 30.h,
          child: Row(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const ProfilPic(),
                SizedBox(
                  width: 5.w,
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      data['pseudo'],
                      style: Theme.of(context).textTheme.titleMedium,
                    ),
                    Text(
                      'Membre depuis : $userCreationDateFormatted',
                      style: Theme.of(context).textTheme.headlineLarge,
                    ),
                    data['role'] == 'admin'
                        ? const Text(
                            'Administrateur',
                          )
                        : Container(),
                    SizedBox(
                      height: 2.h,
                    ),
                    Wrap(children: [
                      Chip(
                        label: Text(
                          '#${data['fav_genre']}',
                          overflow: TextOverflow.ellipsis,
                          style: Theme.of(context).textTheme.bodyLarge,
                        ),
                      ),
                      Chip(
                        label: Text(
                          '#${data['pref']}',
                          overflow: TextOverflow.ellipsis,
                          style: Theme.of(context).textTheme.bodyLarge,
                        ),
                      ),
                      Chip(
                        label: Text(
                          '#${data['top_']}',
                          overflow: TextOverflow.ellipsis,
                          style: Theme.of(context).textTheme.bodyLarge,
                        ),
                      ),
                      Chip(
                        label: Text(
                          data['top_anime'],
                          overflow: TextOverflow.ellipsis,
                          style: Theme.of(context).textTheme.bodyLarge,
                        ),
                      ),
                    ]),
                  ],
                )
              ]));

The problem is that I have an overflow, even with the 'Wrap' widget.

I think there is something wrong with the main Container because when I try my code in another part of my app, it work fine. But I can't figure out why. I even try to wrap the 'Wrap' with a 'SingleChildScrollView' but it does not work.

Answer 1

The problem is that you have a Row widget, and inside a Column that holds (among other widgets) the Wrap widget. This way the row does not know how many space to allocate to your Column widget.

Once you solve this, Wrap will do it's job to make the chips go to multiple lines.

You need the wrap your Column into an Expanded widget. This tells the framework that after profile picture and the spacer SizedBox is added to the Row, the rest of the available place should be occupied by your Column:

children: [
  const ProfilPic(),
  SizedBox(width: 5.w),
  Expanded(child: Column(...)),
],

(Note: there is another problem with your current layout: you are giving the Container a fixed height. This way if the contents don't fit you will have another bottom overflow problem.)