How to Create a Custom Landing Page with Dynamic Content in FlutterFlow

In Firestore, create two collections. The first is landing_sections with fields: sectionType (String — 'hero', 'features', 'testimonials', 'cta'), order (Integer — controls display sequence), isActive (Boolean — toggle sections on/off), headline (String), subheadline (String), bodyText (String), ctaLabel (String), ctaUrl (String), imageUrl (String), items (Array of Maps — for features list or testimonials). The second collection is landing_settings with a single document (ID: config) containing: appName (String), primaryColor (String hex), logoUrl (String), footerText (String), contactEmail (String). In FlutterFlow's Firestore panel, import both schemas and create Document Types. Create three initial landing_sections documents with sectionType hero (order 1), features (order 2), and cta (order 3).

In FlutterFlow, open the Components panel and create four components. The first component is HeroSection — add a full-width Column with a large Text widget bound to the headline parameter, a smaller Text for subheadline, a body Text, and a Button bound to ctaLabel whose On Tap action navigates to ctaUrl. The second component is FeaturesSection — add a headline Text and a GridView with 2 columns. Inside the GridView, show each item's icon (from items[].icon), title (items[].title), and description (items[].description). The third component is TestimonialsSection — a horizontal ListView of cards each showing items[].quote and items[].author. The fourth component is CTASection — a gradient background Column with headline, bodyText, and a prominent Button. Each component accepts the full landing_sections Document as a parameter.

Create a new page called LandingPage. Add a Backend Query at the page level that queries the landing_sections collection ordered by the order field (ascending) with an isActive equals true filter. This ensures sections appear in the correct order and deactivated sections are hidden. Add a SingleChildScrollView containing a Column. Inside the Column, add a ListView or use Generate Dynamic Children to iterate over the query results. For each section, use a Conditional Builder (or if-else action) based on the sectionType field to render the appropriate component: if sectionType equals 'hero' show HeroSection, if 'features' show FeaturesSection, if 'testimonials' show TestimonialsSection, if 'cta' show CTASection. Pass the full section document to the component.

Create a new page called AdminEditor. Protect it with an On Page Load action that checks if currentUser.email is in an admin allowlist stored in landing_settings — if not, navigate back to Home. Add a Backend Query streaming all landing_sections documents. Display them in a ListView. Each item shows the sectionType, order number, and an isActive Toggle. Tapping a section opens a Bottom Sheet with TextFields pre-filled with the section's headline, subheadline, bodyText, ctaLabel, ctaUrl, and imageUrl values. The Save button fires a Firestore Update Document action. Add a New Section button at the top that opens a creation dialog where the admin picks a sectionType, sets the order, and writes a new document.

To make the admin page more powerful, add drag-and-drop section reordering. Create a Custom Widget named ReorderableSectionList using Flutter's built-in ReorderableListView widget. The widget accepts a list of section documents and an onReorder callback. When the user drags sections to reorder them, onReorder fires with the old and new indices. In the callback, calculate new order values and write them back to Firestore using a batch update — update each moved section's order field. In FlutterFlow, place the ReorderableSectionList Custom Widget on the AdminEditor page replacing the standard ListView.

1// Custom Widget: ReorderableSectionList
2// Accepts: sections (List<dynamic>), onReorder callback
3import 'package:flutter/material.dart';
4
5class ReorderableSectionList extends StatefulWidget {
6  final List<dynamic> sections;
7  final Future<dynamic> Function(int oldIndex, int newIndex) onReorder;
8  final double width;
9  final double height;
10
11  const ReorderableSectionList({
12    Key? key,
13    required this.sections,
14    required this.onReorder,
15    required this.width,
16    required this.height,
17  }) : super(key: key);
18
19  @override
20  State<ReorderableSectionList> createState() => _State();
21}
22
23class _State extends State<ReorderableSectionList> {
24  late List<dynamic> _sections;
25
26  @override
27  void initState() {
28    super.initState();
29    _sections = List.from(widget.sections);
30  }
31
32  @override
33  Widget build(BuildContext context) {
34    return SizedBox(
35      width: widget.width,
36      height: widget.height,
37      child: ReorderableListView(
38        onReorder: (oldIndex, newIndex) {
39          setState(() {
40            if (newIndex > oldIndex) newIndex--;
41            final item = _sections.removeAt(oldIndex);
42            _sections.insert(newIndex, item);
43          });
44          widget.onReorder(oldIndex, newIndex);
45        },
46        children: _sections.map((s) {
47          final data = s.data() as Map<String, dynamic>? ?? {};
48          return ListTile(
49            key: ValueKey(s.id),
50            leading: const Icon(Icons.drag_handle),
51            title: Text(data['sectionType'] ?? 'Unknown'),
52            subtitle: Text('Order: ${data['order'] ?? 0}'),
53          );
54        }).toList(),
55      ),
56    );
57  }
58}