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. likeTileBuilder
    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 likeTileBuilder(BuildContext context, int index, LMUserViewData user,
         LMFeedLikeTile likeTile) {
       return likeTile;
     }

  2. appBarBuilder
    Definition: AppBar builder for the Like Screen
    Purpose: Customizes the appearance and behavior App Bar.

    Usage Example:

    PreferredSizeWidget appBarBuilder(
     BuildContext context,
     LMFeedAppBar appBar,
    ) {
     return appBar.copyWith();
    }

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 likeTileBuilder(BuildContext context, int index, LMUserViewData user,
         LMFeedLikeTile likeTile) {
       return likeTile.copyWith();
     }
    }

  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.