Skip to main content

How to Send Metadata in a Post to Render Custom UI

Prerequisites​

  • LikeMinds Feed Flutter SDK: Ensure the SDK is properly installed and initialized in your Flutter project. Refer to the Installation Guide.
  • Basic knowledge of Postman or equivalent API testing tools.
  • Flutter Version: Your Flutter version should be 3.19.0 or higher.

Steps to Send Metadata in a Post​

Step 1: Understanding LM Custom Widget for a Post​

A custom widget is a JSON map of custom data that you can send in a post during its creation in the attachment list. It is sent as an object of LMAttachmentViewData under the meta key in the post data.

While rendering the feed, every LMPostViewData object has a List<LMAttachmentViewData> which you can use to parse your custom data and associate a custom view with it. You can then use it to render it in the feed using the steps mentioned further in this document.

Step 2: Understanding LMAttachmentViewData​

The LMAttachmentViewData class represents media attachments for a post. It has multiple factory constructors for different scenarios. Here's a brief overview:

class LMAttachmentViewData {
    final LMMediaType attachmentType;
    final LMAttachmentMetaViewData attachmentMeta;

    // Factory constructors
    factory LMAttachmentViewData.fromAttachmentMeta({...});
    factory LMAttachmentViewData.fromMediaUrl({...});
    factory LMAttachmentViewData.fromMediaBytes({...});
    factory LMAttachmentViewData.fromMediaPath({...});
}

The class uses different factory constructors based on how you want to create the attachment:

  • fromAttachmentMeta: When you already have an LMAttachmentMetaViewData object.
  • fromMediaUrl: When you have a URL for the media.
  • fromMediaBytes: When you have the media as bytes (Uint8List).
  • fromMediaPath: When you have a local file path for the media.

The LMMediaType enum provides various media types you can use:

enum LMMediaType {
    none,
    image, // int value 1
    video, // int value 2
    document, // int value 3
    link, // int value 4
    widget, // int value 5, this is used to represent custom widget
    repost, // int value 8 or 9
    poll, // int value 6
    reel, // int value 11
}

Step 3: Create an Attachment with Metadata and Send to LMFeedComposeBloc​

The LMFeedComposeBloc bloc is responsible for managing all the attachment data while creating a post. You need to create a custom attachment with your metadata and set it in LMFeedComposeBloc by customizing the onTap parameter of the postButton of LMFeedComposeScreen or LMFeedCreateShortVideoScreen.

// Create an attachment with custom metadata
final customAttachment = LMAttachmentViewData.fromAttachmentMeta(
    attachmentType: LMMediaType.widget,
    attachmentMeta: (LMAttachmentMetaViewDataBuilder()
        ..meta({
            "title": "Custom metadata",
            "description": "Custom metadata example",
        }))
        .build(),
);
// Send to `LMFeedComposeBloc`
LMFeedComposeBloc.instance.postMedia.add(
    customAttachment,
);

Steps to Render Metadata in a Post​

Step 1: Get the Metadata​

You can get the metadata from LMPostViewData.

// Get widget type attachment from `LMPostViewData`
final customWidget = postViewData.attachments?.firstWhere(
    (attachment) => attachment.attachmentType == LMMediaType.widget,
);
// Get metadata from attachment
final customMetaData = customWidget?.attachmentMeta.meta;

Step 2: Render Metadata​

Use the above customMetaData to render the post UI according to the customizations provided in LMFeedPostWidget.

Conclusion​

By following this guide, you can send and render metadata in a post. This approach provides flexibility to tailor the messaging experience to your application's specific requirements.