Container widget overflows other widgets- Flutter

Question

This is the expected screen and the container will collapse and expand based on the text displayed and should only occupy the space left out by placing other icons.

But see the flutter implemented screen. The icons are moved to the right on container expansion and shows overflowed pixel error.

My code

  Padding(
    padding: const EdgeInsets.symmetric(horizontal: 20),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
       IconButton(
        icon: const Icon(
          Icons.menu,
          color: Colors.black,
          size: 34,
        ),
        onPressed: () {},
      ),

      //container section
      GestureDetector(
        child: Container(
          margin: const EdgeInsets.only(left: 10, right: 10),
          decoration: BoxDecoration(
              color: Colors.red.shade100,
              borderRadius: BorderRadius.circular(40.0)),
          child: Padding(
            padding:
                const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
            child: Align(
              alignment: Alignment.centerLeft,
              child: Row(children: const <Widget>[
                Text(
                  "Content is here",
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      color: Colors.black54,
                      fontSize: 19.0,
                      fontWeight: FontWeight.bold),
                ),
                Icon(
                  Icons.arrow_drop_down,
                  color: Colors.black,
                ),
              ]),
            ),
          ),
        ),
        onTap: () {
          //todo show bottom sheet dialog here.
        },
      ),

      const Spacer(), // I just added one line
      IconButton(
        icon: Image.asset('assets/images/ic_scan.png'),
        iconSize: 20,
        onPressed: () {},
      ),
      IconButton(
        icon: Image.asset('assets/images/ic_notification.png'),
        iconSize: 20,
        onPressed: () {},
      ),
      IconButton(
        icon: Image.asset('assets/images/ic_search.png'),
        iconSize: 20,
        onPressed: () {},
       ),
     ],
    ),
  );

are you using this on appBar? Also how you like to handle overflow, when there is not enough space on ui — Md. Yeasin Sheikh
– Md. Yeasin Sheikh, Commented Aug 28, 2022 at 11:18

Kaushik Chandru · Accepted Answer · 2022-08-28 11:43:20Z

1

Remove the spacer and add the dropdown in a flexible widget

Padding(
    padding: const EdgeInsets.symmetric(horizontal: 20),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
       IconButton(
        icon: const Icon(
          Icons.menu,
          color: Colors.black,
          size: 34,
        ),
        onPressed: () {},
      ),

  Flexible(//<-------Flexible
      child: GestureDetector(
        child: Container(
          margin: const EdgeInsets.only(left: 10, right: 10),
          decoration: BoxDecoration(
              color: Colors.red.shade100,
              borderRadius: BorderRadius.circular(40.0)),
          child: Padding(
            padding:
                const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
            child: Align(
              alignment: Alignment.centerLeft,
              child: Row(
            children: const <Widget>[
              Flexible(//<-------Flexible
                 child: Text(
                  "Content is here",
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      color: Colors.black54,
                      fontSize: 19.0,
                      fontWeight: FontWeight.bold),
                ),
               ),
                Icon(
                  Icons.arrow_drop_down,
                  color: Colors.black,
                ),
              ]),
            ),
          ),
        ),
        onTap: () {
          //todo show bottom sheet dialog here.
        },
      ),
),
//Spacer() //<--------remove this
      IconButton(
        icon: Image.asset('assets/images/ic_scan.png'),
        iconSize: 20,
        onPressed: () {},
      ),
      IconButton(
        icon: Image.asset('assets/images/ic_notification.png'),
        iconSize: 20,
        onPressed: () {},
      ),
      IconButton(
        icon: Image.asset('assets/images/ic_search.png'),
        iconSize: 20,
        onPressed: () {},
       ),
     ],
    ),
  );

answered Aug 28, 2022 at 11:43

Kaushik Chandru

18k4 gold badges24 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Alfin Over a year ago

Thanks a lot for your answer!, I tried this and it worked. But the container always fit on the available space, not collapse when text content length is small. like :- Text( "Content", overflow: TextOverflow.ellipsis, style: TextStyle( color: Colors.black54, fontSize: 19.0, fontWeight: FontWeight.bold), ))

Kaushik Chandru Over a year ago

To the row add mainAxisSize: MainAxisSize.min

Alfin Over a year ago

I tried, but did not work as expected

Kaushik Chandru Over a year ago

Remove the align widget too

Alfin Over a year ago

worked!, but can't set container alignment to 'centerLeft'.It always shows in center

Collectives™ on Stack Overflow

Container widget overflows other widgets- Flutter

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related