Flutter: `Container` height cannot be adjusted inside `Stack`

Question

I am trying too use the Stack in Flutter to overlap elements in my login screen. Basically, I have an image at the top, then at the bottom (overlap) a Container with the logo and login fields, buttons etc.

Below is my code

import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: LoginUI(),
    );
  }
}

class LoginUI extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return LoginState();
  }
}

class LoginState extends State<LoginUI> {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: Stack(
      fit: StackFit.loose,
      children: <Widget>[
        SafeArea(
          child: Container(
            child: Image.asset("assets/images/login_image.png"),
          ),
        ),
        Positioned(
          top: 280,
          child: Container(
            width: MediaQuery.of(context).size.width,
            decoration: new BoxDecoration(
                  color: Colors.green,
                  borderRadius: new BorderRadius.only(
                      topLeft: const Radius.circular(40.0),
                      topRight: const Radius.circular(40.0))),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Row(mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Flexible(child: Container(child:Image.asset("assets/images/logot.png"),),)


                ],),

              ],
            ),
          ),
        ),

      ],
    )
        //child: Image.asset("assets/images/login_image.png"),
        );
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }
}

The result is not as expected, see below.

The logo is halfway through, and it seems the Container is stuck in its height. I tried to add height to the container as the device height, nothing really happened.

I even tried adding more content to this container's column, non of them really showed up.

I need this container to take the rest of the height, so I can add content.

How can I fix this issue?

EDIT

What I want is below. Note how the top image is overlapped by the bottom container.

Answer 1

Define the width and height to make it appear.

Answer 2

try with this one

 Scaffold(
  body: Container(
       height: size.height,
      color: Colors.black,
      child: Stack(

        children: <Widget>[
          SafeArea(
            child: Container(
              child: Image.asset(AssetStrings.loginUpperTwoImage),
            ),
          ),
          Positioned(
            top: 280,
            child: Container(
              width: MediaQuery
                  .of(context)
                  .size
                  .width,
              height: size.height,

              decoration: new BoxDecoration(
                  color: Colors.white,
                  borderRadius: new BorderRadius.only(
                      topLeft: const Radius.circular(40.0),
                      topRight: const Radius.circular(40.0))),

              child: Container(
                child: Column(
                  children: <Widget>[
                    Row(mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Flexible(child: Container(

                          child: Image.asset(AssetStrings.message,width: 100.0,height: 70.0,),),),


                      ],),


                    new SizedBox(
                      height: 5.0
                      ,),
                    getTextField("Email Address"),

                    SizedBox(
                        height: 5.0
                    ),


                    getTextField("Password"),


                    SizedBox(
                        height: 5.0
                    ),
                    new Container(
                      alignment: Alignment.centerRight,
                      child: new InkWell(

                        onTap: () {
                          // setStateCall();
                        },
                        child: new Padding(
                          padding: new EdgeInsets.only(right: 10.0,top: 5.0),
                          child: new Text("Forgot Password?",style: new TextStyle(fontWeight:FontWeight.bold,color:  AppColors.kRedColor),),
                        ),
                      ),
                    ),


                    new SizedBox(
                      height: 15.0,
                    )
                    ,

                    new Container(
                      width: 80.0,
                      height: 32.0,
                      decoration: new BoxDecoration(
                          borderRadius: new BorderRadius.circular(4.0),
                          color: Colors.lightBlueAccent.withOpacity(0.3),
                          border: new Border.all(
                              color: Colors.grey.withOpacity(0.2)
                          )
                      ),
                      padding: new EdgeInsets.all(2.0),
                      child: Container(

                        color:  AppColors.kAccentBlueButton,
                        alignment: Alignment.center,

                        child: new InkWell(

                          onTap: (){


                          },
                          child: new Text("LOG IN",style: new TextStyle(color: Colors.white,fontSize: 14.0,fontWeight: FontWeight.bold),textAlign: TextAlign.center,),


                        ),
                      ),
                    ),



                    SizedBox(
                        height: 20.0

                    ),



                  ],
                ),
              ),
            ),
          ),

        ],
      )
    //child: Image.asset("assets/images/login_image.png"),
  ),
);

Get TextField Widget

  Widget getTextField(String labelText)
  {
return Container(
  margin:new EdgeInsets.only(left: 10.0,right: 10.0),
  child: new TextFormField(


      maxLines: 1,
      obscureText:false ,

      style: new TextStyle(fontWeight: FontWeight.bold,color: Colors.black),
      onFieldSubmitted: (value)
      {

      },
      decoration:  InputDecoration(

          hintText:labelText,
          hintStyle: new TextStyle(color: Colors.black.withOpacity(0.8),fontWeight: FontWeight.bold,fontSize: 14.0),

          enabledBorder: new UnderlineInputBorder(
              borderSide: new BorderSide(
                  color: AppColors.kAccentBlueButton.withOpacity(0.7),
                  width: 1.4

              )
          ),


          focusedBorder: new UnderlineInputBorder(
            borderSide: new BorderSide(
                color: AppColors.kAccentBlueButton,
                width: 1.4
            ),

          )
      )
  ),
);


}

Answer 3

The issue is on the Widget build Container. Give the height and width to your container

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'package:flutter/widgets.dart';

void main() => runApp(new Login());

class Login extends StatelessWidget {
  static const ROUTE = "/login";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: LoginUI(),
    );
  }
}

class LoginUI extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return LoginState();
  }
}

class LoginState extends State<LoginUI> {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: double.infinity,
        width: double.infinity,
        child: Stack(
          fit: StackFit.loose,
          children: <Widget>[
            SafeArea(
              child: Container(
                child: Image.asset("assets/no_image.png"),
              ),
            ),
            Positioned(
              top: 280,
              child: Container(
                height: 500,
                width: MediaQuery.of(context).size.width,
                decoration: new BoxDecoration(
                    color: Colors.green,
                    borderRadius: new BorderRadius.only(
                        topLeft: const Radius.circular(40.0),
                        topRight: const Radius.circular(40.0))),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Flexible(
                          child: Container(
                            child: Image.asset("assets/no_record.png"),
                          ),
                        )
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        )
        //child: Image.asset("assets/images/login_image.png"),
        );
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }
}

Output