Users - social.plus

UIKit Component: User components are built on top of the social.plus SDK, providing ready-to-use user profile and relationship management UI with full data management handled automatically.

Feature Overview

The User feature in social.plus UIKit v4 provides a comprehensive suite of components designed to manage user profiles, relationships, and interactions within your application. It encompasses functionalities ranging from profile display and editing to managing blocked users and follow requests, ensuring a seamless and engaging user experience.

Key Features

User Profiles & Display

Comprehensive user profile management

User profile page with avatar, display name, and bio
User feed components with flexible feed source switching (personal, community, or combined feeds)
User profile header with relationship controls
Post creation and interaction capabilities
Comprehensive activity views across personal and community content

Profile Management

Profile editing and customization

Edit user profile details and avatar
Update display name and bio information
Profile personalization and management
Privacy settings and controls

Social Relationships

Follow system and relationship management

Follow/unfollow user interactions
Followers and following lists management
Pending follow request handling
User blocking and unblocking functionality

Privacy & Safety

User safety and privacy controls

Blocked users management
Follow request approval system
User reporting and safety features
Privacy-based content access control

Implementation Guide

User Profiles & Display
Profile Management
Social Relationships

User profile pages and feed components for displaying user information and contentUser Profile components provide comprehensive tools for displaying user information, managing user feeds, and handling user interactions within the social platform.

User Profile Page

The user profile page displays user information, follow relationships, following and followers count, manages blocked users, enables profile editing, handles follow requests, shows created post feeds, and provides post creation actions.

Features

Feature	Description
User Information	Display user name, description, following and follower count
Follow Request	User can accept or decline follow request from other users
User Feed	Display post, image and video feed posts created by the user
Post Creation	Allow user to create a post on own timeline
Other User Information	User can view other user profile and can follow/unfollow/block that user

Required Properties

Property	Type	Description
`userId`	`String`	The user ID for the profile to display

Customization Options

Config ID	Type	Description
`user_profile_page//`	Page	Customize page theme
`user_profile_page/*/back_button`	Element	Customize back button image
`user_profile_page/*/menu_button`	Element	Customize menu button image
`user_profile_page/*/user_feed_tab_button`	Element	Customize user feed tab image
`user_profile_page/*/user_image_feed_tab_button`	Element	Customize image feed tab image
`user_profile_page/*/user_video_feed_tab_button`	Element	Customize video feed tab image

Code Examples

let page = AmityUserProfilePage(userId: "user-id")
let viewController = AmitySwiftUIHostingController(rootView: page)
navigationController?.pushViewController(viewController, animated: true)

@Composable
fun composeUserProfilePage(userId: String) {
    AmityUserProfilePage(
        userId = userId
    )
}

import React from 'react';
import { AmityUiKitProvider, AmityUserProfilePage } from '@amityco/ui-kit';

const UserProfile = ({ userId }) => {
  return (
    <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={{}}
      pageBehavior={{
        AmityUserProfilePageBehavior: {
          goToEditUserPage: (context) => {
            // Navigate to edit profile page
          },
          goToBlockedUsersPage: () => {
            // Navigate to blocked users page
          },
          goToPostComposerPage: (context) => {
            // Navigate to post composer
          },
        },
      }}
    >
      <AmityUserProfilePage userId={userId} />
    </AmityUiKitProvider>
  );
};

Widget userProfilePage(String userId) {
  return AmityUserProfilePage(userId: userId);
}

User Profile Header Component

The User Profile Header component displays user information, follow relationship, following and followers count, and handles follow request acceptance or decline.

Features

Feature	Description
User Information	Display user name, description, following and follower count
Follow Request	User can accept or decline follow request from other users

Required Properties

Property	Type	Description
`user`	`AmityUser`	The user object for the profile header

Customization Options

