How to Create a Dynamic User Profile Customization Feature in FlutterFlow

Open the Firestore panel in FlutterFlow (left sidebar → Firestore icon). Select your 'users' collection and add the following fields to your user document schema: 'displayName' (String), 'avatarUrl' (String), 'bio' (String), 'accentColor' (String, stores hex like '#FF5733'), 'interests' (String Array), 'customFields' (Map, for user-defined key-value pairs), 'privacySettings' (Map, keys match field names, values are booleans), and 'profileComplete' (Double, 0.0-1.0). Using a Map for both customFields and privacySettings means you execute a single Firestore read to get everything, avoiding the multi-read penalty that kills performance on profile screens.

Create a Stack widget at the top of your profile page. Inside it, place a CircleImage widget bound to the 'avatarUrl' Firestore field. Add a second widget (a semi-transparent Container with a camera Icon) positioned at the bottom-right using an Align widget set to bottomRight. Add an OnTap Action Flow to the overlay Container: Action 1 — Upload Media (Image type, from gallery or camera), Action 2 — Upload File to Firebase Storage (path: 'avatars/{currentUserUid}'), Action 3 — Update Firestore Document (users/{currentUserUid}, set avatarUrl to the returned download URL). Wrap the entire Stack in a GestureDetector so tapping anywhere on the avatar also triggers the flow.

Below the avatar, add a Text widget labeled 'Your Interests'. Create a variable called 'selectedInterests' as a Page State variable of type String List. Add a Wrap widget (found under Layout widgets) — this allows chips to flow across multiple lines. Inside the Wrap, use a Builder component looping over a hard-coded list of interest options (e.g., Tech, Design, Gaming, Travel, Food, Fitness, Music, Books). For each item, place a ChoiceChip widget. Set the chip's 'selected' condition to: selectedInterests contains currentItem. Set the chip's onSelected Action to toggle the value — if selected, remove from list; if not, add to list. On the Save button tap, update the Firestore 'interests' field with the selectedInterests Page State variable.

Add a 'Theme Color' row to your settings section with a circular color preview Container. Create a Custom Action named 'showColorPicker'. In FlutterFlow's Custom Code editor, add the flutter_colorpicker package reference in pubspec.yaml, then write the action. The action should show a dialog containing the ColorPicker widget from that package, accept the initial color as a parameter, and return the selected hex string. Call this Custom Action on tap of the color preview Container. On completion, update App State variable 'userAccentColor' (String) with the result, then update Firestore document field 'accentColor'. Apply the App State accent color to key UI elements via conditional styling.

1// Custom Action: showColorPicker
2import 'package:flutter_colorpicker/flutter_colorpicker.dart';
3
4Future<String> showColorPicker(
5  BuildContext context,
6  String initialHex,
7) async {
8  Color pickedColor = Color(
9    int.parse(initialHex.replaceFirst('#', '0xFF')),
10  );
11  await showDialog(
12    context: context,
13    builder: (ctx) => AlertDialog(
14      title: const Text('Pick accent color'),
15      content: SingleChildScrollView(
16        child: ColorPicker(
17          pickerColor: pickedColor,
18          onColorChanged: (c) => pickedColor = c,
19          hexInputBar: true,
20        ),
21      ),
22      actions: [
23        TextButton(
24          onPressed: () => Navigator.of(ctx).pop(),
25          child: const Text('Done'),
26        ),
27      ],
28    ),
29  );
30  return '#${pickedColor.value.toRadixString(16).substring(2).toUpperCase()}';
31}

For each profile section (bio, interests, customFields), add a small Toggle widget to the right of the section header. Create a Page State Map variable called 'privacyMap' and initialize it from the Firestore 'privacySettings' Map field on page load. Each Toggle's initial value should read from privacyMap[fieldName]. On toggle change, update the privacyMap entry for that field. On save, write the entire privacyMap back to the Firestore 'privacySettings' Map field in one update operation. On the public-facing profile view page, wrap each section in a Visibility widget that checks: privacySettings[fieldName] == true before rendering.

Add a LinearProgressIndicator widget near the top of the edit profile page. Create a Custom Function named 'calculateProfileComplete' that accepts the profile fields as parameters and returns a Double between 0.0 and 1.0. Assign 1 point each to: displayName not empty, avatarUrl not empty, bio not empty, interests length greater than 0, at least one customField, and accentColor not default. Divide total points by 6. Call this function whenever any field changes and update both the local Page State variable and the Firestore 'profileComplete' field. Display the percentage as a Text widget above the progress bar ('Profile 67% complete').

1// Custom Function: calculateProfileComplete
2double calculateProfileComplete(
3  String displayName,
4  String avatarUrl,
5  String bio,
6  List<String> interests,
7  dynamic customFields,
8  String accentColor,
9) {
10  int score = 0;
11  if (displayName.trim().isNotEmpty) score++;
12  if (avatarUrl.isNotEmpty) score++;
13  if (bio.trim().isNotEmpty) score++;
14  if (interests.isNotEmpty) score++;
15  if (customFields != null &&
16      (customFields as Map).isNotEmpty) score++;
17  if (accentColor != '#6366F1') score++;
18  return score / 6.0;
19}