Skip to main content

Like Screen

Introduction​

The Like Screen (LMFeedLikeScreen) provides an interface for displaying the users who have liked a specific post. It allows customization of the appearance and behavior using various builders and styles.

1. LMFeedLikeScreen Widget​

File Location:
likes_screen.dart

Class Declaration​

class LMFeedLikesScreen extends StatefulWidget {
  static const String route = "/likes_screen";

  /// The ID of the post for which likes are to be displayed.
  final String postId;

  /// Indicates if the likes are for a comment.
  final bool isCommentLikes;

  /// The ID of the comment for which likes are to be displayed (if applicable).
  final String? commentId;

  /// The source of the widget.
  final LMFeedWidgetSource? widgetSource;

  /// A screen widget that displays the list of users who liked a post or comment.
  const LMFeedLikesScreen({
    super.key,
    this.isCommentLikes = false,
    required this.postId,
    this.commentId,
    this.widgetSource,
  });

  @override
  State<LMFeedLikesScreen> createState() => _LMFeedLikesScreenState();
}

Key Parameters​

  1. key (Key?, optional): A key to uniquely identify the widget.
  2. postId (String, required): The ID of the post for which likes are to be displayed.
  3. isCommentLikes (bool, optional): Indicates if the likes are for a comment. Defaults to false.
  4. commentId (String?, optional): The ID of the comment for which likes are to be displayed (if applicable).
  5. widgetSource (LMFeedWidgetSource?, optional): The source of the widget.

For the complete source code, refer to the GitHub link.

2. LMFeedLikeBuilderDelegate​

File Location:
builder.dart

Class Declaration​

class LMFeedLikeBuilderDelegate extends LMFeedWidgetBuilderDelegate {
  const LMFeedLikeBuilderDelegate();
}

The LMFeedLikeBuilderDelegate allows developers to customize the user list item and empty state specifically for the like screen.

Methods in LMFeedLikeBuilderDelegate​

  1. userListItemBuilder
    Definition: Builds the widget for user list items in the like screen.
    Purpose: Customizes the style and layout of user list items.

    Usage Example:

    @override
    Widget userListItemBuilder(BuildContext context, String userName) {
      // Return a custom widget for displaying user list items
      return ListTile(
        title: Text(userName),
        subtitle: Text('Custom subtitle for $userName'),
      );
    }

  2. emptyStateWidget
    Definition: Builds the widget for the empty state in the like screen.
    Purpose: Customizes the appearance and behavior of the empty state.

    Usage Example:

    @override
    Widget emptyStateWidget(BuildContext context) {
      // Return a custom widget for the empty state
      return CustomEmptyStateWidget();
    }

  3. loaderWidget
    Definition: Builds the loader widget for the like screen.
    Purpose: Provides a way to customize the loader.

    Usage Example:

    @override
    Widget loaderWidget(BuildContext context) {
      // Return a custom loader widget
      return CustomLoader();
    }

Remaining Methods​

Explore the complete list of methods here.

3. LMFeedLikeSetting​

File Location:
settings.dart

class LMFeedLikeSetting {
  const LMFeedLikeSetting();
}
  • Purpose: Provides configuration settings for the Like Screen. No additional fields or methods are currently defined.

4. LMFeedLikeStyle​

File Location:
style.dart

class LMFeedLikeStyle {
  const LMFeedLikeStyle();
}
  • Purpose: Defines styling options for the Like Screen. No fields or methods are currently defined.

5. LMFeedLikeConfig​

File Location:
config.dart

Class Declaration​

class LMFeedLikeConfig {
  final LMFeedLikeBuilderDelegate builder;
  final LMFeedLikeSetting setting;
  final LMFeedLikeStyle style;

  const LMFeedLikeConfig({
    this.builder = const LMFeedLikeBuilderDelegate(),
    this.setting = const LMFeedLikeSetting(),
    this.style = const LMFeedLikeStyle(),
  });
}

Usage Example: Injecting Custom Configuration​

  1. Create a Custom Builder:

    class CustomLikeBuilder extends LMFeedLikeBuilderDelegate {
      @override
      Widget userListItemBuilder(BuildContext context, String userName) {
        return ListTile(
          title: Text(userName),
          subtitle: Text('Custom subtitle for $userName'),
        );
      }
    }

  2. Pass Custom Style or Setting along with Builder:

    final customStyle = LMFeedLikeStyle();
    final customSetting = LMFeedLikeSetting();

  3. Inject the Custom Builder, Style, or Setting into the Config:

    final likeConfig = LMFeedLikeConfig(
      builder: CustomLikeBuilder(),
      setting: customSetting,
      style: customStyle,
    );

  4. Initialize with Custom Config:

    LMFeedCore.instance.initialize(
      config: LMFeedConfig(
        likeConfig: likeConfig,
      ),
    );

6. Summary​

The Like Screen provides a user interface for displaying users who liked a specific post. Developers can customize components like list items, headers, and empty states using the LMFeedLikeBuilderDelegate. Configuration options are encapsulated in LMFeedLikeConfig, enabling seamless integration and customization tailored to specific design and functional requirements.