Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Background image is moving when keyboards appears Flutter

i was searching a lot and reading a lot another threads and nothing work for my case, my background image is moving when keyboards appears. I tried my best, and I am getting frustrated already because I am wasting a lot of time, could someone help me with this?

the image goes up every time I open the textinput and the keyboard appears, I think my mistake is to position the elements in the code, or I am missing something but the truth is I can't figure out what my mistake is.

I want to add that this page" is a page of a PageView, I don't know if that will have something about causing the issue. Cuz i switch between login and register pages with the buttons, they are a pageview.

enter image description here

import 'package:flutter/material.dart';
import 'package:plantsapp/screens/welcome_page.dart';
import 'package:plantsapp/services/authentication_service.dart';
import 'package:provider/provider.dart';

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

class _LoginPageState extends State<LoginPage> {
  final TextEditingController emailController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();
  AuthenticationService authServ = new AuthenticationService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Stack(children: [
            _crearfondo2(),
            _loginForm()
          ],),
      //_loginForm(),
    );
  }

  Widget _crearfondo2() {
    return Container(
      height: double.infinity,
      width: double.infinity,
        decoration: BoxDecoration(
            image: DecorationImage(
      image: AssetImage('assets/images/backgroundlogin.jpg'),
      fit: BoxFit.cover,
    )));
  }

  /*Widget _crearFondo() {
    return Positioned(
      child: Image.asset(
        'assets/images/backgroundlogin.jpg',
        fit: BoxFit.fill,
      ),
      height: MediaQuery.of(context).size.height,
      top: 0.0,
      right: 0.0,
      left: 0.0,
    );
  }*/

  Widget _loginForm() {
    return SingleChildScrollView(
          child: Container(
        color: Colors.white,
        width: double.infinity,
        margin: EdgeInsets.symmetric(horizontal: 20, vertical: 130),
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 60),
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Login',
              style: TextStyle(fontSize: 20),
            ),
            _emailForm(),
            _passwordForm(),
            _button(),
            _buttonRegister(),
          ],
        ),
      ),
    );
  }

  Widget _emailForm() {
    return TextField(
      controller: emailController,
      decoration: InputDecoration(hintText: ('Email')),
    );
  }

  Widget _passwordForm() {
    return TextField(
      controller: passwordController,
      decoration: InputDecoration(hintText: ('Password')),
    );
  }

  Widget _button() {
    return RaisedButton(
      child: Text('Login'),
      onPressed: () async {
        //Provider.of<AuthenticationService>(context, listen: false).
        dynamic result = await authServ.signIn(
            email: emailController.text.trim(),
            password: passwordController.text.trim());
        if (result == null) print('error signing in');
      },
    );
  }

  _buttonRegister() {
    final navegacionModel = Provider.of<NavegacionModel>(context);
    int index = 1;
    return RaisedButton(
      child: Text('Registrarse'),
      onPressed: () {
        // Navigator.pushNamed(context, 'registerpage');
        navegacionModel.paginaActual = index;
        navegacionModel.pageController;
      },
    );
  }
}

WelcomePage:

class WelcomePage extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => new NavegacionModel(),
      child: Scaffold(
        body: _Paginas(),
      ),
    );
  }
}

class _Paginas extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final navegacionModel = Provider.of<NavegacionModel>(context);

    return PageView(
      controller: navegacionModel.pageController,
      // physics: BouncingScrollPhysics(),
      physics: NeverScrollableScrollPhysics(),
      children: <Widget>[
        LoginPage(),
        RegisterPage(),
      ],
    );
  }
}

class NavegacionModel with ChangeNotifier {
  int _paginaActual = 0;
  PageController _pageController = new PageController();

  int get paginaActual => this._paginaActual;

  set paginaActual(int valor) {
    this._paginaActual = valor;
    _pageController.animateToPage(valor, duration: Duration(milliseconds: 235), curve: Curves.easeOut);
    notifyListeners();
  }

  PageController get pageController => this._pageController;

}
like image 462
Kondos Avatar asked Oct 29 '25 20:10

Kondos


1 Answers

Fixed!!! i will share how i fix it for someone need this:

welcome_page.dart

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => new NavegacionModel(),
      child: Scaffold(
        resizeToAvoidBottomInset: false, // i had to add this here, when i add here the image didnt move anymore by the keyboard
        body: _Paginas(),
      ),
    );
  }
}

login_page.dart

  @override
  Widget build(BuildContext context) {
    return Stack( // i remove this unnecesary scaffold until i need childrens, for now, i just return the stack
        children: [
          _crearfondo2(),
          Padding( //i add this Padding cuz the form didnt scroll with the "resizeToAvoidBottomInset: false" until i add this padding here.
            padding: EdgeInsets.only(
              bottom: MediaQuery.of(context).viewInsets.bottom,
            ),
            child: _loginForm(),
          ),
        ],
      );
  }
like image 112
Kondos Avatar answered Nov 01 '25 17:11

Kondos



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!