Skip to main content

How to Render Custom UserView in Comment?

Introduction​

In this guide, you'll learn how to customize the user view in comment widgets using the LikeMinds Feed Flutter SDK. Specifically, we'll show you how to modify the User Profile Picture widget within the comment widget to match your application's design.

Prerequisites​

Before you begin, ensure the following:

  • LikeMinds Feed Flutter SDK: The SDK must be properly installed and initialized in your Flutter project. Refer to the installation guide if needed.
  • Feed Enabled: Ensure that Feed is enabled on the dashboard for your project.
  • Basic Understanding of Flutter Widgets: Familiarity with Flutter widgets and layout concepts.
  • Knowledge of Builder Pattern: Understanding of the builder pattern in Dart, as it is used to customize and create widgets dynamically.
  • Familiarity with copyWith Method: Knowledge of the copyWith method, which allows you to create modified copies of objects while retaining their original properties.

Steps​

Step 1: Customize Comment Widget​

Create an instance of LMFeedPostDetailScreen and provide commentBuilder to customize the comment widget according to your UI requirements. Here’s how you can achieve this:

// post details screen widget to render comments
final Widget postDetailScreen = LMFeedPostDetailScreen(
  postId: "post_id", // replace with the postId
  // customize comment widget using commentBuilder
  commentBuilder: (context, commentWidget, commentData) {
    // return comment widget with your custom user profile Widget
    return commentWidget.copyWith(
      // change profile picture to Flutter's CircleAvatar Widget
        profilePicture: CircleAvatar(
            backgroundImage: NetworkImage(
              postData.user.imageUrl ?? "",
            ),
        )
    );
  },
);

Step 2: Navigation to Feed Screen​

Navigate to LMFeedPostDetailScreen using Flutter's Navigator class

// create the route to feed screen
MaterialPageRoute route = MaterialPageRoute(
      builder: (context) => postDetailScreen,
);

// navigate to the feed screen
Navigator.of(context).push(route);

To explore all available customizations for the comment widget refer to the LMFeedCommentWidget documentation.