Community Chat Screen

Introduction

The Community Chat Screen (LMCommunityChatScreen) provides a dedicated interface for group-chat conversations within the LikeMinds Chat SDK. It integrates group chatrooms, allowing customization through builders, styles, and settings to tailor the community feed to specific app requirements.

---

1. LMCommunityChatScreen Widget

File Location:
community_chat.dart

Class Declaration

class LMCommunityChatScreen extends StatefulWidget {
  const LMCommunityChatScreen({
    super.key,
    this.chatroomTag,
  });

  /// Tag to filter chatrooms; takes priority over the tag from config
  final String? chatroomTag;

  /// Creates a copy of this [LMCommunityChatScreen] with updated fields.
  LMCommunityChatScreen copyWith({
    String? chatroomTag,
  }) {
    return LMCommunityChatScreen(
      chatroomTag: chatroomTag ?? this.chatroomTag,
    );
  }

  @override
  State<LMCommunityChatScreen> createState() => _LMCommunityChatScreenState();
}

This widget displays community chatrooms filtered optionally by provided tags.

---

2. LMCommunityChatBuilderDelegate

File Location:
builder.dart

Class Declaration

class LMCommunityChatBuilderDelegate {
  const LMCommunityChatBuilderDelegate();
}

The LMCommunityChatBuilderDelegate offers extensive UI customization methods. Here are key methods:

Methods in LMCommunityChatBuilderDelegate

1. appBarBuilder
   Definition: Builds the app bar for the Community Chat screen.
   Purpose: Customizes app bar elements and style.

   Usage Example:

   @override
   PreferredSizeWidget appBarBuilder(
     BuildContext context,
     LMChatUserViewData userViewData,
     LMChatAppBar appBar,
   ) {
     return appBar.copyWith(
       title: Text('Community Chats'),
       style: LMChatAppBarStyle.basic().copyWith(
         backgroundColor: Colors.blueAccent,
       ),
     );
   }

2. scaffold
   Definition: Builds the scaffold widget for the screen.
   Purpose: Customizes overall layout and background.

   Usage Example:

   @override
   Widget scaffold({
     PreferredSizeWidget? appBar,
     Widget? body,
     Color? backgroundColor,
   }) {
     return Scaffold(
       appBar: appBar,
       body: body,
       backgroundColor: backgroundColor ?? Colors.white,
     );
   }

3. chatroomTileBuilder
   Definition: Builds each chatroom tile in the community feed.
   Purpose: Customize tile appearance and interactions.

   Usage Example:

   @override
   Widget chatroomTileBuilder(
     BuildContext context,
     LMChatRoomViewData chatroom,
     LMChatTile tile,
   ) {
     return tile.copyWith(
       title: Text(chatroom.name, style: TextStyle(fontWeight: FontWeight.bold)),
     );
   }

4. exploreTileBuilder
   Definition: Builds the explore tile displayed in the community feed.
   Purpose: Customizes explore tile appearance.

   Usage Example:

   @override
   Widget exploreTileBuilder(
     BuildContext context,
     LMChatTile tile,
   ) {
     return tile;
   }

Explore additional builder methods here.

---

3. LMCommunityChatSetting

File Location:
setting.dart

Class Declaration

class LMCommunityChatSetting {
  const LMCommunityChatSetting({
    this.tag,
  });

  /// Custom tag used for filtering group chatrooms.
  final String? tag;
}

• Purpose: Provides settings such as tag filters for chatrooms displayed in the community feed.

---

4. LMCommunityChatStyle

File Location:
style.dart

Class Declaration

class LMCommunityChatStyle {
  /// {@macro lm_community_chat_style}
  const LMCommunityChatStyle({
    this.communityChatListStyle,
  });

  final LMCommunityChatListStyle Function(LMCommunityChatListStyle)?
      communityChatListStyle;
}

• Fields:
  • communityChatListStyle: Style for the community chat feed list.

---

5. LMCommunityChatConfig

File Location:
config.dart

Class Declaration

class LMCommunityChatConfig {
  final LMCommunityChatBuilderDelegate builder;
  final LMCommunityChatSetting setting;
  final LMCommunityChatStyle style;

  const LMCommunityChatConfig({
    this.builder = const LMCommunityChatBuilderDelegate(),
    this.setting = const LMCommunityChatSetting(),
    this.style = const LMCommunityChatStyle(),
  });
}

Usage Example: Injecting Custom Configuration

1. Create a Custom Builder:

   class CustomCommunityChatBuilder extends LMCommunityChatBuilderDelegate {
     @override
     PreferredSizeWidget appBarBuilder(
       BuildContext context,
       LMChatUserViewData userViewData,
       LMChatAppBar appBar,
     ) {
       return appBar.copyWith(title: Text('Custom Community Feed'));
     }
   }

2. Pass Custom Style or Setting:

   final customSetting = LMCommunityChatSetting(tag: 'Sports');
   
   final customStyle = LMCommunityChatStyle(
     homeFeedListStyle: (oldStyle) => oldStyle.copyWith(
       titleTextStyle: TextStyle(fontSize: 18, color: Colors.green),
     ),
   );

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

   final communityChatConfig = LMCommunityChatConfig(
     builder: CustomCommunityChatBuilder(),
     setting: customSetting,
     style: customStyle,
   );

4. Initialize SDK with Custom Config:

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

---

6. Summary

The LMCommunityChatScreen is designed to showcase community interactions through customizable chatrooms. Developers can:

• Filter chatrooms using custom tags.
• Fully customize UI components such as app bars, chatroom tiles, explore tiles, and indicators.
• Flexible style options for community feed presentation.

Through LMCommunityChatBuilderDelegate, LMCommunityChatSetting, and LMCommunityChatStyle, developers have comprehensive control over the appearance and functionality of the Community Chat Screen within their application.