Config ID	Type	Description
`user_profile_page/user_profile_header/*`	Component	Customize component theme
`user_profile_page/user_profile_header/follow_user_button`	Element	Customize follow button text and image
`user_profile_page/user_profile_header/following_user_button`	Element	Customize following button text and image
`user_profile_page/user_profile_header/unblock_user_button`	Element	Customize unblock button text and image
`user_profile_page/user_profile_header/user_following`	Element	Customize following count text
`user_profile_page/user_profile_header/user_follower`	Element	Customize follower count text

Code Examples

let component = AmityUserProfileHeaderComponent(user: user)
let viewController = AmitySwiftUIHostingController(rootView: component)

@Composable
fun composeUserProfileHeader(user: AmityUser) {
    AmityUserProfileHeaderComponent(
        user = user
    )
}

import React from 'react';
import { AmityUiKitProvider, AmityUserProfileHeaderComponent } from '@amityco/ui-kit';

const UserProfileHeader = ({ user }) => {
  return (
    <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={{}}
      pageBehavior={{
        AmityUserProfileHeaderComponentBehavior: {
          goToPendingFollowRequestPage: () => {
            // Navigate to pending follow requests
          },
          goToUserRelationshipPage: (context) => {
            // Navigate to relationship page
          },
        },
      }}
    >
      <AmityUserProfileHeaderComponent user={user} />
    </AmityUiKitProvider>
  );
};

Widget userProfileHeaderComponent(AmityUser user) {
  return AmityUserProfileHeaderComponent(user: user);
}

User Feed Components

User feed components display different types of content created by users, including general posts, images, and videos. The enhanced user feed now provides comprehensive activity views with the ability to switch between personal posts, community posts, or combined feeds for a complete picture of user activity across the platform.

User Feed Component

The User Feed Component displays a comprehensive list of user posts with an integrated filter dropdown to toggle between different feed sources, providing users with the ability to switch between personal posts, community posts, or a combined view.

SDK Integration: This component uses the Get User Feed API to query user posts with configurable feed sources. Refer to the API documentation for detailed implementation and privacy rules.

UIKit Features:

Feed Source Switching: Pre-built filter dropdown with three options: “All Posts” (combined), “Community Posts”, “Profile Posts”
Community Context Display: Automatic community context display (name, avatar, moderator badges) for community posts
Privacy-Aware Content: Respects user privacy settings and community visibility rules
Built-in Navigation: Navigation handlers for community profiles and original post contexts
Real-time Updates: Live synchronization of content changes across all feed sources
Comprehensive Activity View: Unified display of user activity across personal and community content

Features:

Feature	Description
Comprehensive User Activity	Display comprehensive user activity across personal and community content
Feed Source Switching	Toggle between personal posts, community posts, or combined feed view
Community Context	Show community context for posts (name, avatar, moderator badges)
Privacy-Aware Display	Respect user privacy settings and community visibility rules
Real-time Updates	Live synchronization of content changes across all feed sources

Customization Options:

Config ID	Type	Description
`user_profile_page/user_feed/*`	Component	Customize component theme
`user_profile_page/user_feed/empty_user_feed`	Element	Customize empty state text and image
`user_profile_page/user_feed/private_user_feed`	Element	Customize private feed text and image
`user_profile_page/user_feed/blocked_user_feed`	Element	Customize blocked user feed text and image

User Image Feed Component

The User Image Feed Component displays a list of images from posts created by the user, providing a visual gallery experience with navigation to original posts.Features:

Feature	Description
Image Gallery	Display user’s image posts in gallery format
Original Post Navigation	Tap on gallery images to navigate to their original posts

Customization Options:

Config ID	Type	Description
`user_profile_page/user_image_feed/*`	Component	Customize component theme
`user_profile_page/user_image_feed/empty_user_image_feed`	Element	Customize empty state text and image
`user_profile_page/user_image_feed/private_user_image_feed`	Element	Customize private feed text and image

User Video Feed Component

The User Video Feed Component displays a list of videos from posts created by the user, offering a dedicated video content experience with navigation to original posts.Features:

