Participants Screen

Introduction

The Participants Screen (LMChatroomParticipantsPage) allows users to view the participants of a chatroom. It provides various customization options, such as app bar layout, participant tiles, and loading indicators, through the builder delegate.

---

1. LMChatroomParticipantsPage Widget

File Location:
participants.dart

Class Declaration

class LMChatroomParticipantsPage extends StatefulWidget {
  /// The chatroom whose participants will be displayed.
  final LMChatRoomViewData chatroomViewData;

  const LMChatroomParticipantsPage({
    super.key,
    required this.chatroomViewData,
  });

  @override
  State<LMChatroomParticipantsPage> createState() =>
      _LMChatroomParticipantsPageState();
}

This widget renders the participants of a chatroom. It uses pagination and supports search functionality to manage and display participant data.

---

2. LMChatParticipantBuilderDelegate

File Location:
builder.dart

Class Declaration

class LMChatParticipantBuilderDelegate {
  const LMChatParticipantBuilderDelegate();
}

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

Methods in LMChatParticipantBuilderDelegate (3 out of 6 shown)

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

   Usage Example:

   @override
   PreferredSizeWidget appBarBuilder(
     BuildContext context, LMChatAppBar defaultAppBar) {
     return defaultAppBar.copyWith(title: Text('Participants'));
   }

2. userTileBuilder
   Definition: Builds individual participant tiles.
   Purpose: Customizes the layout and style of participant entries.

   Usage Example:

   @override
   Widget userTileBuilder(BuildContext context, LMChatUserViewData user) {
     return ListTile(title: Text(user.name));
   }

3. firstPageProgressIndicatorBuilder
   Definition: Builds the loading indicator for the first page of participants.
   Purpose: Customizes the loading animation during the initial fetch.

   Usage Example:

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

Remaining Methods (3 more)

Explore the complete list of methods here.

---

3. LMChatParticipantSetting

File Location:
setting.dart

class LMChatParticipantSetting {
  const LMChatParticipantSetting();
}

• Purpose: Provides configuration settings for the Participants Screen. No additional fields or methods are defined.

---

4. LMChatParticipantStyle

File Location:
style.dart

class LMChatParticipantStyle {
  const LMChatParticipantStyle();
}

• Purpose: Provides style configurations for the Participants Screen. No additional fields or methods are defined.

---

5. LMChatParticipantConfig

File Location:
config.dart

Class Declaration

class LMChatParticipantConfig {
  final LMChatParticipantBuilderDelegate builder;
  final LMChatParticipantStyle style;
  final LMChatParticipantSetting setting;

  const LMChatParticipantConfig({
    this.builder = const LMChatParticipantBuilderDelegate(),
    this.style = const LMChatParticipantStyle(),
    this.setting = const LMChatParticipantSetting(),
  });
}

Usage Example: Injecting Custom Configuration

1. Create a Custom Builder:

   class CustomParticipantBuilder extends LMChatParticipantBuilderDelegate {
     @override
     Widget userTileBuilder(BuildContext context, LMChatUserViewData user) {
       return ListTile(
         title: Text(user.name),
         trailing: Icon(Icons.message),
       );
     }
   }

2. Pass Custom Style or Setting along with Builder:

   final customStyle = LMChatParticipantStyle();
   final customSetting = LMChatParticipantSetting();

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

   final participantConfig = LMChatParticipantConfig(
     builder: CustomParticipantBuilder(),
     style: customStyle,
     setting: customSetting,
   );

4. Initialize with Custom Config:

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

---

6. Summary

The Participants Screen provides a view of chatroom members with features such as pagination and search. Developers can use LMChatParticipantBuilderDelegate to customize key components like the app bar and participant tiles. Additional customization can be achieved through LMChatParticipantConfig by injecting custom builders, styles, and settings.