Explore Screen

Introduction

The Explore Screen (LMChatExplorePage) allows users to browse and interact with chatrooms. It provides sorting by activity, participants, or messages. The Explore Screen is fully customizable through builder delegates.

---

1. LMChatExplorePage Widget

File Location:
explore.dart

Class Declaration

class LMChatExplorePage extends StatefulWidget {
  const LMChatExplorePage({super.key});

  @override
  State<LMChatExplorePage> createState() => _LMChatExplorePageState();
}

This widget renders the Explore Screen and allows users to browse different chatrooms.

---

2. LMChatExploreBuilderDelegate

File Location:
builder.dart

Class Declaration

class LMChatExploreBuilderDelegate {
  const LMChatExploreBuilderDelegate();
}

The LMChatExploreBuilderDelegate provides 14 methods to customize the Explore Screen. Below are three key methods.

Methods in LMChatExploreBuilderDelegate (3 out of 14 shown)

1. scaffold
   Definition: Builds the main scaffold for the Explore Screen.
   Purpose: Customizes the screen’s structure, including the app bar and body.

   Usage Example:

   @override
   Widget scaffold({
     PreferredSizeWidget? appBar,
     Widget? body,
   }) {
     return Scaffold(appBar: appBar, body: body);
   }

2. exploreTileBuilder
   Definition: Builds individual tiles for the chatrooms in the Explore Screen.
   Purpose: Customizes the layout and style of each chatroom tile.

   Usage Example:

   @override
   Widget exploreTileBuilder(
     BuildContext context, LMChatRoomViewData chatRoomViewData) {
     return ListTile(
       title: Text(chatRoomViewData.name),
     );
   }

3. pinButtonBuilder
   Definition: Builds the pin button for chatrooms.
   Purpose: Customizes the style and behavior of the pin button.

   Usage Example:

   @override
   Widget pinButtonBuilder(BuildContext context, Widget pinButton) {
     return IconButton(onPressed: () {}, icon: Icon(Icons.push_pin));
   }

Remaining Methods (11 more)

Explore the complete list of methods here.

---

3. LMChatExploreSetting

File Location:
setting.dart

class LMChatExploreSetting {
  const LMChatExploreSetting();
}

• Purpose: Provides settings for the Explore Screen. No fields or methods are currently defined.

---

4. LMChatExploreStyle

File Location:
style.dart

class LMChatExploreStyle {
  const LMChatExploreStyle({
    this.popUpMenuStyle,
  });

  final LMChatCustomPopupMenuStyle Function(
      LMChatCustomPopupMenuStyle oldStyle)? popUpMenuStyle;
}

• Fields:
  • popUpMenuStyle: A function that customizes the style of popup menus, including text, icons, and background.

---

5. LMChatExploreConfig

File Location:
config.dart

Class Declaration

class LMChatExploreConfig {
  final LMChatExploreBuilderDelegate builder;
  final LMChatExploreSetting setting;
  final LMChatExploreStyle style;

  const LMChatExploreConfig({
    this.builder = const LMChatExploreBuilderDelegate(),
    this.setting = const LMChatExploreSetting(),
    this.style = const LMChatExploreStyle(),
  });
}

Usage Example: Injecting Custom Configuration

1. Create a Custom Builder:

   class CustomExploreBuilder extends LMChatExploreBuilderDelegate {
     @override
     Widget pinButtonBuilder(BuildContext context, Widget pinButton) {
       return IconButton(
         onPressed: () {},
         icon: Icon(Icons.push_pin, color: Colors.red),
       );
     }
   }

2. Pass Custom Style or Setting along with Builder:

   final customStyle = LMChatExploreStyle(
     popUpMenuStyle: (oldStyle) => oldStyle.copyWith(
       textStyle: const TextStyle(fontSize: 18),
     ),
   );

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

   final exploreConfig = LMChatExploreConfig(
     builder: CustomExploreBuilder(),
     style: customStyle,
   );

4. Initialize with Custom Config:

   LMChatCore.instance.initialize(
     config: LMChatConfig(
       exploreConfig: exploreConfig,
     ),
   );

---

6. Summary

The Explore Screen enables users to discover new chatrooms through customizable layouts. Developers can modify components using the LMChatExploreBuilderDelegate and inject configurations through LMChatExploreConfig. This flexibility ensures the Explore Screen can fit various design requirements.