RSK World - Flutter Login UI | Login, Sign Up, Forgot Password, Theme Toggle | RSK World

Flutter Login UI - Login Screen - RSK World

Flutter Login UI is a complete login and sign-up demo with responsive screens: Login (email/password, remember me, forgot password, continue as guest), Sign Up (name, email, password, confirm password, terms checkbox, password strength), Forgot Password (email, reset link sent state), and Home (welcome, quick actions, settings, logout). Features: Material 3 light/dark/system theme, form validation (email regex, password min 6 chars), password strength indicator (weak/fair/good/strong), social login buttons (Google, Facebook, Apple – UI only), Terms of Service and Privacy Policy screens, haptic feedback, fade/slide animations. Tech: Flutter SDK, Dart, no backend. By rskworld.in.

If you find this Flutter Login UI project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Flutter Login UI

Login Screen

Login screen with email and password fields, regex email validation, password min 6 characters, remember me checkbox, forgot password link, sign in and continue as guest buttons. Password strength indicator and visibility toggle. Gradient background, teal theme, SliverAppBar with theme and help. Navigates to Home on success.

Email validation with RegExp; password validation (min 6 chars); FormState validate on submit.
PasswordStrengthIndicator widget with computeStrength (length, upper/lower, digit, special).
FadeTransition + SlideTransition (600ms) on form card; HapticFeedback on submit and actions.
Social section: Google, Facebook, Apple (UI only – SnackBar); Sign up and Terms/Privacy links.
Responsive padding for narrow width (MediaQuery width < 400).

Project Structure & Screens

lib/main.dart: MaterialApp, light/dark/system theme, teal ColorScheme. lib/screens: login_screen.dart, sign_up_screen.dart, forgot_password_screen.dart, home_screen.dart. lib/widgets: social_login_button.dart, password_strength_indicator.dart. test/widget_test.dart smoke test. web/index.html with custom demo splash.

main.dart – FlutterLoginUIApp StatefulWidget; _buildLightTheme() and _buildDarkTheme(); themeMode passed to LoginScreen.
LoginScreen: _FormCard, _HeaderSection, _SocialSection, _FooterLinks; Terms and Privacy as in-app screens.
SignUpScreen: name, email, password, confirm; agree to Terms required; PasswordStrengthIndicator; onSignInTap() after success.
ForgotPasswordScreen: email field, send reset link, _emailSent state and Check your inbox card.
HomeScreen: display name (userName/userEmail/Guest), quick actions grid, Settings (theme, About, Terms, Privacy), logout dialog.

Theme & Material 3

Light theme: seed #00897B, scaffold #E0F2F1, white cards, rounded inputs (14px). Dark theme: seed #4DB6AC, scaffold #121A19, surface #1E2E2C. Theme toggle in app bar (login) and in Settings (home). System UI transparent status/nav bar. useMaterial3: true.

ColorScheme.fromSeed for light and dark; WidgetStateColor for focused prefix icons.
CardThemeData: elevation, RoundedRectangleBorder 20px; InputDecorationTheme: filled, 14px radius.
FilledButtonThemeData and CheckboxThemeData with teal primary; Typography.material2021().
Theme mode cycled: light → dark → system (in Settings) or light ↔ dark (app bar).

Sign Up & Forgot Password

Sign up: full name (min 2 chars), email, password, confirm password; password match validation; I agree to Terms and Privacy (required); Receive news checkbox; Create account then pop to login. Forgot password: email field, Send reset link, 1.5s delay then success card and SnackBar; Back to Sign in.

SignUpScreen: _validateName, _validateEmail, _validatePassword, _validateConfirm; _agreeTerms must be true to submit.
RichText with WidgetSpan for Terms of Service and Privacy Policy links in sign up form.
ForgotPasswordScreen: _emailSent toggles form vs "Check your inbox" card; same email regex.
Both screens use same gradient background and Card layout as login; animations on sign up.

Reusable Widgets & Home

