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?
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),
],
),
),
),
],
),
);