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 thecopyWith
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 LMFeedSocialScreen
.
To create an instance of LMFeedSocialScreen
and customize the post widget according to your UI requirements, follow these steps:
Step 1: Customize the Post Header
Create an instance of LMFeedSocialScreen
, provide a postBuilder
to customize the post widget according to your UI requirements. Here’s how you can achieve this:
// creating instance of `LMFeedSocialScreen`
final LMFeedSocialScreen feedScreen = LMFeedSocialScreen(
// 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 LMFeedSocialScreen
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.