Overflow within a Column when mapping out items, Flutter

Question

I keep getting overflow on the right by the mapped out widget and I can't seem to fix it. I tried the next options: ListView(), Wrap(), Expanded(), GridView().count and I think I'm running out of options. The problem:

Here is the edited code after @pmatatias answer:

Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Expanded(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(right: 16.0),
                    child: Container(
                      width: 100,
                      height: 100,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(2),
                        image: DecorationImage(
                          fit: BoxFit.fill,
                          image: NetworkImage(
                              'https://image.tmdb.org/t/p/w500$posterPath'),
                        ),
                      ),
                    ),
                  ),
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Padding(
                          padding: const EdgeInsets.only(bottom: 4.0),
                          child: Container(
                            width: 179.0,
                            child: Text(
                              title!,
                              style: TextStyle(
                                color: Color(0xFFE4ECEF),
                                fontSize: 15.0,
                                fontWeight: FontWeight.w600,
                                fontFamily: 'SF Pro Display',
                              ),
                            ),
                          ),
                        ),
                        Row(
                          children: [
                            Icon(
                              Icons.star,
                              color: Color(0xFFF2CF16),
                              size: 13.33,
                            ),
                            Padding(
                              padding: const EdgeInsets.only(left: 5.33),
                              child: Text(
                                '$voteAverage / 10 IMDb',
                                style: TextStyle(
                                  color: Color(0xFFE4ECEF),
                                  fontSize: 12.0,
                                  fontWeight: FontWeight.w400,
                                  fontFamily: 'SF Pro Display',
                                ),
                              ),
                            ),
                          ],
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 12.0),
                          child: getTextWidgets(genres!),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 21.0, right: 5.0),
              child: Container(
                height: 5.0,
                width: 5.0,
                child: Icon(
                  Icons.bookmark_border_outlined,
                  size: 18,
                  color: Color(0xFFE4ECEF),
                ),
              ),
            ),
          ],
        ),

/// getTextWidgets mapping:
Widget getTextWidgets(List<String?> strings) {
    return Wrap(
        direction: Axis.horizontal,
        children: strings
            .map((item) => Padding(
                  padding: const EdgeInsets.only(right: 4.0),
                  child: Container(
                    height: 21,
                    decoration: BoxDecoration(
                      color: Color.fromRGBO(236, 155, 62, 0.2),
                      borderRadius: BorderRadius.circular(4),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.fromLTRB(8, 4, 8, 4),
                      child: Text(
                        item!,
                        style: TextStyle(
                          color: Color(0xFFE4ECEF),
                          fontSize: 11.0,
                          fontWeight: FontWeight.w400,
                          fontFamily: 'SF Pro',
                        ),
                      ),
                    ),
                  ),
                ))
            .toList());
  }

I don't understand why it doesn't work with simple Wrap or GridView where I specify 3 per row in crossAxisCount sort of speak..

Any from of help is much appreciated. Thanks

Did you try `SingleChildScrollview` with `orientation: horizontal`? maybe it can help or you can try `Flexible` widget too. it should work !! — Rahul Pandey, Aug 24 '22 at 08:05
the code you provided doesn't reflect the same UI in the image. — HKN, Aug 24 '22 at 08:23

pmatatias · Answer 1 · 2022-08-24T09:48:18.783

1

since you have nested row and column, you have to expanded all children that need to expand.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween, 
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
          Expanded(    // First one
            child: Row(
            children: [
                Padding(),
                Expanded(   // second expanded
                   child: Column(
                       children: [
                            Padding()
                            Row(
                            children: [
                                 Expanded(   // Last expanded
                                    child: getTextWidgets(a),

you can see the demo here : https://dartpad.dev/?id=7787182fed870e512474ef4779de2271

result:

edited Aug 24 '22 at 09:48

answered Aug 24 '22 at 08:30

pmatatias

3,491
3
10
30

When I tried this I get this layout issue https://ibb.co/1Qy13fm – GrandMagus Aug 24 '22 at 08:39
there something wrong with your container genre,. it should not full width . see my example image – pmatatias Aug 24 '22 at 08:43
@pmatatias I think the width should be dynamic and not fixed – HKN Aug 24 '22 at 08:48
@HKN i defined width of column, not the genre, HOW COULD POSIBLE YOUR WIDGET SHOW OUTSIDE OF THE SCREEN ?? – pmatatias Aug 24 '22 at 08:51
i use `MediaQuery.of(context).size.width,` – pmatatias Aug 24 '22 at 08:51
@pmatatias I don't know, but it just flexes the containers of genres to match the container width and I don't understand why... – GrandMagus Aug 24 '22 at 09:02
@GrandMagus , you just update your snippet code, i just solve your issue, ill update my answer – pmatatias Aug 24 '22 at 09:38
@pmatatias while your solution is great, the last step has a problem https://ibb.co/v3B5CL9. But I figured it out but I'm not sure how to handle it. in the getTextWidgets(), the container width is not defined, and I need to be dynamic, make width of container only the size of the fitting text.. if I add the width to be, lets say 63, I get this, but some of the text might not fit in it https://ibb.co/HVL1s0F ... – GrandMagus Aug 24 '22 at 10:05
no need set size any more, its already dynamic – pmatatias Aug 24 '22 at 10:07
just click the link of demo, its same with your code. run in https://dartpad.dev/?id=7787182fed870e512474ef4779de2271 – pmatatias Aug 24 '22 at 10:08
@pmatatias I literally copy/pasted your code and if I set another Expanded() on the getTextWidgets(a) I get an error, without the Expanded I get this: https://ibb.co/v3B5CL9. If I add width to the container inside the gettextWidgets(a) I get this: https://ibb.co/HVL1s0F, which is what I wanted, just one smaller issue of not all the text fitting inside the container.. – GrandMagus Aug 24 '22 at 10:14
but in my demo, everyrhing work fine, can you please update your current code in your question? – pmatatias Aug 24 '22 at 10:21
@pmatatias Just did. – GrandMagus Aug 24 '22 at 10:39

score 0 · Answer 2 · answered Aug 24 '22 at 08:21

I have updated your widget function with ListView.builder that works with horizontal and if you want them not scrolled, you can set scrollphysics to neverscrollable.

Widget getTextWidgets(List<String> strings) {

return Expanded(
  child: ListView.builder(
    shrinkWrap: true,
    itemCount: strings.length,
    scrollDirection: Axis.horizontal,
    itemBuilder: (context, index) {
      return Container(
        height: 20,
        padding: const EdgeInsets.all(8),
        child: Text(strings[index]),
      );
    },
  ),
);

}

I have another layout issue after that, so this is not working. Thanks though — GrandMagus, Aug 24 '22 at 08:37

score -1 · Answer 3 · answered Aug 24 '22 at 08:44

-1

in your wrap try this instead:

          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              height: 21,
              child: Text(item!),
            ),
          )

Your code is fine. This is an image for the implementation. image

answered Aug 24 '22 at 08:44

HKN

264
1
8

No offence, but this does literally nothing except adding padding.... – GrandMagus Aug 24 '22 at 08:59
I was just trying to clear an idea for you. You were centering a text inside a container that has dynamic width. so each item will take the whole screen width. Center is removed if you can could read carefully. the problem is that you are hiding code and asking for help. – HKN Aug 24 '22 at 09:03

Overflow within a Column when mapping out items, Flutter

3 Answers3

Linked