Skip to main content

Search Conversation Screen

Introduction

The Search Conversation Screen (LMChatSearchConversationScreen) provides a unified interface to search conversations in a chatroom. Developers can customize the UI, interactions, and loading logic using the associated builder, setting, and style classes.


1. LMChatSearchConversationScreen Widget

File Location:
search_conversation.dart

Class Declaration

class LMChatSearchConversationScreen extends StatefulWidget {
static const routeName = '/searchConversation';
/// The chatroom id where the search will be performed.
final int chatRoomId;

const LMChatSearchConversationScreen({super.key, required this.chatRoomId});


State<LMChatSearchConversationScreen> createState() =>
_LMChatSearchConversationScreenState();
}

This screen initiates a search experience scoped to a specific chatRoomId. The widget uses a PagingController for infinite scroll and a Bloc for handling state updates.


2. LMSearchBuilderDelegate

File Location:
builder.dart

Class Declaration

class LMSearchBuilderDelegate {
const LMSearchBuilderDelegate();
}

The LMSearchBuilderDelegate provides 6 methods for customizing the Participants Screen. Below are three key methods.

Methods in LMSearchBuilderDelegate (3 out of 13 shown)

  1. appBarBuilder
    Definition: Builds the app bar for the Participants Screen.
    Purpose: Customizes the app bar’s layout, title, and actions.

    Usage Example:


    PreferredSizeWidget appBarBuilder(
    BuildContext context,
    LMChatAppBar appBar,
    ) {
    return appBar;
    }
  1. backButton
    Definition: Builds the back button for the search screen.
    Purpose: Customizes the back button's appearance and behavior.

    Usage Example:


    Widget backButton(BuildContext context, LMChatButton backButton) {
    return backButton;
    }
  2. firstPageProgressIndicatorBuilder
    Definition: Builds the loading indicator for the first page of participants.
    Purpose: Customizes the loading animation during the initial fetch.

    Usage Example:


    Widget firstPageProgressIndicatorBuilder(BuildContext context) {
    return CircularProgressIndicator();
    }

Remaining Methods (10 more)

Explore the complete list of methods here.


3. LMSearchSetting

File Location:
setting.dart

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

4. LMSearchStyle

File Location:
style.dart

class LMSearchStyle {
const LMSearchStyle();
}
  • Purpose: Provides style configurations for the Search in Chatroom Screen. No additional fields or methods are defined.

5. LMChatParticipantConfig

File Location:
config.dart

Class Declaration

class LMSearchConversationConfig {
final LMSearchBuilderDelegate builder;
final LMSearchSetting setting;
final LMSearchStyle style;

const LMSearchConversationConfig({
this.builder = const LMSearchBuilderDelegate(),
this.setting = const LMSearchSetting(),
this.style = const LMSearchStyle(),
});
}

Usage Example: Injecting Custom Configuration

  1. Create a Custom Builder:

    class CustomSearchBuilder extends LMSearchBuilderDelegate {

    Widget conversationTile(BuildContext context, LMChatConversationViewData conversation, LMChatTile conversationTile) {
    return ListTile(
    title: conversationTile.title,
    subtitle: Text("Tap to view conversation"),
    trailing: Icon(Icons.arrow),
    );
    }
    }
  2. Pass Custom Style or Setting along with Builder:

    final customSearchStyle = LMChatParticipantStyle();
    final customSearchSetting = LMChatParticipantSetting();
  3. Inject the Custom Builder, Style, or Setting into the Config:

     final searchConfig = LMSearchConversationConfig(
    builder: CustomSearchBuilder(),
    style: customSearchStyle,
    setting: customSearchSetting,
    );
  4. Initialize with Custom Config:

     LMChatCore.instance.initialize(
    config: LMChatConfig(
    searchConversationConfig: searchConfig,
    ),
    );

6. Summary

The Search Conversation Screen enables users to search through conversations within a specific chatroom. It supports features like infinite scrolling, custom UI elements, and state management. Developers can use the Developers can use LMSearchBuilderDelegate to customize key components like the app bar and conversationTile. Additional customization can be achieved through LMSearchConversationConfig by injecting custom builders, styles, and settings.