How to Create a Custom Social Media Profile in FlutterFlow

Create the profile header using a Stack widget. Set the Stack's height to 200px. Add a first child: an Image widget spanning the full Stack width — this is the cover photo. Bind it to the user's coverPhotoUrl field; set a gradient color fallback if the field is empty. Add a second child: a Column positioned at the bottom of the Stack using the Stack's alignment property. Inside the Column, add a CircleImage widget for the avatar (80px diameter, white border 3px, shadow). Bind it to the user's photoUrl field. Position the CircleImage so it overlaps the cover photo bottom edge by adding a negative top margin of -40px on the Column's container. Place the Stack inside a Column — below it add the display name, username, and stats row.

Below the Stack header, add a Row widget with MainAxisAlignment set to spaceEvenly. Inside the Row, create three identical stat Column widgets: each Column has a Text widget for the count (bold, 20px font) and a Text widget for the label ('Posts', 'Followers', 'Following', 14px grey). Bind the Followers count to the user document's followerCount field (Integer), Following count to followingCount, and Posts to postCount. Add an InkWell to each stat Column so tapping 'Followers' navigates to a Followers list page and tapping 'Following' navigates to a Following list page — this is expected behavior users will look for.

Create a Custom Action called 'toggleFollow' that takes the target user's ID as a parameter. The action checks if the current user already follows the target, then either follows or unfollows atomically using a Firestore batch write. The batch updates: (1) the current user's followingCount +1/-1 and adds/removes the target user from a 'following' subcollection, (2) the target user's followerCount +1/-1 and adds/removes the current user from a 'followers' subcollection. A batch write ensures both updates succeed or both fail — you never have a state where user A follows user B but B's followerCount wasn't incremented.

1import 'package:cloud_firestore/cloud_firestore.dart';
2
3Future<bool> toggleFollow(
4  String currentUserId,
5  String targetUserId,
6) async {
7  final firestore = FirebaseFirestore.instance;
8  final followingRef = firestore
9      .collection('users')
10      .doc(currentUserId)
11      .collection('following')
12      .doc(targetUserId);
13
14  final followDoc = await followingRef.get();
15  final isCurrentlyFollowing = followDoc.exists;
16  final batch = firestore.batch();
17
18  final currentUserRef = firestore.collection('users').doc(currentUserId);
19  final targetUserRef = firestore.collection('users').doc(targetUserId);
20  final followerRef = firestore
21      .collection('users')
22      .doc(targetUserId)
23      .collection('followers')
24      .doc(currentUserId);
25
26  if (isCurrentlyFollowing) {
27    // Unfollow
28    batch.delete(followingRef);
29    batch.delete(followerRef);
30    batch.update(currentUserRef,
31        {'followingCount': FieldValue.increment(-1)});
32    batch.update(targetUserRef,
33        {'followerCount': FieldValue.increment(-1)});
34  } else {
35    // Follow
36    batch.set(followingRef, {'followedAt': FieldValue.serverTimestamp()});
37    batch.set(followerRef, {'followedAt': FieldValue.serverTimestamp()});
38    batch.update(currentUserRef,
39        {'followingCount': FieldValue.increment(1)});
40    batch.update(targetUserRef,
41        {'followerCount': FieldValue.increment(1)});
42  }
43
44  await batch.commit();
45  // Returns true if now following, false if now unfollowed
46  return !isCurrentlyFollowing;
47}

Add a Follow/Unfollow button below the bio text. To check follow state, create a Firestore query checking if a document exists at users/{currentUserId}/following/{profileUserId}. Use this as a condition to show either a filled 'Following' button or an outlined 'Follow' button. Use a Page State boolean variable 'isFollowing' initialized by the Firestore existence check. When the toggleFollow action completes, update the page state variable with the returned boolean. This gives instant UI feedback without waiting for Firestore to re-query. Hide the Follow button entirely when viewing your own profile (Conditional: currentUserUID != profileUserId).

Below the follow button and bio, add a TabBar widget with three tabs: Posts, Likes, About. For the Posts tab: a GridView with 3 columns showing post thumbnail images, queried from a 'posts' collection filtered by userId == profileUserId, ordered by createdAt descending. For the Likes tab: a similar GridView filtered to posts where userId matches posts the user has liked (store liked post IDs in a likedPosts subcollection). For the About tab: a Column showing additional profile info — location, website link (launches browser), joined date, and interests. Use ListView instead of GridView for About to handle variable content length.