Skip to main content

How to Render Custom UserView in Post

Introduction​

In this guide, you'll learn how to customize the user view in Post widgets using the LikeMinds Feed Flutter SDK. Specifically, we'll show you how to modify the User Profile Picture widget within the post header to match your application's design. This customization involves using the LMFeedPostHeader and LMFeedPostWidget components to replace the default profile picture with your own custom widget.

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​

The profilePicture is a part of the LMFeedPostHeader widget. To customize it, you need to pass a headerBuilder when customizing the LMFeedPostWidget using the postBuilder in LMFeedScreen.

To create an instance of LMFeedScreen and customize the post widget according to your UI requirements, follow these steps:

Step 1: Customize the Post Header​

Create an instance of LMFeedScreen, provide a postBuilder to customize the post widget according to your UI requirements. Here’s how you can achieve this:

// creating instance of `LMFeedScreen`
final LMFeedScreen feedScreen = LMFeedScreen(
  // postBuilder to customize post ui
  postBuilder: (context, postWidget, postData) {
    // copy with method return a copy of post widget with overriding the passed value
    return postWidget.copyWith(
      // header builder to customize post header ui
      headerBuilder: (context, headerWidget, postData) {
        // copy with method return a copy of post header widget with overriding the passed value
        return headerWidget.copyWith(
          // change profile picture to Flutter's CircleAvatar Widget
          profilePicture: CircleAvatar(
            backgroundImage: NetworkImage(
              postData.user.imageUrl ?? "",
            ),
          )
        );
      },
    );
  },
);

Step 2: Navigation to Feed Screen​

Navigate to LMFeedScreen using Flutter's Navigator class

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

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

To explore all available customizations for the post widget refer to the LMFeedPostHeader and LMFeedPostWidget documentation.