Flutter Keyboard hide textField in nested Listviews

user_13121591 0
Viewed 479

I am making a cross platform app using Flutter with a responsive layout. I'll describe the problem using the login page layout. The layout is divided into 3 widgets (Desktop, Tablet, Mobile) each of which has a ListView with its graphic components, images, text etc ... Inside this ListView the 3 widgets share the Login Form another ListView with its components (text fields, buttons ...)

The problem: when opened the keyboard does not scroll the text fields covering them

Below is a draft of the code:

//The form shared by the 3 Widgets
class SignInFrom extends StatelessWidget {
  const SignInFrom({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Form(
      child: ListView(
        shrinkWrap: true,
        physics: const ClampingScrollPhysics(),
        children: [
          //COMPONENTS
        ],
      ),
    );
  }
}

This is one of the 3 widgets (Mobile):

class SignInPageMobile extends StatelessWidget {
  const SignInPageMobile({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ListView(
        children: [

          /* COMPONENTS
           *  ...
           */

          const SignInForm(), //The above SignInFrom widget
        ],
      ),
    );
  }
}

The SignInPage widget:

class SignInPage extends StatelessWidget {
  const SignInPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: BlocProvider(
        create: (context) => getIt<SignInFormBloc>(),
        child: Responsive(
          mobile: SignInPageMobile(),
          tablet: SignInPageTablet(),
          desktop: SignInPageDesktop(),
        ),
      ),
    );
  }
}

Edit

I want to mention that in the Scaffold that will contain one of the 3 widgets it is set: resizeToAvoidBottomInset: false

Because my components are built on dynamic values ​​of height and width using flutter_screenutil based on the sacaffold size so it needs to keep its dimensions even when the keyboard is open

flutter mobile android ios
2 Answers

EditText ,RoundedButton this two are my custom class

SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
               
                EditText('email', false, Icons.alternate_email, (data) {},
                    getLoginController.loginEmailController),
                Divider(
                  color: Colors.black,
                  thickness: 1,
                ),
                EditText('password', true, Icons.lock_outlined, (data) {},
                    getLoginController.loginPasswordController),
                Divider(
                  color: Colors.black,
                  thickness: 1,
                ),
                SizedBox(height: 10),
                RoundedButton('Login', () async {
                  //button  }),
              
              ],
            ),
          )
user_142853390

You try 

Padding(
       padding: EdgeInsets.only(top: 8, left: 8, right: 8,bottom:     MediaQuery.of(context).viewInsets.bottom))
user_95783090
Related