Skip to main content

Feedroom Screen

Introduction​

The Feedroom Screen (LMFeedRoomScreen) provides an interface for viewing and interacting with a specific feedroom. It supports customization of the app bar, posts, topic chips, and other components through builders and configurations.

1. LMFeedRoomScreen Widget​

File Location:
feedroom_screen.dart

Class Declaration​

class LMFeedRoomScreen extends StatefulWidget {
  /// ID of the feedroom to display.
  final String feedroomId;

  /// Builder for customizing the app bar.
  final LMFeedAppBarBuilder? appBarBuilder;

  /// Builder for customizing the posts.
  final LMFeedPostWidgetBuilder? postBuilder;

  /// Builder for customizing the topic chips.
  final LMFeedContextChipBuilder? topicChipBuilder;

  /// Builder for floating action button (e.g., create post).
  final LMFeedContextButtonBuilder? floatingActionButtonBuilder;

  /// Settings for feedroom behavior and appearance.
  final LMFeedRoomSettings? settings;

  /// Builder for the topic bar.
  final Widget Function(BuildContext)? topicBarBuilder;

  /// A screen widget for displaying a specific feedroom.
  const LMFeedRoomScreen({
    Key? key,
    required this.feedroomId,
    this.appBarBuilder,
    this.postBuilder,
    this.topicChipBuilder,
    this.floatingActionButtonBuilder,
    this.settings,
    this.topicBarBuilder,
  }) : super(key: key);

  @override
  State<LMFeedRoomScreen> createState() => _LMFeedRoomScreenState();
}

Key Parameters​

  1. feedroomId (String, required): ID of the feedroom to display.
  2. appBarBuilder (LMFeedAppBarBuilder?): Builder for customizing the app bar.
  3. postBuilder (LMFeedPostWidgetBuilder?): Builder for customizing the post widgets.
  4. topicChipBuilder (LMFeedContextChipBuilder?): Builder for customizing the topic chips.
  5. floatingActionButtonBuilder (LMFeedContextButtonBuilder?): Builder for the floating action button (e.g., create post).

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

2. LMFeedRoomBuilderDelegate​

File Location:
builder.dart

Class Declaration​

class LMFeedRoomBuilderDelegate extends LMFeedWidgetBuilderDelegate {
  const LMFeedRoomBuilderDelegate();
}

The LMFeedRoomBuilderDelegate allows developers to customize the posts, topic chips, and loaders specifically for the feedroom screen.

Methods in LMFeedRoomBuilderDelegate​

  1. postWidgetBuilder
    Definition: Builds the widget for posts in the feedroom screen.
    Purpose: Customizes the style and layout of posts.

    Usage Example:

     @override
     Widget postWidgetBuilder(
         BuildContext context, LMFeedPostWidget post, LMPostViewData postViewData,
         {LMFeedWidgetSource source = LMFeedWidgetSource.universalFeed}) {
       return post.copyWith();
     }

  2. topicBuilder
    Definition: Builds the widget for topic chips in the feedroom screen.
    Purpose: Customizes the appearance and behavior of topic chips.

    Usage Example:

     @override
     Widget topicBuilder(BuildContext context, LMFeedPostTopic postTopic,
         LMPostViewData postViewData) {
       return postTopic.copyWith();
     }

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

    Usage Example:

     @override
     Widget firstPageProgressIndicatorBuilder(BuildContext context,
         {Widget? child}) {
       return child;
     }

Remaining Methods​

Explore the complete list of methods here.

3. LMFeedRoomSettings​

File Location:
settings.dart

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

4. LMFeedRoomStyle​

File Location:
style.dart

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

5. LMFeedRoomConfig​

File Location:
config.dart

Class Declaration​

class LMFeedRoomConfig {
  final LMFeedRoomBuilderDelegate builder;
  final LMFeedRoomSettings settings;
  final LMFeedRoomStyle style;

  const LMFeedRoomConfig({
    this.builder = const LMFeedRoomBuilderDelegate(),
    this.settings = const LMFeedRoomSettings(),
    this.style = const LMFeedRoomStyle(),
  });
}

Usage Example: Injecting Custom Configuration​

  1. Create a Custom Builder:

    class CustomFeedRoomBuilder extends LMFeedRoomBuilderDelegate {
     @override
     Widget postWidgetBuilder(
         BuildContext context, LMFeedPostWidget post, LMPostViewData postViewData,
         {LMFeedWidgetSource source = LMFeedWidgetSource.universalFeed}) {
       return post.copyWith();
     }
    }

  2. Pass Custom Style or Setting along with Builder:

    final customStyle = LMFeedRoomStyle();
    final customSetting = LMFeedRoomSettings();

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

    final feedRoomConfig = LMFeedRoomConfig(
      builder: CustomFeedRoomBuilder(),
      settings: customSetting,
      style: customStyle,
    );

  4. Initialize with Custom Config:

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

6. Summary​

The Feedroom Screen provides a user interface for interacting with a specific feedroom. Developers can customize components like app bars, posts, and topic chips using the LMFeedRoomBuilderDelegate. Configuration options are encapsulated in LMFeedRoomConfig, enabling seamless integration and customization tailored to specific design and functional requirements.