# How to Create a Custom Sign-In Screen for Your FlutterFlow App - Tool: FlutterFlow - Difficulty: Beginner - Time required: 20-30 min - Compatibility: FlutterFlow Free+ - Last updated: March 2026 ## TL;DR Build a branded login page using a Stack with a background image or gradient, a centered SingleChildScrollView Card containing email and password TextFields, a Remember Me checkbox (persisted in App State), a Login button, an OR divider, Google and Apple social login buttons, and a Forgot Password link. Handle Firebase Auth errors (user-not-found, wrong-password, too-many-requests) with specific user-facing messages in a SnackBar. ## Building a Branded Login Page with Social Auth and Error Handling in FlutterFlow The login screen is the first impression of your app. This tutorial builds a polished, keyboard-aware sign-in page with branded visuals, email/password authentication, Google and Apple social login, Remember Me persistence, and detailed error handling for common Firebase Auth failures. ## Before you start - A FlutterFlow project with Firebase Authentication enabled - Email/Password sign-in method enabled in Firebase console → Authentication → Sign-in method - Google and Apple sign-in providers configured if using social login - A home page to navigate to after successful login ## Step-by-step guide ### 1. Create the login page with Stack background and SingleChildScrollView for keyboard awareness Create a LoginPage. Set the root widget to a Stack. First child: a full-screen Container with either a DecorationImage (background photo, fit: cover, colorFilter darken overlay) or a gradient (LinearGradient from Theme primary to secondary). Second child: a SafeArea containing a SingleChildScrollView (to prevent overflow when the keyboard opens). Inside the scroll view, a Center containing a Container (Card-like: white background, borderRadius: 16, padding: 32, margin: 24, maxWidth: 400). This Card holds all the login form widgets. **Expected result:** A full-screen branded background with a centered white card that scrolls up when the keyboard appears on small screens. ### 2. Add app logo, email TextField, and password TextField with visibility toggle Inside the Card Container, add a Column (crossAxisAlignment: center). First child: Image (app logo, height: 60). SizedBox(24). Email TextField: keyboardType: emailAddress, prefixIcon: email, hintText: 'Email address', autofillHints: [email], validator checks email format. SizedBox(16). Password TextField: obscureText: true (bound to Page State isPasswordVisible), prefixIcon: lock, suffixIcon: IconButton (visibility/visibility_off, toggles isPasswordVisible), hintText: 'Password'. On Page Load: if App State rememberedEmail is not empty, pre-fill the email TextField. **Expected result:** The login card shows the app logo, an email field, and a password field with a tap-to-reveal eye icon. ### 3. Add Remember Me checkbox and Login button with Firebase Auth sign-in action Below the password field, add a Row: Checkbox bound to Page State rememberMe + Text 'Remember Me'. On the right side of the Row: TextButton 'Forgot Password?' (On Tap → navigate to ForgotPasswordPage or trigger Send Password Reset Email for the entered email). Below, a full-width Button 'Log In' (primary color, rounded). On Tap action flow: if rememberMe is true → Update App State rememberedEmail = emailValue (persisted), else clear it. Then call Firebase Auth Sign In with Email (email, password). On Success → Navigate to HomePage with Replace Route. **Expected result:** Tapping Log In authenticates with Firebase. If Remember Me is checked, the email is saved for next login. Forgot Password triggers a reset email. ### 4. Add OR divider and Google/Apple social login buttons Below the Login button, add a Row: Expanded Divider + Padding Text 'OR' (bodySmall, grey) + Expanded Divider. SizedBox(16). Add a Row with two social login Containers: Google button (white bg, border, Row with Google logo Image 20px + Text 'Google') and Apple button (black bg, Row with Apple logo Image 20px + Text 'Apple', white text). On Google button tap → Firebase Auth Sign In with Google. On Apple button tap → Firebase Auth Sign In with Apple. Both → On Success → Navigate to HomePage with Replace Route. Below the social buttons: Row with Text 'Don't have an account?' + TextButton 'Sign Up' (On Tap → Navigate to SignUpPage). **Expected result:** An OR divider separates password login from social login. Google and Apple buttons authenticate via their respective providers. ### 5. Handle Firebase Auth error codes with specific user-facing SnackBar messages On the Login button's On Failure branch of the Sign In action, add Conditional Actions checking the error code. If error code contains 'user-not-found' → Show SnackBar 'No account found with this email. Please sign up.' If 'wrong-password' → Show SnackBar 'Incorrect password. Please try again.' If 'too-many-requests' → Show SnackBar 'Too many failed attempts. Please try again later.' If 'user-disabled' → Show SnackBar 'This account has been disabled. Contact support.' Default → Show SnackBar 'Login failed. Please check your credentials.' Style all error SnackBars with red background. **Expected result:** Each Firebase Auth failure shows a specific, helpful error message instead of a generic or technical error string. ## Complete code example File: `FlutterFlow Sign-In Screen Setup` ```text PAGE: LoginPage Page State: isPasswordVisible (Boolean, false), rememberMe (Boolean, false) App State: rememberedEmail (String, persisted) WIDGET TREE: Stack ├── Container (full screen) │ Decoration: DecorationImage (background.jpg, fit: cover) │ colorFilter: ColorFilter.mode(black54, BlendMode.darken) │ OR: gradient (primary → secondary) └── SafeArea SingleChildScrollView Center Container (white, borderRadius: 16, padding: 32, margin: 24, maxWidth: 400) Column (crossAxisAlignment: center) ├── Image (logo, height: 60) ├── SizedBox (24) ├── TextField (email) │ keyboardType: emailAddress │ prefixIcon: email │ hintText: "Email address" │ initialValue: App State rememberedEmail ├── SizedBox (16) ├── TextField (password) │ obscureText: !isPasswordVisible │ prefixIcon: lock │ suffixIcon: IconButton (visibility toggle) │ hintText: "Password" ├── SizedBox (12) ├── Row (spaceBetween) │ ├── Row: Checkbox (rememberMe) + Text "Remember Me" │ └── TextButton "Forgot Password?" │ On Tap → Send Password Reset Email ├── SizedBox (16) ├── Button "Log In" (full width, primary, borderRadius: 8) │ On Tap: │ 1. If rememberMe → save email to App State │ 2. Firebase Sign In (email, password) │ 3. On Success → Navigate HomePage (Replace Route) │ 4. On Failure → Conditional SnackBar by error code ├── SizedBox (16) ├── Row: Divider + Text "OR" + Divider ├── SizedBox (16) ├── Row (center, spacing: 12) │ ├── Container (Google button) │ │ Row: Google logo + Text "Google" │ │ On Tap → Sign In with Google → Navigate Home │ └── Container (Apple button) │ Row: Apple logo + Text "Apple" │ On Tap → Sign In with Apple → Navigate Home ├── SizedBox (24) └── Row (center) ├── Text "Don't have an account?" └── TextButton "Sign Up" On Tap → Navigate SignUpPage ERROR HANDLING: user-not-found → "No account found with this email." wrong-password → "Incorrect password. Please try again." too-many-requests → "Too many attempts. Try again later." user-disabled → "Account disabled. Contact support." default → "Login failed. Check your credentials." ``` ## Common mistakes - **Not wrapping the login form in SingleChildScrollView** — When the keyboard opens on small screens, the form content overflows behind the keyboard and the Login button becomes unreachable. Fix: Wrap the Card in a SingleChildScrollView so the form scrolls up when the keyboard appears, keeping all fields accessible. - **Showing the raw Firebase Auth error message to the user** — Firebase error strings like 'firebase_auth/wrong-password' are technical and confusing for non-technical users. Fix: Check the error code in Conditional Actions and show a friendly, specific SnackBar message for each known error. - **Using Navigate To instead of Replace Route after successful login** — With Navigate To, the login page stays on the navigation stack. Users can press Back and return to the login page while still authenticated. Fix: Use Navigate with Replace Route so the login page is removed from the stack and Back goes to the app's previous page or exits. ## Best practices - Use a Stack with darkened background image for visual branding without sacrificing text readability - Wrap the form in SingleChildScrollView inside SafeArea for keyboard and notch awareness - Add a visibility toggle (eye icon) on the password field so users can verify what they typed - Persist Remember Me email in App State so the field pre-fills on the next app launch - Handle each Firebase Auth error code with a specific user-facing message - Use Replace Route for post-login navigation to prevent Back-button return to the login page - Set autofillHints on TextFields so password managers can auto-fill credentials ## Frequently asked questions ### How do I pre-fill the email field when the user checked Remember Me last time? Store the email in a persisted App State variable rememberedEmail. On LoginPage load, check if rememberedEmail is not empty and set it as the initial value of the email TextField. ### Can I add biometric authentication (Face ID / fingerprint)? Yes. Use the local_auth package in a Custom Action. On Page Load, check if biometrics are available and if the user has logged in before. If both, prompt biometric auth and skip the password step. ### Why does the password visibility toggle use Page State instead of a local variable? FlutterFlow widgets bind to Page State or App State. A local variable would not trigger a widget rebuild. Page State toggle ensures the TextField re-renders with the updated obscureText value. ### How do I handle the user pressing Login with empty fields? Add form validation: check that email is not empty and matches an email regex, and that password is at least 6 characters. Show a SnackBar with the specific validation error before calling Firebase Auth. ### Can I style the social login buttons to match Google and Apple brand guidelines? Yes. Use the official Google 'G' logo and Apple logo images. Google button: white background, thin grey border, black text. Apple button: black background, white text. Download official assets from each provider's branding page. ### Can RapidDev help build a complete authentication system? Yes. RapidDev can implement email/password, social login, phone OTP, magic links, multi-factor authentication, role-based access control, and account recovery flows. --- Source: https://www.rapidevelopers.com/flutterflow-tutorials/how-to-create-a-custom-sign-in-screen-for-your-flutterflow-app © RapidDev — https://www.rapidevelopers.com/flutterflow-tutorials/how-to-create-a-custom-sign-in-screen-for-your-flutterflow-app