How to Implement User-Defined Themes in a FlutterFlow App

In FlutterFlow, open App State (left sidebar → App State icon). Create the following variables: 'primaryColor' (String, default '#6366F1'), 'secondaryColor' (String, default '#8B5CF6'), 'fontFamily' (String, default 'Roboto'), 'isDarkMode' (Boolean, default false), 'textColor' (String, default '#1A1A2E'), 'backgroundColor' (String, default '#FFFFFF'). These App State variables are the single source of truth for the active theme throughout the app session. Mark all of them as 'Persisted' in FlutterFlow's App State panel — this enables local storage persistence so the theme survives app restarts even before Firestore loads.

Create a new page named 'Theme Settings'. Add a ListTile for 'Primary Color' — a label on the left and a circular Container on the right showing the current primaryColor from App State. Repeat for 'Secondary Color' and 'Text Color'. Add a Row for 'Dark Mode' with a label and a Toggle widget bound to the isDarkMode App State variable. Add a 'Font Style' row with a DropdownButton offering 4-6 font options (Roboto, Lato, Nunito, Playfair Display, Source Code Pro). Add a live preview section at the bottom showing a sample heading, body text paragraph, and primary button using the current App State theme values — so users see changes in real time before saving.

Create a Custom Action named 'pickColorWithValidation'. This action takes a currentHex parameter and a targetElement parameter ('primary', 'background', or 'text'). It opens the flutter_colorpicker dialog. After the user picks a color and closes the dialog, the action computes the contrast ratio between the new primary color and the current background color using the WCAG formula. If the contrast ratio is below 4.5:1 (WCAG AA standard for normal text), show a SnackBar warning: 'Low contrast — text may be hard to read. Try a darker or lighter color.' Still allow the user to keep the selection if they choose. Return the selected hex string regardless so the caller can apply it.

1// Custom Action: pickColorWithValidation
2import 'package:flutter/material.dart';
3import 'package:flutter_colorpicker/flutter_colorpicker.dart';
4
5Future<String> pickColorWithValidation(
6  BuildContext context,
7  String currentHex,
8  String backgroundHex,
9) async {
10  Color picked = _hexToColor(currentHex);
11  await showDialog(
12    context: context,
13    builder: (ctx) => AlertDialog(
14      title: const Text('Choose color'),
15      content: SingleChildScrollView(
16        child: ColorPicker(
17          pickerColor: picked,
18          onColorChanged: (c) => picked = c,
19          hexInputBar: true,
20          enableAlpha: false,
21        ),
22      ),
23      actions: [
24        TextButton(
25          onPressed: () => Navigator.pop(ctx),
26          child: const Text('Select'),
27        ),
28      ],
29    ),
30  );
31  // Validate contrast against background
32  final bg = _hexToColor(backgroundHex);
33  final ratio = _contrastRatio(picked, bg);
34  if (ratio < 4.5 && context.mounted) {
35    ScaffoldMessenger.of(context).showSnackBar(
36      SnackBar(
37        content: Text(
38          'Contrast ratio ${ratio.toStringAsFixed(1)}:1 — may be hard to read (WCAG AA requires 4.5:1)',
39        ),
40        backgroundColor: Colors.orange,
41      ),
42    );
43  }
44  return _colorToHex(picked);
45}
46
47Color _hexToColor(String hex) =>
48    Color(int.parse(hex.replaceFirst('#', '0xFF')));
49
50String _colorToHex(Color c) =>
51    '#${c.value.toRadixString(16).substring(2).toUpperCase()}';
52
53double _contrastRatio(Color fg, Color bg) {
54  final l1 = fg.computeLuminance();
55  final l2 = bg.computeLuminance();
56  final lighter = l1 > l2 ? l1 : l2;
57  final darker = l1 > l2 ? l2 : l1;
58  return (lighter + 0.05) / (darker + 0.05);
59}

Add a 'Save Theme' button to the bottom of the Theme Settings page. In the button's Action Flow: Action 1 — Update App State to apply all current selections to the App State variables (they will persist locally via persisted App State). Action 2 — Update Firestore Document (users/{currentUserUid}) with a Map field 'themePreferences' containing all theme values as key-value pairs: {primaryColor, secondaryColor, fontFamily, isDarkMode, textColor, backgroundColor}. Action 3 — Show a success Snackbar 'Theme saved'. The App State update is instant; Firestore is the backup for cross-device sync.

In your app's initial route page (or MainPage), add an On Page Load action flow. After authentication check, add a Custom Action named 'loadUserTheme'. This action reads the user's Firestore document, extracts the 'themePreferences' Map, and updates each App State variable. Because App State is persisted locally, the theme from the previous session is already applied from local storage — the Firestore fetch updates it to the latest value (in case the user changed theme on another device). This two-phase approach (local cache first, Firestore update second) eliminates the flash of default theme on launch.

1// Custom Action: loadUserTheme
2import 'package:cloud_firestore/cloud_firestore.dart';
3import 'package:firebase_auth/firebase_auth.dart';
4// Note: Update FFAppState fields using FlutterFlow's generated AppState class
5
6Future<void> loadUserTheme() async {
7  final user = FirebaseAuth.instance.currentUser;
8  if (user == null) return;
9  final doc = await FirebaseFirestore.instance
10      .collection('users')
11      .doc(user.uid)
12      .get();
13  final prefs =
14      doc.data()?['themePreferences'] as Map<String, dynamic>?;
15  if (prefs == null) return;
16  // Update FlutterFlow App State variables
17  // (use FFAppState().update() in exported code)
18  FFAppState().update(() {
19    if (prefs['primaryColor'] != null)
20      FFAppState().primaryColor = prefs['primaryColor'];
21    if (prefs['secondaryColor'] != null)
22      FFAppState().secondaryColor = prefs['secondaryColor'];
23    if (prefs['fontFamily'] != null)
24      FFAppState().fontFamily = prefs['fontFamily'];
25    if (prefs['isDarkMode'] != null)
26      FFAppState().isDarkMode = prefs['isDarkMode'];
27    if (prefs['backgroundColor'] != null)
28      FFAppState().backgroundColor = prefs['backgroundColor'];
29  });
30}