Flutter: когда текстовое поле включено, фоновое изображение перемещается вверх. resizeToAvoidBottomInset отключает прокрутку. Где я ошибаюсь?

Question

На моем экране входа в систему есть фоновое изображение. Когда пользователь нажимает на текстовые поля, контейнер должен подниматься, чтобы текстовые поля / кнопка не скрывались под клавиатурой.

Ниже мой код, и он отлично работает. Но когда текстовое поле включено, фоновое изображение просто перемещается вверх.

    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 ----

Чтобы этого избежать, я добавил:

    resizeToAvoidBottomInset: false,

как собственность ООО "Эшафот". Теперь перестала работать прокрутка.

Где я ошибаюсь?

Answer 1

Оберните каркас контейнером, добавьте Boxdecoration (где вы можете добавить фоновое изображение) и сделайте цвет фона каркаса прозрачным.

    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 ---