CODEWITHSUNDEEP
androiddartflutter
Daunio
Daunio

Reputation: 61

Flutter. Whitespace on screen

enter image description here

My code is

Widget build(BuildContext context) {

final logo = Image.asset("assets/images/logo.png", fit: BoxFit.fitWidth);
final emailField = TextField(
  obscureText: false,
  decoration: InputDecoration(
      contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
      labelText: "Email",
      fillColor: Colors.white,
      border:
      OutlineInputBorder(
        borderRadius: BorderRadius.circular(10.0),
        borderSide: BorderSide(),
      )
  ),
);
final passwordField = TextField(
  obscureText: true,
  decoration: InputDecoration(
      contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
      labelText: "Password",
      border:
      OutlineInputBorder(
        borderRadius: BorderRadius.circular(10.0),
        borderSide: BorderSide()
      )
  ),
);
final loginButton = Material(
  elevation: 5.0,
  borderRadius: BorderRadius.circular(13.0),
  color: Color.fromARGB(255, 40, 97, 143),
  child: MaterialButton(
    minWidth: MediaQuery.of(context).size.width,
    padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
    onPressed: () {},
    child: Text("Login",
        textAlign: TextAlign.center,
        style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold
        )
    ),
  ),
);

final background = BoxDecoration(
  image: DecorationImage(
    image: ExactAssetImage("assets/images/background .png"),
    fit: BoxFit.cover,
    colorFilter: ColorFilter.mode(Colors.white.withOpacity(0.5), BlendMode.dstATop)
  ),
);

return Scaffold(
  body: SingleChildScrollView(
    child: Container(
      decoration: background,
      padding: EdgeInsets.all(25.0),
      alignment: Alignment.topCenter,
      child: Column(
        children: <Widget>[
          SizedBox(height: 85.0,),
          logo,
          SizedBox(height: 130.0,),
          emailField,
          SizedBox(height: 20.0,),
          passwordField,
          SizedBox(height: 20.0,),
          loginButton
        ],
      ),
    ),
  )
);
}

I don't know how to remove the whitespace, can anyone explain me what's wrong with my code?

I added SingleChildScrollView 'cause keyboard hides textfield if I don't use it but without SingleChildScrollView I don't get the whitespace.

Removing SingleChildScrollView could work but I have the problem with keyboard.

Maybe another way to do it.

I'm stuck on it.

Thanks.

Upvotes: 1

Views: 5925

Answers (1)

Hosar
Hosar

Reputation: 5292

You will have several problems with those SizedBox you are using as separators. But you can remove that white space adding some height to your main Container.
something like this:

Container(
        height: MediaQuery.of(context).size.height, // add this line
        decoration: background,
        padding: EdgeInsets.all(25.0),
        alignment: Alignment.topCenter,

Upvotes: 4

Related Questions