SocialLoginButton: icon, label, optional onPressed; theme-aware background and border; HapticFeedback. PasswordStrengthIndicator: enum none/weak/fair/good/strong; LinearProgressIndicator and label. Home: welcome card, Profile/Security/Notifications/Help quick actions (SnackBar), Settings screen, logout confirmation.

SocialLoginButton: Material + InkWell, borderRadius 14; used for Google, Facebook, Apple on login and sign up.
PasswordStrengthIndicator.computeStrength(): length, [A-Z], [a-z], [0-9], special chars; returns enum; label() and color().
HomeScreen: _QuickActionGrid with _QuickActionCard; _SettingsScreen with theme list tile and About dialog.
Thank you / Credits: RSK World, Molla Samser; contact and support info in var config.

What You Get

Flutter project: pubspec.yaml (flutter, cupertino_icons; flutter_test, flutter_lints). lib/main.dart, screens (login, sign_up, forgot_password, home), widgets (social_login_button, password_strength_indicator). test/widget_test.dart. web/index.html with demo splash. No backend; UI only. © 2026 RSK World.

Complete Flutter source – all Dart files; run flutter run or build web/APK.
No backend – login/sign up simulate success with delay then navigate; social buttons show SnackBar.
README and pubspec description: Beautiful Flutter login screen with form validation and social login buttons.
Technologies: Flutter SDK, Dart 3+, Material 3 – works on mobile, web, desktop. © 2026 RSK World.

Usage

Run with flutter run or open build/web/index.html after flutter build web. Login with any valid email and password (min 6 chars). Use theme icon in app bar to switch light/dark. Sign up, forgot password, continue as guest, Terms and Privacy from footer. View Files (browser.php) for project listing.

flutter run – default device; flutter run -d chrome for web; flutter build web outputs to build/web/.
Login: enter email (valid format) and password (6+ chars); Sign in or Continue as guest.
Live Demo link – points to build/web/index.html when built; Download zip for full source.
Author: RSK World | rskworld.in – free Flutter Login UI; contact for customization or integration.

Project Features

Login, sign up, forgot password, home screens; light/dark/system theme; email and password validation; password strength indicator; social login buttons (UI); Terms and Privacy screens; continue as guest; remember me; haptic feedback; fade/slide animations; Material 3; responsive layout.

Screens: Login (form, validation, guest), Sign Up (name, email, password, confirm, terms), Forgot Password, Home (quick actions, settings, logout).
Theme: MaterialApp theme and darkTheme; themeMode in state; toggle in app bar and Settings.
Widgets: SocialLoginButton, PasswordStrengthIndicator; private _HeaderSection, _FormCard, _SocialSection, _FooterLinks.
Flutter 3+, Dart 3+, Material 3 – modern login UI template for learning or integration.

Credits & Acknowledgments

Flutter Login UI by RSK World. Beautiful login and sign-up screens with validation, theme toggle, and social login UI for learning Flutter and Material 3.

Flutter Login UI – login, sign up, forgot password, home, theme, validation, social buttons. Free for learning and integration.
RSK World – Project creator and educational platform for UI/UX and Flutter projects.
Author: Molla Samser (Founder - RSK World). Website: https://rskworld.in. Email: help@rskworld.in | Phone: +91 93305 39277. Address: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India.
Flutter and Dart by Google. Material Design 3. Icons: Material Icons (Cupertino). © 2026 RSK World. Flutter Login UI – free source code.

Support & Contact

For Flutter Login UI customization or integration help, please contact us.

Email: help@rskworld.in – for Flutter Login UI customization, Flutter/Dart questions, or theme integration.
Phone: +91 93305 39277 – direct contact for support, custom screens, or licensing.
Website: RSKWORLD.in – more free UI/UX and Flutter projects by RSK World.
Location: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India – RSK World base for development and support.
Author: Molla Samser (Founder, RSK World) – creator of Flutter Login UI and other educational projects.
Flutter Login UI – pubspec and source code included for features, structure, and usage.
Technical Support Available – get help with Flutter setup, screens, or Material 3 theming.
Feature Requests Welcome – suggest new login/sign-up flows or widgets for future demos.