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. postWidget
   Definition: Builds the widget for posts in the QnA feed screen.
   Purpose: Customizes the style and layout of posts.

   Usage Example:

   @override
   Widget postWidget(BuildContext context, Post post) {
     // Return a custom widget for displaying posts
     return ListTile(
       title: Text(post.title),
       subtitle: Text('Custom QnA content'),
     );
   }

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) {
     // Return a custom floating action button
     return FloatingActionButton(
       onPressed: () {},
       child: Icon(Icons.add),
     );
   }

3. loaderWidget
   Definition: Builds the loader widget for the QnA feed 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. 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 postWidget(BuildContext context, Post post) {
       return ListTile(
         title: Text(post.title),
         subtitle: Text('Custom QnA content'),
       );
     }
   }

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.