简体   繁体   中英

Container widget overflows other widgets- Flutter

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: () {},
       ),
     ],
    ),
  );

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: () {},
       ),
     ],
    ),
  );

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM