Skip to main content

Introduction to Widgets in Flutter

The LikeMinds Chat Flutter SDK provides several widgets for implementing chat functionality. This document outlines the main widgets, 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.

Widgets​

The UI Layer is built using Flutter widgets. The widgets are categorized into different categories:

  • Common Widgets: Reusable UI components like text, icons, tiles, buttons, and more.
  • Extras: Supplementary UI elements such as app bars, loaders, chips, etc.
  • Media: Components handling different media types like images, videos, documents, GIFs, and voice notes.
  • Conversation: Widgets specific to chat conversations, like chat bubbles.
  • Polls and Reactions: UI elements for handling polls and user reactions.
  • Shimmers: Placeholder animations for loading states.

Widgets are the building blocks of LikeMinds Chat Flutter SDK. Every widget is structured in a similar manner, and follows the same pattern. They are structured in an atom-molecule pattern, where each widget (atom) can be used to build bigger widgets (molecules). These are used in the Core Layer to build the UI screens.

Each widget is located in the UI layer's lib/src/widgets directory and is named according to the format widget_name.dart. The widget class name follows the format LMWidgetName.

Base​

Each widget in the SDK follows a consistent structure of the Widget class:

  • Named as LMWidgetName (e.g., LMChatButton)
  • Extends StatefulWidget or StatelessWidget based on requirements
  • Includes a copyWith() method for easy customization, and extension
  • Contains widget parameters for customization
  • Example parameters include:
    • Required parameters (marked with required)
    • Optional parameters with default values
    • Callback functions for user interactions
    • Style configuration

Style​

Each widget also has a corresponding style class, which contains all styling-related properties.

  • Named as LMWidgetNameStyle (e.g., LMChatButtonStyle)
  • Contains all styling-related properties
  • Provides factory constructors for common styles (e.g., basic())
  • Includes a copyWith() method for style modifications

How to Customize Widgets​

The most common usage of widgets is through the LMChatCore class, which provides a set of methods to access and use the widgets. This is done through the builder delegate classes of each screen where you might want to customise the UI of that screen.

For example, to use the LMChatButton widget for customising the send button in the chatroom, you would do the following:

import 'package:likeminds_chat_flutter_core/likeminds_chat_flutter_core.dart';

class CustomChatroomBuilder extends LMChatroomBuilderDelegate {
  @override
  Widget sendButton(
    BuildContext context,
    TextEditingController textController,
    VoidCallback onPressed,
    LMChatButton sendButton,
  ) {
    return LMChatButton(
      onTap: onPressed,
      icon: LMChatIcon(
        icon: Icons.send,
        type: LMChatIconType.icon,
      ),
      style: LMChatButtonStyle.basic(),
    );
  }
}

Or you can extend the current widget and modify it as per your needs, using the copyWith() method.

import 'package:likeminds_chat_flutter_core/likeminds_chat_flutter_core.dart';

class CustomChatroomBuilder extends LMChatroomBuilderDelegate {
  @override
  Widget sendButton(
    BuildContext context,
    TextEditingController textController,
    VoidCallback onPressed,
    LMChatButton sendButton,
  ) {
    return sendButton.copyWith(
      style: sendButton.style.copyWith(
        backgroundColor: Colors.orange,
        borderRadius: BorderRadius.circular(10),
      ),
    );
  }
}

You can then use your custom builders with the Customization workflow to apply these customizations to the screens.