Skip to main content

Networking Chat Screen

Introduction​

The Networking Chat Screen (LMNetworkingChatScreen) serves as the dedicated interface for managing direct messaging interactions within the LikeMinds chat experience. It provides developers extensive customization via builders, styles, and settings to tailor the DM feed to the application's specific requirements.

1. LMNetworkingChatScreen Widget​

File Location:
networking_chat.dart

Class Declaration​

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

  @override
  State<LMNetworkingChatScreen> createState() => _LMNetworkingChatScreenState();
}

This widget renders the direct messaging (DM) feed, enabling private user-to-user conversations.

2. LMNetworkingChatBuilderDelegate​

File Location:
builder.dart

Class Declaration​

class LMNetworkingChatBuilderDelegate {
  const LMNetworkingChatBuilderDelegate();
}

The LMNetworkingChatBuilderDelegate provides methods to customize the UI components of the Networking Chat Screen. Here are several key methods:

Methods in LMNetworkingChatBuilderDelegate​

  1. appBarBuilder
    Definition: Builds the app bar for the Networking Chat screen.
    Purpose: Customizes the appearance and elements of the app bar.

    Usage Example:

    @override
    PreferredSizeWidget appBarBuilder(
      BuildContext context,
      LMChatUserViewData userViewData,
      LMChatAppBar appBar,
    ) {
      return appBar.copyWith(title: Text('Direct Messages'));
    }

  2. scaffold
    Definition: Builds the Scaffold widget for the Networking Chat screen.
    Purpose: Customizes the overall structure and appearance of the screen.

    Usage Example:

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

  3. userTileBuilder
    Definition: Builds individual chatroom tiles in the DM feed.
    Purpose: Customizes appearance and functionality of each chatroom tile.

    Usage Example:

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

  4. muteIconBuilder
    Definition: Builds the mute icon displayed in DM feed items.
    Purpose: Customizes mute indicator appearance.

    Usage Example:

    @override
    Widget muteIconBuilder(LMChatIcon icon) {
      return icon.copyWith(size: 20);
    }

Explore additional builder methods here.

3. LMNetworkingChatSetting​

File Location:
setting.dart

Class Declaration​

class LMNetworkingChatSetting {
  const LMNetworkingChatSetting();
}
  • Purpose: Provides configuration settings for the Networking Chat Screen. Currently, no additional fields or methods are explicitly defined.

4. LMNetworkingChatStyle​

File Location:
style.dart

Class Declaration​

class LMNetworkingChatStyle {
  /// {@macro lm_chat_home_style}
  const LMNetworkingChatStyle({
    this.netwrokingChatListStyle,
  });

  final LMNetworkingChatListStyle Function(LMNetworkingChatListStyle)?
      netwrokingChatListStyle;
}
  • Fields:
    • netwrokingChatListStyle: Customizes the style of the networking chat feed.

5. LMNetworkingChatConfig​

File Location:
config.dart

Class Declaration​

class LMNetworkingChatConfig {
  final LMNetworkingChatBuilderDelegate builder;
  final LMNetworkingChatSetting setting;
  final LMNetworkingChatStyle style;

  const LMNetworkingChatConfig({
    this.builder = const LMNetworkingChatBuilderDelegate(),
    this.setting = const LMNetworkingChatSetting(),
    this.style = const LMNetworkingChatStyle(),
  });
}

Usage Example: Injecting Custom Configuration​

  1. Create a Custom Builder:

    class CustomNetworkingChatBuilder extends LMNetworkingChatBuilderDelegate {
      @override
      PreferredSizeWidget appBarBuilder(
        BuildContext context,
        LMChatUserViewData userViewData,
        LMChatAppBar appBar,
      ) {
        return appBar.copyWith(title: Text('My Direct Messages'));
      }
    }

  2. Pass Custom Style or Setting along with Builder:

    final customStyle = LMNetworkingChatStyle(
      dmFeedListStyle: (oldStyle) => oldStyle.copyWith(
        titleTextStyle: TextStyle(fontSize: 18, color: Colors.black),
      ),
    );

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

    final networkingChatConfig = LMNetworkingChatConfig(
      builder: CustomNetworkingChatBuilder(),
      style: customStyle,
    );

  4. Initialize SDK with Custom Config:

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

6. Summary​

The LMNetworkingChatScreen is designed specifically for managing direct message conversations within LikeMinds chat applications. It features:

  • Customizable app bar and scaffold layout.
  • Custom user tiles for displaying chatrooms in the DM feed and many other customizations.
  • Flexible style options for DM feed presentation.

Developers can extensively customize the screen through LMNetworkingChatBuilderDelegate, LMNetworkingChatStyle, and configuration via LMNetworkingChatConfig, ensuring the interface meets the precise design and functional requirements of any app.