Feature	Description
Video Gallery	Display user’s video posts in gallery format
Original Post Navigation	Tap on gallery videos to navigate to their original posts

Customization Options:

Config ID	Type	Description
`user_profile_page/user_video_feed/*`	Component	Customize component theme
`user_profile_page/user_video_feed/empty_user_video_feed`	Element	Customize empty state text and image
`user_profile_page/user_video_feed/private_user_video_feed`	Element	Customize private feed text and image

Code Examples

// User Feed Component
let userFeed = AmityUserFeedComponent(userId: "user-id")

// User Image Feed Component
let imageFeed = AmityUserImageFeedComponent(userId: "user-id")

// User Video Feed Component
let videoFeed = AmityUserVideoFeedComponent(userId: "user-id")

let viewController = AmitySwiftUIHostingController(rootView: userFeed)

@Composable
fun composeUserFeeds(userId: String) {
    // User Feed Component
    AmityUserFeedComponent(userId = userId)

    // User Image Feed Component
    AmityUserImageFeedComponent(userId = userId)

    // User Video Feed Component
    AmityUserVideoFeedComponent(userId = userId)
}

import React from 'react';
import {
  AmityUiKitProvider,
  AmityUserFeedComponent,
  AmityUserImageFeedComponent,
  AmityUserVideoFeedComponent
} from '@amityco/ui-kit';

const UserFeeds = ({ userId }) => {
  return (
    <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={{}}
    >
      {/* User Feed Component */}
      <AmityUserFeedComponent userId={userId} />

      {/* User Image Feed Component */}
      <AmityUserImageFeedComponent userId={userId} />

      {/* User Video Feed Component */}
      <AmityUserVideoFeedComponent userId={userId} />
    </AmityUiKitProvider>
  );
};

// User Feed Component
Widget userFeedComponent(String userId) {
  return UserFeedComponent(userId: userId);
}

// User Image Feed Component
Widget userImageFeedComponent(String userId) {
  return UserImageFeedComponent(userId: userId);
}

// User Video Feed Component
Widget userVideoFeedComponent(String userId) {
  return UserVideoFeedComponent(userId: userId);
}

// User Profile Page Navigation
class CustomUserProfilePageBehavior: AmityUserProfilePageBehavior {
    override init() {
        super.init()
    }

    override func goToEditUserPage(context: AmityUserProfilePageBehavior.Context) {
        // Navigate to edit profile page
    }

    override func goToBlockedUsersPage(context: AmityUserProfilePageBehavior.Context) {
        // Navigate to blocked users page
    }

    override func goToPostComposerPage(context: AmityUserProfilePageBehavior.Context) {
        // Navigate to post composer
    }
}

// User Profile Header Navigation
class CustomUserProfileHeaderComponentBehavior: AmityUserProfileHeaderComponentBehavior {
    override func goToUserRelationshipPage(context: AmityUserProfileHeaderComponentBehavior.Context) {
        // Navigate to relationship page
    }

    override func goToPendingFollowRequestPage(context: AmityUserProfileHeaderComponentBehavior.Context) {
        // Navigate to pending follow requests
    }
}

// User Profile Page Navigation
class CustomAmityUserProfilePageBehavior : AmityUserProfilePageBehavior() {
    override fun goToEditUserPage(context: Context) {
        // Navigate to edit profile page
    }

    override fun goToBlockedUsersPage(context: Context) {
        // Navigate to blocked users page
    }

    override fun goToPostComposerPage(context: Context) {
        // Navigate to post composer
    }
}

// User Profile Header Navigation
class CustomAmityUserProfileHeaderComponentBehavior : AmityUserProfileHeaderComponentBehavior() {
    override fun goToUserRelationshipPage(context: Context) {
        // Navigate to relationship page
    }

    override fun goToPendingFollowRequestPage(context: Context) {
        // Navigate to pending follow requests
    }
}

