Skip to main content

Introduction to Screens in Flutter

The LikeMinds Chat Flutter SDK provides several core screens for implementing chat functionality. This document outlines the main screens, their purposes, and how to customize them using the SDK's customization mechanism; enabling developers to understand and leverage the SDK's customization capabilities effectively.

Prerequisites​

Before integrating the LikeMinds SDK, ensure that you have the following prerequisites:

  1. A Flutter project that is properly set up and running.
  2. The LikeMinds Flutter Chat SDK installed and initialized in your project. Guide here.

Initialization​

Before utilizing any chat screens or functionalities, the Core layer must be initialized. This process sets up essential services, configurations, and dependencies required by the SDK.

As per the above mentioned prerequisites, you have already initialized the Core layer.

Example Initialization​

main(){
...
await LMChatCore.instance.initialize();
...
runApp(YourApp());
}

We will add customizations to the initialization process using the steps described in the Customization section.

Screens​

The LikeMinds Chat Flutter SDK provides the following screens, which can be used as a starting point for your chat implementation:

These screens are built using the LikeMinds Chat Flutter SDK widgets, and are designed to be easily customizable to match your app's requirements. Each screen within the SDK is designed to be highly customizable.

Key Components​

  • State Management: Utilizes Bloc for managing states.
  • UI Components: Comprises of default app bars, LM widgets, and other UI components.
  • Customization Parameters: Integrates builder delegates for UI customization.
  • Local Variables: Handles any local variables required for the screen.

The next mentioned components (Builder Delegates, Configuration Classes, Supporting Files) are used to customize the screens. They are present for every screen in the SDK.

Builder Delegates​

Builder Delegates are classes that provide methods to build various parts of a screen. By extending these delegates, developers can inject custom widgets or modify existing ones without altering the core SDK code.

Example: LMChatroomBuilderDelegate​

This delegate defines methods to build different components of the LMChatroomScreen.

class LMChatroomBuilderDelegate {
  // Method to build the app bar
  PreferredSizeWidget appBarBuilder(...) {
    return appBar;
  }
}

Configuration Classes​

Configuration Classes bundle builder delegates, settings, and styles. They are passed to the Core layer during initialization, enabling the SDK to utilize custom builders and styles.

Example: LMChatroomConfig​

class LMChatroomConfig {
  final LMChatroomBuilderDelegate builder;
  final LMChatroomSetting setting;
  final LMChatroomStyle style;
}

Supporting Files​

These files are used to define the settings and styles for the screens.

Example: LMChatroomSetting​

Defines configurable settings for the chatroom.

class LMChatroomSetting {
  const LMChatroomSetting();
}

Example: LMChatroomStyle​

Defines styling options for the chatroom components.

class LMChatroomStyle {
  const LMChatroomStyle();
}

How to Customize Screens​

Let's walk through how to customize screens in the SDK using the LMChatroomScreen as our example. This process applies similarly to other screens in the SDK.

1. Extend Builder Delegates​

Create a subclass of the relevant builder delegate to override default widget builders. This allows you to customize specific components while maintaining the default behavior for others.

import 'package:likeminds_chat_flutter_core/likeminds_chat_flutter_core.dart';

class CustomChatroomBuilder extends LMChatroomBuilderDelegate {
  @override
  PreferredSizeWidget appBarBuilder(
    BuildContext context,
    LMChatRoomViewData chatroom,
    LMChatAppBar appBar,
  ) {
    return AppBar(
      title: Text("Custom Chatroom Title"),
      actions: [
        IconButton(
          icon: Icon(Icons.settings),
          onPressed: () {
            // Custom action
          },
        ),
      ],
      backgroundColor: Colors.teal,
    );
  }

  @override
  Widget sendButton(
    BuildContext context,
    TextEditingController textController,
    VoidCallback onPressed,
    LMChatButton sendButton,
  ) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Icon(Icons.send, color: Colors.white),
      style: ElevatedButton.styleFrom(
        primary: Colors.orange,
        shape: CircleBorder(),
        padding: EdgeInsets.all(12),
      ),
    );
  }
}

2. Create Custom Configuration​

Instantiate a configuration class with your custom delegate. This configuration object will hold all your customization preferences.

import 'package:likeminds_chat_flutter_core/likeminds_chat_flutter_core.dart';
import 'custom_chatroom_builder.dart';

final customChatroomConfig = LMChatroomConfig(
  builder: CustomChatroomBuilder(),
  setting: CustomChatroomSetting(), // Any custom settings
  style: CustomChatroomStyle(), // Any custom styles
);

3. Initialize Core with Configuration​

Pass the custom configuration during the Core layer initialization. This ensures your customizations are available throughout the app.

import 'package:likeminds_chat_flutter_core/likeminds_chat_flutter_core.dart';
import 'custom_chatroom_config.dart';

void main() async {
  await LMChatCore.instance.initialize(
    config: LMChatConfig(
      chatroomConfig: customChatroomConfig,
      // Initialize other configurations as needed
    ),
    // Other initialization parameters
  );

  runApp(MyApp());
}

4. Navigate to Customized Screens​

Use the SDK's navigation methods to access the customized screens. Your configurations will automatically be applied to the rendered screens.

import 'package:likeminds_chat_flutter_core/likeminds_chat_flutter_core.dart';

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => LMChatroomScreen(chatroomId: 123),
  ),
);

With these steps, your LMChatroomScreen will now feature:

  • A custom app bar with additional actions
  • A modified conversation list layout
  • A redesigned send button
  • Any other customizations defined in your builder

You can apply this same pattern to customize other screens in the SDK by using their respective builder delegates and configuration classes.