Skip to main content

Community Hybrid Chat Screen

Introduction​

The Community Hybrid Chat Screen (LMCommunityHybridChatScreen) serves as the primary interface for the community chat experience. It integrates group feeds and direct messages (DMs) into a single, customizable view. This screen allows developers extensive customization via builders, styles, and settings to match application-specific requirements.

1. LMCommunityHybridChatScreen Widget​

File Location:
community_hybrid_chat.dart

Class Declaration​

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

  @override
  State<LMCommunityHybridChatScreen> createState() => _LMCommunityHybridChatScreenState();
}

This widget renders the LMCommunityHybridChatScreen, integrating both community feeds and direct message feeds, typically using tab-based navigation.

2. LMCommunityHybridChatBuilderDelegate​

File Location:
builder.dart

Class Declaration​

class LMCommunityHybridChatBuilderDelegate {
  const LMCommunityHybridChatBuilderDelegate();
}

The LMCommunityHybridChatBuilderDelegate provides several methods to customize key UI components of the LMCommunityHybridChatScreen. Below are key methods:

Methods in LMCommunityHybridChatBuilderDelegate​

  1. appBarBuilder
    Definition: Builds the app bar for the hybrid chat screen.
    Purpose: Customizes the app bar layout and actions.

    Usage Example:

    @override
    PreferredSizeWidget appBarBuilder(
      BuildContext context, LMChatUserViewData user, 
      TabController? tabController, LMChatAppBar defaultAppBar) {
      return defaultAppBar.copyWith(title: Text('Community Chat'));
    }

  2. scaffold
    Definition: Builds the Scaffold widget for the hybrid chat screen.
    Purpose: Customizes the overall screen layout.

    Usage Example:

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

  3. tabBarBuilder
    Definition: Builds the tab bar the hybrid chat screen.
    Purpose: Customizes the tab bar layout and actions.

    Usage Example:

    @override
    Widget tabBarBuilder(
     BuildContext context,
     TabController tabController,
     TabBar tabBar,
    ) {
     return TabBar(
       controller: tabController,
       tabs: const [
         Tab(text: 'Community'),
         Tab(text: 'Networking'),
       ],
     );
    }

Remaining Methods​

Explore the complete list of methods here.

3. LMCommunityHybridChatSetting​

File Location:
setting.dart

Class Declaration​

class LMCommunityHybridChatSetting {
  const LMCommunityHybridChatSetting();
}
  • Purpose: Provides settings to configure aspects of the LMCommunityHybridChatScreen. Currently, no additional fields or methods are explicitly defined.

4. LMCommunityHybridChatStyle​

File Location:
style.dart

Class Declaration​

class LMCommunityHybridChatStyle {
  const LMCommunityHybridChatStyle();
}
  • Purpose: Provides style to configure aspects of the LMCommunityHybridChatScreen. Currently, no additional fields or methods are explicitly defined.

5. LMCommunityHybridChatConfig​

File Location:
config.dart

Class Declaration​

class LMCommunityHybridChatConfig {
  final LMCommunityHybridChatBuilderDelegate builder;
  final LMCommunityHybridChatSetting setting;
  final LMCommunityHybridChatStyle style;

  const LMCommunityHybridChatConfig({
    this.builder = const LMCommunityHybridChatBuilderDelegate(),
    this.setting = const LMCommunityHybridChatSetting(),
    this.style = const LMCommunityHybridChatStyle(),
  });
}

Usage Example: Injecting Custom Configuration​

  1. Create a Custom Builder:

    class CustomHybridChatBuilder extends LMCommunityHybridChatBuilderDelegate {
      @override
       Widget tabBarBuilder(
         BuildContext context,
         TabController tabController,
         TabBar tabBar,
     ) {
     return TabBar(
       controller: tabController,
       tabs: const [
         Tab(text: 'Community'),
         Tab(text: 'Networking'),
       ],
     );
    }
    }

  2. Pass Custom Style or Setting along with Builder:

    final customStyle = LMCommunityHybridChatStyle();

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

    final hybridChatConfig = LMCommunityHybridChatConfig(
      builder: CustomHybridChatBuilder(),
      style: customStyle,
    );

  4. Initialize SDK with Custom Config:

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

6. Summary​

The LMCommunityHybridChatScreen is the primary entry point into the LikeMinds community chat experience. It features two main tabs:

The screen layout and behavior can be extensively customized using the provided builder delegate (LMCommunityHybridChatBuilderDelegate), allowing modifications of the AppBar, scaffold layout, and tab bar appearance. The screen adapts responsively to both mobile and web platforms, using theme-based styling provided by LMChatTheme.