Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – When using this Container, bottom overflowed occured. Why?

When using last container, an error occured: bottom overflowed by 14 pixels

Container(
  height: 50,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,

    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween, // Equal spacing
        children: [
          Text(" ${item.vchrName}"),
          Icon(IconlyLight.heart),

        ],
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween, // Equal spacing

        children: [
          Text("$ ${item.dblSellingPrice}"),
          Icon(IconlyLight.chat),

        ],
      ),
    ],
  ),
),
Container(
  height: 25,
  color:Colors.redAccent,

)
Tags:

2

Answers


  1. 0

    Because the main Container has 50 fixed height, its child Column has 3 children, all their heights combined is exceeding above 50.
    Remove the main container’s height and add mainAxisSize: MainAxisSize.min to Column. So, it won’t take more space than its children already has:

    Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            mainAxisSize: MainAxisSize.min,
            children: [
              Row(
                mainAxisAlignment:
                    MainAxisAlignment.spaceBetween, 
                children: [
                  Text("Name"),
                  Icon(Icons.favorite),
                ],
              ),
              Row(
                mainAxisAlignment:
                    MainAxisAlignment.spaceBetween,

                children: [
                  Text("$ 123"),
                  Icon(Icons.chat),
                ],
              ),
              Container(
                height: 25,
                color: Colors.redAccent,
              ),
            ],
          ),
        ),
    Login or Signup to reply.
  2. 0

    Remove the height of the container.

    Container(
    child: Column(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    mainAxisSize: MainAxisSize.min,
    children: [
    Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween, // Equal spacing
    children: [
    Text(" hello"),
    Icon(Icons.add),

              ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween, // Equal spacing

          children: [
            Text("$ 20"),
            Icon(Icons.delete_forever),

          ],
        ),
        Container(
          height: 25,
          color:Colors.redAccent,
        ),
      ],
    ),
  ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search