Skip to main content

Post Detail Screen

Introduction​

The Post Detail Screen (LMFeedPostDetailScreen) provides an interface for displaying the details of a specific post. It allows customization of the appearance and behavior using various builders and styles.

1. LMFeedPostDetailScreen Widget​

File Location:
post_detail_screen.dart

Class Declaration​

class LMFeedPostDetailScreen extends StatefulWidget {
  /// A screen widget that displays the details of a specific post.
  const LMFeedPostDetailScreen({
    super.key,
    required this.postId,
    this.postBuilder,
    this.appBarBuilder,
    this.commentBuilder,
    this.bottomTextFieldBuilder,
    this.commentSeparatorBuilder,
    this.onPostTap,
    this.onLikeClick,
    this.onCommentClick,
    this.openKeyboard = false,
    this.settings,
    this.commentListBuilder,
  });

  @override
  State<LMFeedPostDetailScreen> createState() => _LMFeedPostDetailScreenState();
}

Key Parameters​

  1. key (Key?, optional): A key to uniquely identify the widget.
  2. postId (String, required): The ID of the post to be displayed.
  3. postBuilder (LMFeedPostWidgetBuilder?, optional): Custom builder for the post widget.
  4. appBarBuilder (LMFeedAppBarBuilder?, optional): Custom builder for the app bar.
  5. commentBuilder (LMFeedPostCommentBuilder?, optional): Custom builder for the comments.

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

2. LMFeedPostDetailBuilderDelegate​

File Location:
builder.dart

Class Declaration​

class LMFeedPostDetailBuilderDelegate extends LMFeedWidgetBuilderDelegate {
  const LMFeedPostDetailBuilderDelegate();
}

The LMFeedPostDetailBuilderDelegate allows developers to customize the post content, comments, and actions specifically for the post detail screen.

Methods in LMFeedPostDetailBuilderDelegate​

  1. postContentBuilder
    Definition: Builds the widget for displaying post content.
    Purpose: Customizes the style and layout of post content.

    Usage Example:

    @override
    Widget postContentBuilder(BuildContext context, String content) {
      // Return a custom widget for displaying post content
      return Text(content);
    }

  2. commentBuilder
    Definition: Builds the widget for displaying comments on the post.
    Purpose: Customizes the appearance and behavior of comments.

    Usage Example:

    @override
    Widget commentBuilder(BuildContext context, String comment) {
      // Return a custom widget for displaying comments
      return ListTile(
        title: Text(comment),
      );
    }

  3. actionButtonBuilder
    Definition: Builds the action buttons for the post detail screen.
    Purpose: Provides a way to customize the action buttons.

    Usage Example:

    @override
    Widget actionButtonBuilder(BuildContext context) {
      // Return a custom action button widget
      return IconButton(
        icon: Icon(Icons.thumb_up),
        onPressed: () => likePost(),
      );
    }

Remaining Methods​

Explore the complete list of methods here.

3. LMFeedPostDetailSetting​

File Location:
settings.dart

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

4. LMFeedPostDetailStyle​

File Location:
style.dart

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

5. LMFeedPostDetailConfig​

File Location:
config.dart

Class Declaration​

class LMFeedPostDetailConfig {
  final LMFeedPostDetailBuilderDelegate builder;
  final LMFeedPostDetailSetting setting;
  final LMFeedPostDetailStyle style;

  const LMFeedPostDetailConfig({
    this.builder = const LMFeedPostDetailBuilderDelegate(),
    this.setting = const LMFeedPostDetailSetting(),
    this.style = const LMFeedPostDetailStyle(),
  });
}

Usage Example: Injecting Custom Configuration​

  1. Create a Custom Builder:

    class CustomPostDetailBuilder extends LMFeedPostDetailBuilderDelegate {
      @override
      Widget postContentBuilder(BuildContext context, String content) {
        return Text('Custom Post Content: $content');
      }
    }

  2. Pass Custom Style or Setting along with Builder:

    final customStyle = LMFeedPostDetailStyle();
    final customSetting = LMFeedPostDetailSetting();

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

    final postDetailConfig = LMFeedPostDetailConfig(
      builder: CustomPostDetailBuilder(),
      setting: customSetting,
      style: customStyle,
    );

  4. Initialize with Custom Config:

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

6. Summary​

The Post Detail Screen provides a user interface for displaying the details of a specific post. Developers can customize components like post content, comments, and action buttons using the LMFeedPostDetailBuilderDelegate. Configuration options are encapsulated in LMFeedPostDetailConfig, enabling seamless integration and customization tailored to specific design and functional requirements.