Flutter : When textfield is enabled, background image moves upward. "resizeToAvoidBottomInset" disables scrolling. Where am I going wrong?

Question

My login screen has a background image. When the user taps on textfields, the container must go up so that the textfields/button does not hide under the keyboard.

Below is my code and it works fine. But when the textfield is enabled, the background image just moves up.

    class _SignInState extends State<SignIn> {
      TextEditingController usernameController = TextEditingController();
      TextEditingController passwordController = TextEditingController();

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          //resizeToAvoidBottomInset: false,
          body: Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,

            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/images/bg.png'),
                fit: BoxFit.cover,
            )),

            child: SingleChildScrollView(
              padding: EdgeInsets.all(20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch, 
                children: <Widget>[

                  --- added username & password textfield ---
                  --- added submit and forgot password buttons ----

To avoid this, I added :

    resizeToAvoidBottomInset: false,

as the property of "Scaffold". Now the scrolling stopped working.

Where am I going wrong?

score 2 · Accepted Answer · answered Jun 16 '20 at 10:11

Wrap the scaffold with container, add Boxdecoration (where you can add the background image) and make the background color of scaffold transparent.

    class _SignInState extends State<SignIn> {
     TextEditingController usernameController = TextEditingController();
     TextEditingController passwordController = TextEditingController();

     @override
     Widget build(BuildContext context) {
      return Container(
       width: MediaQuery.of(context).size.width,
       height: MediaQuery.of(context).size.height,

       decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/bg.png'),
            fit: BoxFit.cover,
       )),

       child: Scaffold(
        backgroundColor: Colors.transparent,
        body: Container(
         width: MediaQuery.of(context).size.width,
         height: MediaQuery.of(context).size.height,
         child: SingleChildScrollView(
             --- rest of the code ---

Flutter : When textfield is enabled, background image moves upward. "resizeToAvoidBottomInset" disables scrolling. Where am I going wrong?

1 Answers1