flutterscrollviewsoft-keyboard

Soft keyboard must cover some widgets - flutter


I'm struggling creating this login screen where when I open the keyboard the login button remains visible while items below get covered.

I have created this

actual

but when I open keyboard the whole bottom content moves up and covers everything. what I'm getting

Here is my code:

return Scaffold(
  appBar: AppBar(),
  body: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 16.0),
    child: Center(
      child: Column(
        children: [
          Text(appLocalizations.hi, style: Theme.of(context).textTheme.titleMedium),
          Text(
            appLocalizations.weAreHappy,
            style: Theme.of(context).textTheme.titleLarge!.copyWith(fontWeight: FontWeight.w700),
          ),
          const SizedBox(height: 32.0),
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Form(
                    key: formKey,
                    child: Column(
                      children: [
                        CustomTextField(
                          labelIcon: 'icons/email.png',
                          hint: 'Email',
                          initialValue: email,
                          onChanged: (v) => email = v,
                          fieldType: FieldType.email,
                          keyboardType: TextInputType.emailAddress,
                          formKey: UniqueKey(),
                        ),
                        StatefulBuilder(builder: (context, state) {
                          return CustomTextField(
                            labelIcon: 'icons/lock.png',
                            hint: 'Password',
                            initialValue: password,
                            onChanged: (v) => password = v,
                            fieldType: passVisible ? FieldType.plainText : FieldType.password,
                            keyboardType: TextInputType.visiblePassword,
                            formKey: UniqueKey(),
                            trailingWidget: IconButton(
                              visualDensity: const VisualDensity(vertical: -3),
                              icon: Icon(
                                passVisible ? Icons.visibility_off : Icons.visibility,
                                color: AppColor.textGrey,
                              ),
                              onPressed: () => state(() => passVisible = !passVisible),
                            ),
                          );
                        }),
                      ],
                    ),
                  ),
                  TextButton(
                    onPressed: () {},
                    child: Text(
                      appLocalizations.forgotPassword,
                      style: Theme.of(context)
                          .textTheme
                          .labelMedium!
                          .copyWith(color: AppColor.textGrey, decoration: TextDecoration.underline),
                    ),
                  ),
                ],
              ),
            ),
          ),
          const Spacer(),
          BlueButton(
            'Login',
            enabled: true,
            rowWidget: Image.asset('assets/icons/login.png'),
            onTap: login,
          ),
          const Padding(
            padding: EdgeInsets.only(top: 16.0, bottom: 8.0),
            child: Row(
              children: [
                Expanded(child: Divider(indent: 16.0, endIndent: 16.0)),
                Text('O'),
                Expanded(child: Divider(indent: 16.0, endIndent: 16.0)),
              ],
            ),
          ),
          if (Platform.isIOS)
            //apple button
          //google button
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(appLocalizations.notRegistered),
              TextButton(
                child: Text(appLocalizations.register),
                onPressed: () => Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => const RegisterScreen()),
                ),
              ),
            ],
          ),
          const SizedBox(height: 32.0),
        ],
      ),
    ),
  ),
);

how to cover federal logins button and divider while leaving login button above keyboard?


Solution

  • Try below code hope its help to you. in below code Login and other button are hide when keyboard is open.

    Scaffold(
      resizeToAvoidBottomInset: false,
      body: Column(
        children: [
           Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // Title
                const Text(
                  'Welcome Back!',
                  style: TextStyle(
                    fontSize: 32,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 8),
                // Subtitle
                const Text(
                  'Please log in to your account',
                  style: TextStyle(fontSize: 18, color: Colors.grey),
                ),
                const SizedBox(height: 30),
      
                // Email TextField
                const TextField(
                  decoration: InputDecoration(
                    labelText: 'Email',
                    border: OutlineInputBorder(),
                    prefixIcon: Icon(Icons.email),
                  ),
                ),
                const SizedBox(height: 16),
      
                // Password TextField
                const TextField(
                  obscureText: true,
                  decoration: InputDecoration(
                    labelText: 'Password',
                    border: OutlineInputBorder(),
                    prefixIcon: Icon(Icons.lock),
                  ),
                ),
                const SizedBox(height: 16),
      
                // Forgot Password Button
                Align(
                  alignment: Alignment.centerRight,
                  child: TextButton(
                    onPressed: () {
                      // Handle forgot password
                    },
                    child: const Text('Forgot Password?'),
                  ),
                ),
              ],
            ),
          ),
         const Expanded(child: SizedBox()),
          // Bottom section with Login button, Gmail and Apple login buttons
          Expanded(
            child: SingleChildScrollView(
              physics: const NeverScrollableScrollPhysics(),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  // Login Button
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16.0),
                    child: ElevatedButton(
                      onPressed: () {
                        // Handle login action
                      },
                      style: ElevatedButton.styleFrom(
                        minimumSize: const Size(double.infinity, 50),
                      ),
                      child: const Text('Login'),
                    ),
                  ),
                  const SizedBox(height: 16),
              
                  // Gmail Login Button
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16.0),
                    child: ElevatedButton.icon(
                      onPressed: () {
                        // Handle Gmail login
                      },
                      icon: const Icon(Icons.email),
                      label: const Text('Login with Gmail'),
                      style: ElevatedButton.styleFrom(
                        minimumSize: const Size(double.infinity, 50),
                        backgroundColor: Colors.red,
                      ),
                    ),
                  ),
                  const SizedBox(height: 16),
              
                  // Apple Login Button
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16.0),
                    child: ElevatedButton.icon(
                      onPressed: () {
                        // Handle Apple login
                      },
                      icon: const Icon(Icons.apple),
                      label: const Text('Login with Apple'),
                      style: ElevatedButton.styleFrom(
                        minimumSize: const Size(double.infinity, 50), backgroundColor: Colors.black,
                      ),
                    ),
                  ),
                  const SizedBox(height: 32),
                ],
              ),
            ),
          ),
        ],
      ),
    );
    

    Output Image