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);
State<LMFeedSearchScreen> createState() => _LMFeedSearchScreenState();
}
Key Parameters
postBuilder
(LMFeedPostWidgetBuilder?
): Builder for customizing the post widget.emptyFeedViewBuilder
(LMFeedContextWidgetBuilder?
): Builder for the empty feed view.firstPageLoaderBuilder
(LMFeedContextWidgetBuilder?
): Builder for the first-page loader.paginationLoaderBuilder
(LMFeedContextWidgetBuilder?
): Builder for the pagination loader when loading more posts.feedErrorViewBuilder
(LMFeedContextWidgetBuilder?
): Builder for the error view displayed when there is an issue with the feed.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
postWidgetBuilder
Definition: Builds the widget for posts in the search screen.
Purpose: Customizes the style and layout of posts.Usage Example:
Widget postWidgetBuilder(
BuildContext context, LMFeedPostWidget post, LMPostViewData postViewData,
{LMFeedWidgetSource source = LMFeedWidgetSource.universalFeed}) {
return post.copyWith();
}noItemsFoundIndicatorBuilder
Definition: Builds the widget for the empty state in the search screen.
Purpose: Customizes the appearance and behavior of the empty state.Usage Example:
Widget noItemsFoundIndicatorBuilder(BuildContext context,
{LMFeedButton? createPostButton, bool isSelfPost = true, Widget? child}) {
return child;
}firstPageProgressIndicatorBuilder
Definition: Builds the loader widget for the search screen.
Purpose: Provides a way to customize the loader.Usage Example:
Widget firstPageProgressIndicatorBuilder(BuildContext context,
{Widget? child}) {
return _widgetBuilderDelegate.firstPageProgressIndicatorBuilder(
context,
child: child,
);
}
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
Create a Custom Builder:
class CustomSearchBuilder extends LMFeedSearchBuilderDelegate {
Widget postWidgetBuilder(
BuildContext context, LMFeedPostWidget post, LMPostViewData postViewData,
{LMFeedWidgetSource source = LMFeedWidgetSource.universalFeed}) {
return post.copyWith();
}
}Pass Custom Style or Setting along with Builder:
final customStyle = LMFeedSearchStyle();
final customSetting = LMFeedSearchSetting();Inject the Custom Builder, Style, or Setting into the Config:
final searchConfig = LMFeedSearchConfig(
builder: CustomSearchBuilder(),
setting: customSetting,
style: customStyle,
);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.