RSK World - Flutter Profile & Settings UI | Profile, Preferences, Theme Picker, Language | RSK World

Profile & Edit Profile Preferences & Switch Theme & Appearance Account & Language Material 3

Flutter Profile & Settings UI is a profile and settings demo with ListTile and Switch: Profile section (avatar, name, email, bio, Edit Profile), Preferences (Notifications, Dark mode, Biometric login, Appearance with theme and 7 accent colors), Account (Privacy & security, Language with 9 options, Help & support, Sign out). Data persisted with shared_preferences. Screens: Edit Profile, About (RSK World credits), Theme picker, Privacy, Language. Widgets: SectionCard, SettingsTile, ColorThemeSelector; haptic feedback and entry animations (flutter_animate). Tech: Flutter SDK, Dart, shared_preferences, Material 3. By rskworld.in.

If you find this Flutter Profile & Settings 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 Profile & Settings UI

Profile & Edit Profile

Profile section with avatar (initials), display name, email, bio; Edit Profile button opens EditProfileScreen. Edit Profile: name, email, bio fields; avatar initials from name; save persists via SettingsService and pops with updated UserProfile. Hero tag for avatar transition.

UserProfile model: displayName, email, bio, avatarInitials; copyWith; initialsFromName().
EditProfileScreen: TextEditingControllers; Save calls SettingsService.saveProfile and Navigator.pop(updated).
ProfileSettingsScreen: _buildProfileSection with CircleAvatar, OutlinedButton Edit Profile.
HapticFeedback.mediumImpact on save; persisted with shared_preferences (JSON).

Project Structure & Screens

lib/main.dart: ProfileSettingsApp, theme from AppSettings. lib/screens: profile_settings_screen.dart, edit_profile_screen.dart, theme_picker_screen.dart, privacy_screen.dart, language_screen.dart, about_screen.dart. lib/widgets: section_card.dart, settings_tile.dart, color_theme_selector.dart. lib/services: settings_service.dart. lib/models: user_profile.dart, app_settings.dart.

main.dart – loads settings/profile on init; themeMode and seedColor from AppSettings.
ProfileSettingsScreen: Profile section, Preferences (SwitchListTile), Account (SettingsTile).
ThemePickerScreen: ColorThemeSelector grid, Dark mode switch; Apply saves and pops.
LanguageScreen: 9 languages (en, hi, bn, te, mr, ta, gu, kn, ml); selection persisted.

Theme & Material 3

Light and dark ThemeData with ColorScheme.fromSeed(seedColor from settings). Theme picker: 7 accent colors (Teal, Blue, Indigo, Purple, Green, Orange, Deep Orange). Dark mode switch on main screen and in Appearance screen. useMaterial3: true.

AppSettings: darkMode, seedColorValue (default Teal 0xFF009688); seedColor getter.
ColorThemeSelector: grid of kThemePresets; HapticFeedback.selectionClick; AnimatedContainer.
Theme applied in main.dart from _settings; onSettingsChanged updates and saves.
flutter_animate: fadeIn + slideY on profile, preferences, account sections.

Preferences & Account

Preferences: Notifications, Dark mode, Biometric login (SwitchListTile); Appearance navigates to Theme picker. Account: Privacy & security, Language (subtitle shows current), Help & support, Sign out (destructive style, SnackBar). SectionCard groups with optional title; SettingsTile for navigation rows.

SwitchListTile for notifications, dark mode, biometric; state synced with SettingsService.
SettingsTile: icon, title, subtitle, isDestructive; onSettingsTap() for haptic + action.
SectionCard: title, children; Card with margin; used for Preferences and Account.
PrivacyScreen placeholder (2FA, change password, biometric lock); AboutScreen with RSK World credits.

Widgets & Persistence

SectionCard: column with title and Card. SettingsTile: ListTile with leading icon, optional subtitle, trailing chevron or destructive style. ColorThemeSelector: GridView of color chips with check icon. SettingsService singleton: SharedPreferences for profile (JSON) and settings (bools, int, string).

SettingsService: loadSettings, saveSettings, loadProfile, saveProfile; keys for dark_mode, notifications, etc.
onSettingsTap() in section_card.dart: HapticFeedback.lightImpact + callback.
Profile and settings loaded in main _load(); passed to ProfileSettingsScreen; callbacks update parent.
Thank you / Credits: RSK World, Molla Samser, Rima Khatun; contact in var config.

What You Get

Flutter project: pubspec.yaml (flutter, shared_preferences, flutter_animate, cupertino_icons; flutter_test, flutter_lints). lib/ with models, screens, widgets, services. test/widget_test.dart. No backend; local persistence only. © 2026 RSK World.

Complete Flutter source – all Dart files; run flutter run or build web/APK.
Persistence: shared_preferences for profile and app settings; no server.
README: Profile and settings with ListTile, Switch, Material Design; RSK World.
Technologies: Flutter SDK, Dart 3+, shared_preferences, flutter_animate, Material 3. © 2026 RSK World.

Usage

Run with flutter run or open build/web/index.html after flutter build web. Edit profile from Edit Profile button; toggle notifications, dark mode, biometric; open Appearance for theme and accent color; change language; open About for credits. View Files (browser.php) for project listing.

flutter run – default device; flutter run -d chrome for web; flutter build web outputs to build/web/.
Profile: view name, email, bio; tap Edit Profile to change and save.
Live Demo link – points to build/web/index.html when built; Download zip for full source.
Author: RSK World | rskworld.in – free Flutter Profile & Settings UI; contact for customization.

Project Features

Profile (avatar, name, email, bio, Edit Profile); Preferences (Notifications, Dark mode, Biometric, Appearance); Account (Privacy, Language, Help, Sign out); shared_preferences persistence; light/dark + 7 accent colors; SectionCard, SettingsTile, ColorThemeSelector; haptic and entry animations; Material 3.

Screens: Profile & Settings home, Edit Profile, Theme picker, Privacy, Language, About.
Theme: MaterialApp theme and darkTheme; seedColor and themeMode from AppSettings.
Widgets: SectionCard, SettingsTile, ColorThemeSelector; onSettingsTap for haptic.
Flutter 3+, Dart 3+, Material 3 – profile and settings UI template for learning or integration.

Credits & Acknowledgments

Flutter Profile & Settings UI by RSK World. Profile and settings screens with ListTile, Switch, theme picker, and persistence for learning Flutter and Material 3.

Flutter Profile & Settings UI – profile, preferences, account, theme, language. Free for learning and integration.
RSK World – Project creator and educational platform for UI/UX and Flutter projects.
Author: Molla Samser (Founder - RSK World). Designer & Tester: Rima Khatun. Website: https://rskworld.in. Email: help@rskworld.in | Phone: +91 93305 39277.
Flutter and Dart by Google. Material Design 3. Icons: Material Icons (Cupertino). © 2026 RSK World. Flutter Profile & Settings UI – free source code.

Support & Contact

For Flutter Profile & Settings UI customization or integration help, please contact us.

Email: help@rskworld.in – for Flutter Profile & Settings 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 Profile & Settings UI and other educational projects.
Flutter Profile & Settings 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 settings or profile flows for future demos.