// Navigation handled through pageBehavior props
const handleUserProfileNavigation = {
  goToEditUserPage: (context) => {
    // Navigate to edit profile page
    navigate('/profile/edit');
  },
  goToBlockedUsersPage: () => {
    // Navigate to blocked users page
    navigate('/profile/blocked-users');
  },
  goToPostComposerPage: (context) => {
    // Navigate to post composer
    navigate('/post/create');
  }
};

const handleUserHeaderNavigation = {
  goToPendingFollowRequestPage: () => {
    // Navigate to pending follow requests
    navigate('/profile/follow-requests');
  },
  goToUserRelationshipPage: (context) => {
    // Navigate to relationship page
    navigate(`/profile/${context.userId}/relationships`);
  }
};

// User Profile Page Navigation
void handleUserProfileNavigation(String action, dynamic context) {
  switch (action) {
    case 'goToEditUserPage':
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => EditUserProfilePage()),
      );
      break;
    case 'goToBlockedUsersPage':
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => BlockedUsersPage()),
      );
      break;
    case 'goToPostComposerPage':
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => PostComposerPage()),
      );
      break;
  }
}

Profile editing and user management featuresProfile Management components enable users to update their personal information, customize their profiles, and manage their account settings.

Edit User Profile Page

The Edit User Profile Page allows users to update their avatar image, display name, and about information.

Features

Feature	Description
Edit User Profile	Update avatar image, display name or about information

Required Properties

Property	Type	Description
`userId`	`String`	The user ID for the profile to edit (optional for current user)

Customization Options

Config ID	Type	Description
`edit_user_profile_page//`	Page	Customize page theme
`edit_user_profile_page/*/back_button`	Element	Customize back button image
`edit_user_profile_page/*/title`	Element	Customize page title text
`edit_user_profile_page/*/user_display_name_title`	Element	Customize display name field title
`edit_user_profile_page/*/user_about_title`	Element	Customize about field title
`edit_user_profile_page/*/update_user_profile_button`	Element	Customize update button text

Code Examples

let page = AmityEditUserProfilePage()
let viewController = AmitySwiftUIHostingController(rootView: page)
navigationController?.pushViewController(viewController, animated: true)

@Composable
fun composeEditUserProfilePage() {
    AmityEditUserProfilePage()
}

import React from 'react';
import { AmityUiKitProvider, AmityEditUserProfilePage } from '@amityco/ui-kit';

const EditUserProfile = ({ userId }) => {
  return (
    <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={{}}
    >
      <AmityEditUserProfilePage userId={userId} />
    </AmityUiKitProvider>
  );
};

Widget editUserProfilePage(String userId) {
  return AmityEditUserProfilePage(userId: userId);
}

// Profile editing typically navigates back to profile page
func handleProfileUpdateSuccess() {
    // Navigate back to user profile
    navigationController?.popViewController(animated: true)
}

func handleProfileUpdateError(error: Error) {
    // Show error alert
    let alert = UIAlertController(
        title: "Update Failed",
        message: error.localizedDescription,
        preferredStyle: .alert
    )
    alert.addAction(UIAlertAction(title: "OK", style: .default))
    present(alert, animated: true)
}

// Profile editing navigation
fun handleProfileUpdate(success: Boolean, error: String? = null) {
    if (success) {
        // Navigate back to profile
        findNavController().popBackStack()
    } else {
        // Show error message
        Toast.makeText(context, "Update failed: $error", Toast.LENGTH_SHORT).show()
    }
}

// Profile management navigation
const handleProfileManagement = {
    onUpdateSuccess: () => {
        // Navigate back to profile
        navigate(-1); // Go back
        showNotification('Profile updated successfully');
    },
    onUpdateError: (error) => {
        // Show error message
        showError(`Failed to update profile: ${error.message}`);
    }
};

