How to Build a Content Tagging System in FlutterFlow

In FlutterFlow's Firestore panel (left sidebar → Firestore), open your content collection — let's call it articles. Add a new field named tags with type String Array. This single field stores all tag slugs for that article, like ['flutter', 'firebase', 'tutorial']. Next, create a new top-level collection named tags. Each document uses the tag slug as the document ID (e.g., 'flutter-tips') and has three fields: name (String — display name like 'Flutter Tips'), slug (String — URL-safe identifier like 'flutter-tips'), and count (Integer — number of articles using this tag). This two-collection approach keeps queries fast and storage minimal.

On your article list or detail page, add a Container widget to hold the tag cloud. Inside it, add a Generate Dynamic Children widget (or in newer FlutterFlow versions, a Builder widget with a list) pointed at the tags Array field from your article document. For each tag string in the array, generate a Chip widget. Set the Chip's label to the current tag value, background color to your brand color with low opacity, and text color to your brand primary. Wrap the entire list of chips in a Wrap widget with runSpacing: 8 and spacing: 8 so chips flow naturally to the next line when the row fills up.

On your article list page, add a Page State variable named activeTag (String, default empty). Your article list query should use a Conditional Filter: when activeTag is not empty, add a Firestore filter on the tags field using the 'Array Contains' operator with activeTag as the value. When activeTag is empty, show all articles without the filter. In FlutterFlow's Query Collection dialog, click 'Filter', select the tags field, choose 'Array Contains', and bind the value to activeTag. Add a 'Clear Filter' button that resets activeTag to empty to show all content again.

When creating or editing an article, users need to select existing tags and optionally create new ones. Create a Reusable Component named TagPickerComponent. Inside it, add a Query Collection on the tags collection ordered by count descending to show most-used tags first. Display each tag as a selectable Chip — when tapped, add its slug to a Component State variable named selectedTags (String Array). Show selected tags in a second Wrap widget at the top with an X button to remove them. Add a text field at the bottom for typing new tag names, and a Custom Action that creates the new tag document in Firestore when the user taps Add.

Tag counts keep the tag cloud sorted by popularity. When a user saves an article with tags, create a Custom Action named updateTagCounts. This action takes two lists: addedTags and removedTags (String Arrays). For each tag in addedTags, update the corresponding tags document using FieldValue.increment(1). For each tag in removedTags, use FieldValue.increment(-1). If creating a new tag for the first time, use set() with merge: true to create the document with count: 1. Call this action from both the Create Article and Edit Article flows, passing the difference between the old and new tag arrays.

1// Custom Action: updateTagCounts
2import 'package:cloud_firestore/cloud_firestore.dart';
3
4Future<void> updateTagCounts({
5  required List<String> addedSlugs,
6  required List<String> removedSlugs,
7}) async {
8  final batch = FirebaseFirestore.instance.batch();
9
10  for (final slug in addedSlugs) {
11    final ref = FirebaseFirestore.instance.collection('tags').doc(slug);
12    batch.set(
13      ref,
14      {'count': FieldValue.increment(1)},
15      SetOptions(merge: true),
16    );
17  }
18
19  for (final slug in removedSlugs) {
20    final ref = FirebaseFirestore.instance.collection('tags').doc(slug);
21    batch.update(ref, {'count': FieldValue.increment(-1)});
22  }
23
24  await batch.commit();
25}