Skip to main content

Search Screen

Introduction​

The Search Screen (LMFeedSearchScreen) serves as an interface for users to search for posts, topics, or other content. It supports customization of post widgets, empty feed view, and loading states through builders and configurations.

1. LMFeedSearchScreen Widget​

File Location:
search_screen.dart

Class Declaration​

class LMFeedSearchScreen extends StatefulWidget {
  /// Builder for customizing the post widget.
  final LMFeedPostWidgetBuilder? postBuilder;

  /// Builder for the empty feed view.
  final LMFeedContextWidgetBuilder? emptyFeedViewBuilder;

  /// Builder for the first-page loader when no posts are available.
  final LMFeedContextWidgetBuilder? firstPageLoaderBuilder;

  /// Builder for the pagination loader when loading more posts.
  final LMFeedContextWidgetBuilder? paginationLoaderBuilder;

  /// Builder for the error view displayed when there is an issue with the feed.
  final LMFeedContextWidgetBuilder? feedErrorViewBuilder;

  /// Builder for the view displayed when there are no new pages available.
  final LMFeedContextWidgetBuilder? noNewPageWidgetBuilder;

  /// A screen widget for performing searches and displaying results.
  const LMFeedSearchScreen({
    Key? key,
    this.postBuilder,
    this.emptyFeedViewBuilder,
    this.firstPageLoaderBuilder,
    this.paginationLoaderBuilder,
    this.feedErrorViewBuilder,
    this.noNewPageWidgetBuilder,
  }) : super(key: key);

  @override
  State<LMFeedSearchScreen> createState() => _LMFeedSearchScreenState();
}

Key Parameters​

  1. postBuilder (LMFeedPostWidgetBuilder?): Builder for customizing the post widget.
  2. emptyFeedViewBuilder (LMFeedContextWidgetBuilder?): Builder for the empty feed view.
  3. firstPageLoaderBuilder (LMFeedContextWidgetBuilder?): Builder for the first-page loader.
  4. paginationLoaderBuilder (LMFeedContextWidgetBuilder?): Builder for the pagination loader when loading more posts.
  5. feedErrorViewBuilder (LMFeedContextWidgetBuilder?): Builder for the error view displayed when there is an issue with the feed.
  6. noNewPageWidgetBuilder (LMFeedContextWidgetBuilder?): Builder for the view displayed when there are no new pages available.

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

2. LMFeedSearchBuilderDelegate​

File Location:
builder.dart

Class Declaration​

class LMFeedSearchBuilderDelegate extends LMFeedWidgetBuilderDelegate {
  const LMFeedSearchBuilderDelegate();
}

The LMFeedSearchBuilderDelegate allows developers to customize the post items, empty states, and loaders specifically for the search screen.

Methods in LMFeedSearchBuilderDelegate​

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

    Usage Example:

    @override
    Widget postWidget(BuildContext context) {
      // Return a custom widget for displaying posts
      return CustomPostWidget();
    }

  2. emptyStateWidget
    Definition: Builds the widget for the empty state in the search screen.
    Purpose: Customizes the appearance and behavior of the empty state.

    Usage Example:

    @override
    Widget emptyStateWidget(BuildContext context) {
      // Return a custom widget for the empty state
      return CustomEmptyStateWidget();
    }

  3. loaderWidget
    Definition: Builds the loader widget for the search 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. LMFeedSearchSetting​

File Location:
settings.dart

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

4. LMFeedSearchStyle​

File Location:
style.dart

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

5. LMFeedSearchConfig​

File Location:
config.dart

Class Declaration​

class LMFeedSearchConfig {
  final LMFeedSearchBuilderDelegate builder;
  final LMFeedSearchSetting setting;
  final LMFeedSearchStyle style;

  const LMFeedSearchConfig({
    this.builder = const LMFeedSearchBuilderDelegate(),
    this.setting = const LMFeedSearchSetting(),
    this.style = const LMFeedSearchStyle(),
  });
}

Usage Example: Injecting Custom Configuration​

  1. Create a Custom Builder:

    class CustomSearchBuilder extends LMFeedSearchBuilderDelegate {
      @override
      Widget postWidget(BuildContext context) {
        return Text('Custom Post Widget');
      }
    }

  2. Pass Custom Style or Setting along with Builder:

    final customStyle = LMFeedSearchStyle();
    final customSetting = LMFeedSearchSetting();

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

    final searchConfig = LMFeedSearchConfig(
      builder: CustomSearchBuilder(),
      setting: customSetting,
      style: customStyle,
    );

  4. Initialize with Custom Config:

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

6. Summary​

The Search Screen provides a user interface for searching posts and other content. Developers can customize components like posts, empty views, and loaders using the LMFeedSearchBuilderDelegate. Configuration options are encapsulated in LMFeedSearchConfig, enabling seamless integration and customization tailored to specific design and functional requirements.