The second Container which is in the red color is taking all the remaining space. How to avoid that. I want my second container to take the minimum space.

        Container(
        height: 600,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(
            Radius.circular(60),
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.only(top: 80.0, right: 50, left: 50),
          child: Container(

            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.all(
                Radius.circular(20),
              ),
            ),
            child: Column(
              children: [
                TextFormField(
                  decoration: const InputDecoration(
                      border: UnderlineInputBorder(),
                      labelText: "Email or Phone Number"),
                ),
                SizedBox(
                  height: 20,
                ),
                TextField(
                  decoration:
                      new InputDecoration.collapsed(hintText: 'PassWord'),
                )
              ],
            ),
          ),
        ),
      ),[![][1]][1]

CodePudding user response：

Try below code hope its helpful to you. Just remove your container extra/large height

  Container(
  height: 180,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(
      Radius.circular(
        60,
      ),
    ),
  ),
  child: Padding(
    padding: const EdgeInsets.only(top: 80.0, right: 50, left: 50),
    child: Container(
      decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.all(
          Radius.circular(20),
        ),
      ),
      child: Column(
        children: [
          TextFormField(
            decoration: const InputDecoration(
              border: UnderlineInputBorder(),
              labelText: "Email or Phone Number",
            ),
          ),
          SizedBox(
            height: 20,
          ),
          TextField(
            decoration: InputDecoration.collapsed(
              hintText: 'PassWord',
            ),
          )
        ],
      ),
    ),
  ),
),

Your result screen->

CodePudding user response：

Remove parent Container height and set Column <mainAxisSize: MainAxisSize.min,>.

It is taking full height because of Container height and the default behavior of Column.

And to improve UI, use padding on Container<padding:x,child Column>

 Container(
        // height: 600,
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(
            Radius.circular(60),
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.only(top: 80.0, right: 50, left: 50),
          child: Container(
            padding: const EdgeInsets.all(40), //here padding
            decoration: const BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.all(
                Radius.circular(20),
              ),
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                TextFormField(
                  decoration: const InputDecoration(
                      border: UnderlineInputBorder(),
                      labelText: "Email or Phone Number"),
                ),
                const SizedBox(
                  height: 20,
                ),
                const TextField(
                  decoration: InputDecoration.collapsed(hintText: 'PassWord'),
                ),
              ],
            ),
          ),
        ),
      ),