12

I'm creating a login screen, and i have this background image, the problem is when the user clicks one of the TextFields and the keyboard pops, the background image changes its size to fit the new screen size (excluding the keyboard).

I want the background to stay persistent and the same size, i would use BoxFit.none, but i'm afraid it will hurt the responsiveness of the app.

Here's the code:

new Container(
      decoration: new BoxDecoration(
          color: Colors.red,
          image: new DecorationImage(
              fit: BoxFit.cover,
              image: new AssetImage(
                  'assets/images/splash_screen/background.png'))),
      child: new Center(
        child: new ListView(
          physics: new PageScrollPhysics(),
          children: <Widget>[ //Login screen content ],
        ),
      ),
    );

I also tried to define BoxConstraints with minHeight of the device screen but it doesn't help, and used Stack as well but with not luck.

Here's what i mean by changing dimensions: No Keyboard / With Keyboard

1

4 Answers 4

38

Put your Scaffold as a child of a Container and make it transparent

final emailField = TextFormField(
  decoration: InputDecoration(
    hintText: "Email",
  ),
);

return Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('assets/bg.png'),
      fit: BoxFit.cover,
    ),
  ),
  child: Scaffold(
    backgroundColor: Colors.transparent,
    body: ListView(
      children: <Widget>[
        emailField,
      ],
    ),
  ),
);
2
  • Additionally, if you want a background color and image, add a color under BoxDecoration. You can also change the alignment of the image with alignment under DecorationImage Commented Sep 14, 2019 at 16:33
  • Thanks for this insight. Commented Apr 2, 2021 at 12:21
6

Try using a Stack, with your image in a Positioned, with a BoxFit of fill. Then, set top: 0.0. This way, its height shouldn't be influenced by the height of the bottom of the screen (i.e. it shouldn't change when the keyboard comes up), and its size should remain the same. Example:

return Stack(
  children: <Widget>[
    Positioned(
      top: 0.0,
      child: Image.asset(
        'assets/images/splash_screen/background.png',
        fit: BoxFit.fill,
      ),
    ),
    Center(
      child: ListView(
        physics: PageScrollPhysics(),
        children: <Widget>[ 
           //Login screen content
        ],
      ),
    ),
  ],
);
1
  • 3
    I had to set top, left and right to 0.0 and set height to MediaQuery.of(context).size.height
    – E-Madd
    Commented Oct 15, 2018 at 1:47
3

Try going to to your Scaffold (or use one) and set resizeToAvoidBottomPadding = false

0

You can try this, It works well

import 'package:flutter/material.dart';
class SignUpView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Container(
          decoration: BoxDecoration(
              image: DecorationImage(
        image: AssetImage("assets/images/background.png"),
        fit: BoxFit.cover,
      ))),
      Scaffold(
          resizeToAvoidBottomInset: false,
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            title: Text('NEW USER'),
            backgroundColor: Colors.transparent,
            elevation: 0,
          ),
          body: Padding(
              padding: EdgeInsets.all(10),
              child: ListView(children: <Widget>[])))
    ]);
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.