// Profile editing navigation
void handleProfileUpdate(bool success, [String? error]) {
    if (success) {
        Navigator.pop(context);
        ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('Profile updated successfully')),
        );
    } else {
        ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('Update failed: ${error ?? "Unknown error"}')),
        );
    }
}

Follow system, blocked users, and relationship managementSocial Relationship components handle user-to-user connections, including following/unfollowing, blocking/unblocking, and managing follow requests.

User Relationship Page

The User Relationship Page displays lists of users following the current user and users followed by the current user, with options to manage these relationships.

Features

Feature	Description
Following list	Display a list of users that the current user is following
Follower list	Display a list of users that are following the current user
User Action	User can report or block the selected user

Required Properties

Property	Type	Description
`userId`	`String`	The user ID for the relationship page
`selectedTab`	`Tab`	The default selected tab (following or follower)

Customization Options

Config ID	Type	Description
`user_relationship_page//`	Page	Customize page theme

Code Examples

// selectedTab - .following or .follower based on the default selected tab you want
let page = AmityUserRelationshipPage(userId: "user-id", selectedTab: .following)
let viewController = AmitySwiftUIHostingController(rootView: page)
navigationController?.pushViewController(viewController, animated: true)

@Composable
fun composeUserRelationshipPage(userId: String) {
    AmityUserRelationshipPage(
        userId = userId,
        selectedTab = AmityUserRelationshipPageTab.FOLLOWING
    )
}

import React from 'react';
import {
  AmityUiKitProvider,
  AmityUserRelationshipPage,
  AmityUserRelationshipPageTabs,
} from '@amityco/ui-kit';

const UserRelationships = ({ userId }) => {
  return (
    <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={{}}
      pageBehavior={{
        AmityUserRelationshipPageBehavior: {
          goToUserProfilePage: (context) => {
            // Navigate to user profile
            navigate(`/profile/${context.userId}`);
          },
        },
      }}
    >
      <AmityUserRelationshipPage
        userId={userId}
        selectedTab={AmityUserRelationshipPageTabs.FOLLOWING}
      />
    </AmityUiKitProvider>
  );
};

Widget getUserRelationshipPage(String userId) {
  return AmityUserRelationshipPage(
    userId: userId,
    selectedTab: AmityUserRelationshipPageTab.follower
  );
}

Blocked User Page

The Blocked User Page displays a list of users blocked by the current user, with options to unblock them.

Features

Feature	Description
Blocked Users	Display a list of blocked users
Unblock User	User can unblock other users

Customization Options

Config ID	Type	Description
`blocked_users_page//`	Page	Customize page theme
`blocked_users_page/*/back_button`	Element	Customize back button image
`blocked_users_page/*/title`	Element	Customize page title text
`blocked_users_page/*/unblock_user_button`	Element	Customize unblock button text

Code Examples

let page = AmityBlockedUsersPage()
let viewController = AmitySwiftUIHostingController(rootView: page)
navigationController?.pushViewController(viewController, animated: true)

@Composable
fun composeBlockedUsersPage() {
    AmityBlockedUsersPage()
}

import React from 'react';
import { AmityUiKitProvider, AmityBlockedUserPage } from '@amityco/ui-kit';

const BlockedUsers = () => {
  return (
    <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={{}}
      pageBehavior={{
        AmityBlockedUsersPageBehavior: {
          goToUserProfilePage: (context) => {
            // Navigate to user profile
            navigate(`/profile/${context.userId}`);
          },
        },
      }}
    >
      <AmityBlockedUserPage />
    </AmityUiKitProvider>
  );
};

// The Flutter UIKit does not currently expose a standalone Blocked Users page.
// Blocked user management is handled through the SDK directly.

User Pending Follow Request Page

The User Pending Follow Request Page displays a list of users that have requested to follow the current user, with options to accept or decline requests.

Features

Feature	Description
Follow Request List	Display a list of users that have requested to follow current user
User Action	User can accept or decline follow requests

Customization Options

