1

Each time I open the keyboard the image is scaled based on the screen size above the keyboard and no longer on the entire screen of the device. My code is as below, how can I solve? Because if I don't put SingleChieldScrollView it will show the yellow pixel alert banner.

Each time I open the keyboard the image is scaled based on the screen size above the keyboard and no longer on the entire screen of the device. My code is as below, how can I solve? Because if I don't put SingleChieldScrollView it will show the yellow pixel alert banner.

Each time I open the keyboard the image is scaled based on the screen size above the keyboard and no longer on the entire screen of the device. My code is as below, how can I solve? Because if I don't put SingleChieldScrollView it will show the yellow pixel alert banner.

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("imgs/bgLogin.jpg"), fit: BoxFit.cover)),
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints viewportConstraints) {
            return SingleChildScrollView(
              child: ConstrainedBox(
                constraints: BoxConstraints(
                  minHeight: viewportConstraints.maxHeight,
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Container(
                      child: Column(
                        children: <Widget>[
                          Text("Bem Vindo ao,", style: TextStyle(fontSize: 32)),
                          Text("MedPAD", style: TextStyle(fontSize: 52))
                        ],
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.only(
                          left: 15.0, right: 15.0, top: 50.0, bottom: 5.0),
                      child: TextField(
                        keyboardType: TextInputType.emailAddress,
                        decoration: InputDecoration(
                            labelText: "E-Mail", border: OutlineInputBorder()),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.only(
                          left: 15.0, right: 15.0, top: 5.0, bottom: 15.0),
                      child: TextField(
                        keyboardType: TextInputType.text,
                        decoration: InputDecoration(
                            labelText: "Senha", border: OutlineInputBorder()),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.only(
                          left: 15.0, right: 15.0, top: 5.0, bottom: 15.0),
                      child: TextField(
                        keyboardType: TextInputType.text,
                        decoration: InputDecoration(
                            labelText: "Senha", border: OutlineInputBorder()),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.only(left: 75.0, right: 75.0),
                      height: 50.0,
                      child: RaisedButton(
                        color: Colors.red,
                        onPressed: () {},
                        child: Text(
                          "Entrar",
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    )
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

1 Answers1

0

In your code, you need to add - resizeToAvoidBottomPadding: false, in Scaffold

code:

.....
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,  /// Add this
      body: Container(
    .....
anmol.majhail
  • 48,256
  • 14
  • 136
  • 105