Kavach Dheer
Kavach Dheer

Reputation: 159

My second container is taking all the space.How to avoid that

enter image description here

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]

Upvotes: 0

Views: 45

Answers (2)

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63864

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'),
                ),
              ],
            ),
          ),
        ),
      ),

Upvotes: 1

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14895

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-> image

Upvotes: 1

Related Questions