How to Build a Personalized Dashboard With Widgets in FlutterFlow

Under each user document, create a dashboard_config subcollection or a single document with a widgetLayout field containing an ordered list of objects. Each object has: widgetType (String: weather, calendar, tasks, news, stats), isVisible (Boolean), and position (int). Seed a default config for new users via a Cloud Function on user creation. This way every user starts with a standard layout they can customize.

Create separate FlutterFlow Components for each widget type. WeatherWidget: displays current temperature and condition from a weather API call. TasksWidget: shows the top 5 pending tasks from a tasks collection query. CalendarWidget: displays today's events in a compact list. StatsWidget: shows key metrics like total orders or active users. NewsWidget: lists the latest 3 articles. Each Component manages its own Backend Query and is self-contained.

On the Dashboard page, add a Backend Query to load the user's dashboard_config. Add a Column widget and enable Generate Dynamic Children bound to the widgetLayout list filtered to isVisible == true and sorted by position. Inside the dynamic child, add a Conditional Builder checking widgetType: weather maps to WeatherWidget Component, calendar to CalendarWidget, tasks to TasksWidget, and so on. Each branch renders the matching Component.

Add a DashboardSettings page. Load the same dashboard_config. Display a ListView of all available widgets, each row showing: the widget name, a preview icon, and a Switch toggled to the isVisible value. When a Switch changes, update the corresponding entry in the widgetLayout list and save back to Firestore. Changes take effect immediately when the user returns to the dashboard.

Create a Custom Widget wrapping Flutter's ReorderableListView. The widget accepts the widgetLayout list as a parameter and renders each entry as a draggable row with a drag handle icon on the right. On reorder, the widget calls the onReorder callback which updates the position values in the list and triggers an Action Parameter callback to the parent page. The parent saves the new order to Firestore. Use ValueKey per widget type so Flutter only re-renders moved items.

1// Custom Widget: ReorderableDashboardList
2import 'package:flutter/material.dart';
3
4class ReorderableDashboardList extends StatefulWidget {
5  final List<Map<String, dynamic>> widgets;
6  final void Function(List<Map<String, dynamic>> reordered) onReorder;
7
8  const ReorderableDashboardList({
9    required this.widgets,
10    required this.onReorder,
11  });
12
13  @override
14  State<ReorderableDashboardList> createState() =>
15      _ReorderableDashboardListState();
16}
17
18class _ReorderableDashboardListState
19    extends State<ReorderableDashboardList> {
20  late List<Map<String, dynamic>> _items;
21
22  @override
23  void initState() {
24    super.initState();
25    _items = List.from(widget.widgets);
26  }
27
28  @override
29  Widget build(BuildContext context) {
30    return ReorderableListView.builder(
31      itemCount: _items.length,
32      onReorder: (oldIndex, newIndex) {
33        setState(() {
34          if (newIndex > oldIndex) newIndex--;
35          final item = _items.removeAt(oldIndex);
36          _items.insert(newIndex, item);
37          for (int i = 0; i < _items.length; i++) {
38            _items[i]['position'] = i;
39          }
40        });
41        widget.onReorder(_items);
42      },
43      itemBuilder: (context, index) {
44        final item = _items[index];
45        return ListTile(
46          key: ValueKey(item['widgetType']),
47          leading: Icon(Icons.dashboard),
48          title: Text(item['widgetType']),
49          trailing: Icon(Icons.drag_handle),
50        );
51      },
52    );
53  }
54}

Write a Cloud Function that triggers on new user creation. The function creates a dashboard_config document with a default widgetLayout: weather at position 0, stats at position 1, tasks at position 2, calendar at position 3, news at position 4, all visible. On the Dashboard page, if the config query returns empty, show a loading spinner while the Cloud Function provisions the default. This ensures every user sees a populated dashboard on first login.