Config ID	Type	Description
`user_pending_follow_request_page//`	Page	Customize page theme

Code Examples

let page = AmityUserPendingFollowRequestsPage()
let viewController = AmitySwiftUIHostingController(rootView: page)
navigationController?.pushViewController(viewController, animated: true)

@Composable
fun composeUserPendingFollowRequestsPage() {
    AmityUserPendingFollowRequestsPage()
}

import React from 'react';
import { AmityUiKitProvider, AmityUserPendingFollowRequestPage } from '@amityco/ui-kit';

const PendingFollowRequests = () => {
  return (
    <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      configs={{}}
      pageBehavior={{
        AmityUserPendingFollowRequestsPageBehavior: {
          goToUserProfilePage: (context) => {
            // Navigate to user profile
            navigate(`/profile/${context.userId}`);
          },
        },
      }}
    >
      <AmityUserPendingFollowRequestPage />
    </AmityUiKitProvider>
  );
};

Widget getPendingFollowRequestPage() {
  return AmityUserPendingFollowRequestsPage();
}

// User Relationship Page Navigation
class CustomAmityUserRelationshipPageBehavior: AmityUserRelationshipPageBehavior {
    override func goToUserProfilePage(context: AmityUserRelationshipPageBehavior.Context) {
        // Navigate to user profile
        let profilePage = AmityUserProfilePage(userId: context.userId)
        let viewController = AmitySwiftUIHostingController(rootView: profilePage)
        navigationController?.pushViewController(viewController, animated: true)
    }
}

// Blocked Users Page Navigation
class CustomBlockedUserPageBehavior: AmityBlockedUsersPageBehavior {
    override func goToUserProfilePage(context: AmityBlockedUsersPageBehavior.Context) {
        // Navigate to user profile
        let profilePage = AmityUserProfilePage(userId: context.userId)
        let viewController = AmitySwiftUIHostingController(rootView: profilePage)
        navigationController?.pushViewController(viewController, animated: true)
    }
}

// Pending Follow Requests Navigation
class CustomAmityUserPendingFollowRequestsPageBehavior: AmityUserPendingFollowRequestsPageBehavior {
    override func goToUserProfilePage(context: AmityUserPendingFollowRequestsPageBehavior.Context) {
        // Navigate to user profile
        let profilePage = AmityUserProfilePage(userId: context.userId)
        let viewController = AmitySwiftUIHostingController(rootView: profilePage)
        navigationController?.pushViewController(viewController, animated: true)
    }
}

// User Relationship Page Navigation
class CustomAmityUserRelationshipPageBehavior : AmityUserRelationshipPageBehavior() {
    override fun goToUserProfilePage(context: Context) {
        // Navigate to user profile page
    }
}

// Blocked Users Page Navigation
class CustomAmityBlockedUsersPageBehavior : AmityBlockedUsersPageBehavior() {
    override fun goToUserProfilePage(context: Context) {
        // Navigate to user profile page
    }
}

// Pending Follow Requests Navigation
class CustomAmityUserPendingFollowRequestsPageBehavior : AmityUserPendingFollowRequestsPageBehavior() {
    override fun goToUserProfilePage(context: Context) {
        // Navigate to user profile page
    }
}

// Social relationship navigation workflows
const handleSocialRelationshipNavigation = {
    // User relationship navigation
    goToUserProfile: (userId) => {
        navigate(`/profile/${userId}`);
    },

    // Follow request actions
    handleFollowRequest: async (action, userId) => {
        try {
            if (action === 'accept') {
                await acceptFollowRequest(userId);
                showNotification('Follow request accepted');
            } else if (action === 'decline') {
                await declineFollowRequest(userId);
                showNotification('Follow request declined');
            }
            // Refresh the request list
            refreshFollowRequests();
        } catch (error) {
            showError(`Failed to ${action} follow request: ${error.message}`);
        }
    },

    // Block/unblock actions
    handleBlockAction: async (action, userId) => {
        try {
            if (action === 'block') {
                await blockUser(userId);
                showNotification('User blocked successfully');
            } else if (action === 'unblock') {
                await unblockUser(userId);
                showNotification('User unblocked successfully');
            }
            // Refresh appropriate lists
            refreshUserLists();
        } catch (error) {
            showError(`Failed to ${action} user: ${error.message}`);
        }
    }
};

