Soft keyboard must cover some widgets - flutter

Question

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

but when I open keyboard the whole bottom content moves up and covers everything.

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?

Answer 1

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