Skip to main content

QnA Feed Screen

Introduction​

The QnA Feed Screen (LMFeedQnAScreen) provides an interface for interacting with QnA-style feeds. It supports multiple feed types (e.g., personalised, universal) and allows customization of the app bar, posts, and other components through builders and configurations.

1. LMFeedQnAScreen Widget​

File Location:
qna_feed_screen.dart

Class Declaration​

class LMFeedQnAScreen extends StatefulWidget {
  /// [LMFeedType] for the feed.
  /// It can be [LMFeedType.personalised] or [LMFeedType.universal].
  /// Default is [LMFeedType.universal].
  final LMFeedType feedType;

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

  /// Builder for customizing the post widget.
  final LMFeedPostWidgetBuilder? postBuilder;

  /// Builder for the floating action button.
  final LMFeedContextButtonBuilder? floatingActionButtonBuilder;

  /// Settings for feed behavior and appearance.
  final LMFeedQnASettings? settings;

  /// A screen widget for interacting with QnA-style feeds.
  const LMFeedQnAScreen({
    super.key,
    this.feedType = LMFeedType.universal,
    this.appBar,
    this.postBuilder,
    this.floatingActionButtonBuilder,
    this.settings,
  });

  @override
  State<LMFeedQnAScreen> createState() => _LMFeedQnAScreenState();
}

Key Parameters​

  1. feedType (LMFeedType): Specifies the type of feed (personalised or universal). Defaults to universal.
  2. appBar (LMFeedAppBarBuilder?): Builder for customizing the app bar.
  3. postBuilder (LMFeedPostWidgetBuilder?): Builder for customizing post widgets.
  4. floatingActionButtonBuilder (LMFeedContextButtonBuilder?): Builder for the floating action button.
  5. settings (LMFeedQnASettings?): Settings for feed behavior and appearance.

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

2. LMFeedQnABuilderDelegate​

File Location:
builder.dart

Class Declaration​

class LMFeedQnABuilderDelegate extends LMFeedWidgetBuilderDelegate {
  const LMFeedQnABuilderDelegate();
}

The LMFeedQnABuilderDelegate allows developers to customize the posts, floating action buttons, and loaders specifically for the QnA feed screen.

Methods in LMFeedQnABuilderDelegate​

  1. postWidgetBuilder
    Definition: Builds the widget for posts in the QnA feed 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. floatingActionButtonBuilder
    Definition: Builds the floating action button in the QnA feed screen.
    Purpose: Customizes the appearance and behavior of the floating action button.

    Usage Example:

    @override
    Widget floatingActionButtonBuilder(BuildContext context, LMFeedButton floatingActionButton) {
      return floatingActionButton.copyWith();
    }

  3. firstPageProgressIndicatorBuilder
    Definition: Builds the first page loader widget for the QnA feed 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. LMFeedQnASettings​

File Location:
settings.dart

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

4. LMFeedQnAStyle​

File Location:
styles.dart

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

5. LMFeedQnAConfig​

File Location:
config.dart

Class Declaration​

class LMFeedQnAConfig {
  final LMFeedQnABuilderDelegate builder;
  final LMFeedQnASettings settings;
  final LMFeedQnAStyle style;

  const LMFeedQnAConfig({
    this.builder = const LMFeedQnABuilderDelegate(),
    this.settings = const LMFeedQnASettings(),
    this.style = const LMFeedQnAStyle(),
  });
}

Usage Example: Injecting Custom Configuration​

  1. Create a Custom Builder:

    class CustomQnABuilder extends LMFeedQnABuilderDelegate {
     @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 = LMFeedQnAStyle();
    final customSetting = LMFeedQnASettings();

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

    final qnaConfig = LMFeedQnAConfig(
      builder: CustomQnABuilder(),
      settings: customSetting,
      style: customStyle,
    );

  4. Initialize with Custom Config:

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

6. Summary​

The QnA Feed Screen provides a user interface for interacting with QnA-style feeds. Developers can customize components like app bars, posts, and floating action buttons using the LMFeedQnABuilderDelegate. Configuration options are encapsulated in LMFeedQnAConfig, enabling seamless integration and customization tailored to specific design and functional requirements.