// Social relationship navigation
class SocialRelationshipNavigation {
    // Navigate to user profile
    void goToUserProfile(String userId) {
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => AmityUserProfilePage(userId: userId),
            ),
        );
    }

    // Handle follow request actions
    Future<void> handleFollowRequest(String action, String userId) async {
        try {
            if (action == 'accept') {
                await acceptFollowRequest(userId);
                ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Follow request accepted')),
                );
            } else if (action == 'decline') {
                await declineFollowRequest(userId);
                ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Follow request declined')),
                );
            }
            // Refresh follow requests
            refreshFollowRequests();
        } catch (error) {
            ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Failed to $action follow request: $error')),
            );
        }
    }

    // Handle block/unblock actions
    Future<void> handleBlockAction(String action, String userId) async {
        try {
            if (action == 'block') {
                await blockUser(userId);
                ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('User blocked successfully')),
                );
            } else if (action == 'unblock') {
                await unblockUser(userId);
                ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('User unblocked successfully')),
                );
            }
            // Refresh user lists
            refreshUserLists();
        } catch (error) {
            ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Failed to $action user: $error')),
            );
        }
    }
}

Communities

Community Features Community profiles, setup, and member management

Community Membership

Community Member Management Member administration and community relationships

Posts & Media

Post Components User-generated content creation and management

Social Feeds

Feed Components Content display and interaction for user feeds

Comments & Reactions

Interaction Components User engagement and social interaction features

Content Moderation

Moderation Tools User safety and content moderation features

Implementation Strategy: Start with the User Profile Page as your central user experience hub, then implement the Edit Profile functionality for user personalization. Add social relationship features (follow/unfollow, blocking) based on your application’s social interaction requirements. Consider implementing follow request workflows for private accounts and ensure smooth navigation between user profiles, relationship management, and safety features. Focus on providing clear feedback for all social actions and maintain consistent user experience across profile viewing, editing, and relationship management workflows.

​Feature Overview

​Key Features

User Profiles & Display

Profile Management

Social Relationships

Privacy & Safety

​Implementation Guide

​User Profile Page

​Features

​Required Properties

​Customization Options

​Code Examples

​User Profile Header Component

​Features

​Required Properties

​Customization Options

​Code Examples

​User Feed Components

​User Feed Component

​User Image Feed Component

​User Video Feed Component

​Code Examples

​Navigation Behavior

​Edit User Profile Page

​Features

​Required Properties

​Customization Options

​Code Examples

​Navigation Behavior

​User Relationship Page

​Features

​Required Properties

​Customization Options

​Code Examples

​Blocked User Page

​Features

​Customization Options

​Code Examples

​User Pending Follow Request Page

​Features

​Customization Options

​Code Examples

​Navigation Behavior

​Related Components

Communities

Community Membership

Posts & Media

Social Feeds

Comments & Reactions

Content Moderation

Feature Overview

Key Features

Implementation Guide

User Profile Page

Features

Required Properties

Customization Options

Code Examples

User Profile Header Component

Features

Required Properties

Customization Options

Code Examples

User Feed Components

User Feed Component

User Image Feed Component

User Video Feed Component

Code Examples

Navigation Behavior

Edit User Profile Page

Features

Required Properties

Customization Options

Code Examples

Navigation Behavior

User Relationship Page

Features

Required Properties

Customization Options

Code Examples

Blocked User Page

Features

Customization Options

Code Examples

User Pending Follow Request Page

Features

Customization Options

Code Examples

Navigation Behavior

Related Components