{"id":18438222,"url":"https://github.com/easemob/uikit_chatroom_flutter","last_synced_at":"2025-04-14T13:15:52.209Z","repository":{"id":214423286,"uuid":"727535935","full_name":"easemob/UIKit_Chatroom_flutter","owner":"easemob","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-16T07:56:01.000Z","size":4097,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":9,"default_branch":"dev","last_synced_at":"2025-04-14T13:15:45.628Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/easemob.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-05T03:56:29.000Z","updated_at":"2025-04-05T01:48:39.000Z","dependencies_parsed_at":"2023-12-28T05:23:56.699Z","dependency_job_id":"4f90af91-4d85-4c9d-aad5-648f79538736","html_url":"https://github.com/easemob/UIKit_Chatroom_flutter","commit_stats":null,"previous_names":["easemob/uikit_chatroom_flutter"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easemob%2FUIKit_Chatroom_flutter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easemob%2FUIKit_Chatroom_flutter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easemob%2FUIKit_Chatroom_flutter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easemob%2FUIKit_Chatroom_flutter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/easemob","download_url":"https://codeload.github.com/easemob/UIKit_Chatroom_flutter/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248886343,"owners_count":21177645,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T06:19:05.745Z","updated_at":"2025-04-14T13:15:51.706Z","avatar_url":"https://github.com/easemob.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"_English | [中文](./README_zh.md)_\n\n# ChatroomUIKit\n\nChatroomUIKit is designed to address most users' chat room requirements specific to pan-entertainment scenarios. It delivers good user experience in the use of APIs (for user-side developers) by streamlining SDK integration, facilitating customization, and offering comprehensive documentation.\n\n## Development environment requirements\n\n- SDK: \u003e=3.0.0 \u003c4.0.0\n- Flutter: \u003e=3.12.0\n\nFor the iOS app:\n\n- Xcode 13 or higher\n- iOS 11 or higher\n\nFor the Android app:\n\n- minSDKVersion 21\n\n## ChatroomUIKit installation\n\n```sh\nflutter pub get add chatroom_uikit\n```\n\n## Run the demo\n\n[example](./example/README.md)\n\n## Project structure\n\n```sh\n.\n├── chatroom_localizations.dart // Internationalization tool\n├── chatroom_settings.dart // Component configuration\n├── chatroom_uikit.dart // ChatroomUIKit component\n├── chatroom_uikit_client.dart // ChatroomUIKit initialization class\n├── service // Basic service components\n│   ├── controllers // UI component protocol\n│   │   ├── chat_report_controller.dart\n│   │   ├── chat_text_editing_controller.dart\n│   │   ├── chatroom_controller.dart\n│   │   ├── chatroom_message_list_controller.dart\n│   │   ├── gift_page_controller.dart\n│   │   └── participant_page_controller.dart\n│   ├── default\n│   │   ├── controllers // UI component protocol implementation\n│   │   │   ├── default_gift_page_controller.dart\n│   │   │   ├── default_members_controller.dart\n│   │   │   ├── default_message_list_controller.dart\n│   │   │   ├── default_mutes_controller.dart\n│   │   │   └── default_report_controller.dart\n│   │   └── data  // UI component data protocol\n│   │       ├── gift_entity.dart\n│   │       └── user_entity.dart\n│   ├── implement // Protocol implementation component\n│   │   ├── chatroom_context.dart\n│   │   ├── chatroom_service_implement.dart\n│   │   ├── gift_service_implement.dart\n│   │   └── user_service_implement.dart\n│   └── protocol // Business protocol component\n│       ├── chatroom_service.dart\n│       ├── gift_service.dart\n│       └── user_service.dart\n├── ui // Basic UI components\n│   ├── component\n│   │   ├── chatroom_gift_list_view.dart\n│   │   ├── chatroom_gift_message_list_view.dart\n│   │   ├── chatroom_global_broad_cast_view.dart\n│   │   ├── chatroom_message_list_view.dart\n│   │   ├── chatroom_participants_list_view.dart\n│   │   └── chatroom_report_list_view.dart\n│   └── widget\n│       ├── chat_avatar.dart\n│       ├── chat_bottom_sheet.dart\n│       ├── chat_bottom_sheet_background.dart\n│       ├── chat_dialog.dart\n│       ├── chat_input_bar.dart\n│       ├── chat_input_emoji.dart\n│       ├── chat_more_item_action.dart\n│       ├── chat_uikit_button.dart\n│       └── custom_tab_indicator.dart\n└── utils // Toolkit\n    ├── chatroom_enums.dart\n    ├── chatroom_event_item_action.dart\n    ├── define.dart\n    ├── extension.dart\n    ├── icon_image_provider.dart\n    ├── image_loader.dart\n    ├── language_convertor.dart\n    └── time_tool.dart\n```\n\n## Advanced usage\n\n### Initialize the ChatroomUIKit\n\nTo initialize the ChatroomUIKit, you need to [get the App Key on the Agora Console](https://docs.agora.io/en/agora-chat/get-started/enable?platform=flutter#get-chat-project-information).  \n\n```dart\n\nawait ChatroomUIKitClient.instance.initWithAppkey(appKey);\n\n```\n\n### Log in to ChatroomUIKit\n\nTo log in to the ChatroomUIKit, you need to pass in the user ID and password typed when you [register a user on the Agora Console](https://docs.agora.io/en/agora-chat/get-started/enable?platform=flutter#register-a-user).\n\n```dart\ntry {\n    await ChatroomUIKitClient.instance.loginWithPassword(\n        userId: userId,\n        password: password, // Password typed when you register a user.\n        userInfo: userInfo, // The current user object that conforms to the UserInfoProtocol protocol. The default user object is `UserEntity` in the ChatroomUIKit. \n    );\n}on ChatError catch(e) {\n    // error.\n}\n```\n\nAlternatively, you can use a user token for login. To generate a temporary user token for testing purposes, visit https://docs.agora.io/en/agora-chat/get-started/enable?platform=flutter#generate-a-user-token.\n\n```dart\ntry {\n    await ChatroomUIKitClient.instance.loginWithToken(\n        userId: userId,\n        token: userToken,   // User token.\n        userInfo: userInfo, // The current user object that conforms to the UserInfoProtocol protocol. The default user object is `UserEntity` in the ChatroomUIKit.\n    );\n}on ChatError catch(e) {\n    // error.\n}\n```\n\n### Switch the theme\n\nYou can use `ChatUIKitTheme` to switch to the `light` or `dark` theme that comes with the ChatroomUIKit.\n\n```dart\nChatUIKitTheme(\n  color: ChatUIKitColor.light() // Switch to the light theme. For the dark them, specify the parameter with `ChatUIKitColor.dark()`.\n  child: child,\n),\n```\nTo adjust theme colors, you need to define the `hue` value of the following colors in `ChatUIKitColor`:\n\n```dart\nChatUIKitColor({\n  this.primaryHue = 203,\n  this.secondaryHue = 155,\n  this.errorHue = 350,\n  this.neutralHue = 203,\n  this.neutralSpecialHue = 220,\n  this.barrageLightness = LightnessStyle.oneHundred,\n  this.isDark = false,\n});\n```\n\n### chatroom_uikit component\n\n1. Make sure that `ChatUIKitTheme` acts as a parent node of the `ChatroomUIKit` component in your project. You are advised to set `ChatUIKitTheme` as the root node of the project.\n\n```dart\n\n@override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      builder: (context, child) {\n        return ChatUIKitTheme(child: child!);\n      },\n      home: const MyHomePage(title: 'Flutter Demo Home Page'),\n      ...\n    );\n  }\n```\n\n2. To use `chatroom_uikit`, you need to first create `ChatroomController` and then set `ChatRoomUIKit` as the root node of the current page and other components as children of `ChatRoomUIKit`.\n\n```dart\n// roomId: Chat room ID.\n// ownerId: User ID of the chat room owner.\nChatroomController controller = ChatroomController(roomId: roomId, ownerId: ownerId);\n\n@override\nWidget build(BuildContext context) {\n  Widget content = Scaffold(\n    resizeToAvoidBottomInset: false,\n    appBar: AppBar(),\n    body: ChatRoomUIKit(\n      controller: controller,\n      child: (context) {\n        // Build pages within child components, like gift window and message list page. \n        return ...;\n      },\n    ),\n  );\n\n  return content;\n}\n\n```\n\n### ChatroomMessageListView component\n\nThe `ChatroomMessageListView` component presents messages within the chat room. Make sure that this component acts as a child node of `ChatRoomUIKit`. You can add `ChatroomMessageListView` to the screen and set its position as follows:\n\n```dart\n@override\nWidget build(BuildContext context) {\n  Widget content = Scaffold(\n    resizeToAvoidBottomInset: false,\n    appBar: AppBar(),\n    body: ChatRoomUIKit(\n      controller: controller,\n      child: (context) {\n        return const Stack(\n          children: [\n            Positioned(\n              left: 16,\n              right: 78,\n              height: 204,\n              bottom: 90,\n              child: ChatroomMessageListView(),\n            )\n            ...\n          ],\n        );\n      },\n    ),\n  );\n\n  return content;\n}\n\n```\n\n`ChatroomMessageListView` provides items like click, long press, and repaint and also allows you to set the reportController. \n\n```dart\nconst ChatroomMessageListView({\n  this.onTap,\n  this.onLongPress,\n  this.itemBuilder,\n  this.reportController,\n  this.controller,\n  super.key,\n});\n```\n\nThe `ChatroomMessageListView` component does not show gifts by default. To show gifts, you need to set `enableMsgListGift` to `true` in [ChatRoomSettings](#chatroomsettings-settings).\n\n```dart\nChatRoomSettings.enableMsgListGift = true;\n```\n\n### ChatInputBar component\n\nThe `ChatInputBar` component is used to send messages. It is placed in [chatroom_uikit](#chatroom_uikit-component) by default and the position is not configurable. This component can involve more click options and you can configure more click events in `ChatroomUIKit`.\n\n```dart\n// roomId: chat room ID.\n// ownerId: user ID of the chat room.\nChatroomController controller = ChatroomController(roomId: roomId, ownerId: ownerId);\n\n@override\nWidget build(BuildContext context) {\n  Widget content = Scaffold(\n    resizeToAvoidBottomInset: false,\n    appBar: AppBar(),\n    body: ChatRoomUIKit(\n      controller: controller,\n      inputBar: ChatInputBar(),\n      child: (context) {\n        // Build pages within child components, like gift window and message list page.\n        return ...;\n      },\n    ),\n  );\n\n  return content;\n}\n\n```\n\n`ChatInputBar` allows you to add widgets via `leading` and `actions`. You can add four actions via `actions`.\n\n```dart\nChatInputBar({\n  this.inputIcon,\n  this.inputHint,\n  this.leading,\n  this.actions,\n  this.textDirection,\n  this.onSend,\n  super.key,\n}) {\n  assert(\n      actions == null || actions!.length \u003c= 4, 'can\\'t more than 4 actions');\n}\n```\n\n### ChatRoomGiftListView component\n\nYou need to configure gifts before selecting and sending them. For this purpose, you need to configure `giftControllers` in `ChatroomController`, passing in an instance that conforms to the `ChatroomGiftPageController` protocol (`DefaultGiftPageController` is available in `chatroom_uikit`).\n\n```dart\nChatroomController controller = ChatroomController(\n      roomId: widget.roomId,\n      ownerId: widget.ownerId,\n      giftControllers: () async {\n        List\u003cDefaultGiftPageController\u003e service = [];\n        // Parse the gift JSON and fill the parsing result in the gifts list in DefaultGiftPageController.\n        final value = await rootBundle.loadString('data/Gifts.json');\n        Map\u003cString, dynamic\u003e map = json.decode(value);\n        for (var element in map.keys.toList()) {\n          service.add(\n            DefaultGiftPageController(\n              title: element,\n              gifts: () {\n                List\u003cGiftEntityProtocol\u003e list = [];\n                map[element].forEach((element) {\n                  // Parse the JSON into the object that conforms to the GiftEntityProtocol protocol.\n                  GiftEntityProtocol? gift = ChatroomUIKitClient\n                      .instance.giftService\n                      .giftFromJson(element);\n                  if (gift != null) {\n                    list.add(gift);\n                  }\n                });\n                return list;\n              }(),\n            ),\n          );\n        }\n        return service;\n      }(),\n    );\n\n```\n\nThe gift list is displayed. You can add a button in [ChatInputBar](#chatinputbar-component) to show the gift list.\n\n```dart\n@override\nWidget build(BuildContext context) {\n  Widget content = Scaffold(\n    resizeToAvoidBottomInset: false,\n    appBar: AppBar(),\n    body: ChatRoomUIKit(\n      controller: controller,\n      inputBar: ChatInputBar(\n        actions: [\n          InkWell(\n            onTap: () =\u003e controller.showGiftSelectPages(),\n            child: Padding(\n              padding: const EdgeInsets.all(3),\n              child: Image.asset('images/send_gift.png'),\n            ),\n          ),\n        ],\n      ),\n      child: (context) {\n        return Container();\n      },\n    ),\n  );\n\n  return content;\n}\n\n```\n\nYou can select a gift and click `Send` to send it.\n\nGifts can be displayed via either of the following components:\n\n- [ChatroomMessageListView component](#chatroommessagelistview-component)\n- [ChatroomGiftMessageListView component](#chatroomgiftmessagelistview-component)\n\n### ChatroomGiftMessageListView component\n\nThe `ChatroomGiftMessageListView` component displays gifts that are sent and received. Make sure that this component is set as a child component of `ChatRoomUIKit`. You can add this component to the screen and set its position as follows:\n\n```dart\n@override\nWidget build(BuildContext context) {\n  // Do not show gifts on the message list. \n  ChatRoomSettings.enableMsgListGift = false;\n  Widget content = Scaffold(\n    resizeToAvoidBottomInset: false,\n    appBar: AppBar(),\n    body: ChatRoomUIKit(\n      controller: controller,\n      child: (context) {\n        return const Stack(\n          children: [\n            Positioned(\n              left: 16,\n              right: 180,\n              height: 84,\n              bottom: 300,\n              child: ChatroomGiftMessageListView(),\n            ),\n            ...\n          ],\n        );\n      },\n    ),\n  );\n\n  return content;\n}\n\n```\n\n`ChatroomGiftMessageListView` allows you to set the gift widget and placeholder icon.\n\n```dart\nconst ChatroomGiftMessageListView({\n  this.giftWidgetBuilder,\n  this.placeholder,\n  super.key,\n});\n```\n\n### ChatroomGlobalBroadcastView component\n\nThe `ChatroomGlobalBroadcastView` component shows global broadcast messages. Remember to set this component as a child node of `ChatRoomUIKit`. You can add the `ChatroomGlobalBroadcastView` component to the screen and set its position as follows:\n\n```dart\n\n@override\nWidget build(BuildContext context) {\n  Widget content = Scaffold(\n    resizeToAvoidBottomInset: false,\n    appBar: AppBar(),\n    body: ChatRoomUIKit(\n      controller: controller,\n      child: (context) {\n        return Stack(\n            children: [\n              Positioned(\n                top: MediaQuery.of(context).viewInsets.top + 10,\n                height: 20,\n                left: 20,\n                right: 20,\n                child: const ChatroomGlobalBroadcastView(),\n              ),\n              ...\n            ],\n          );\n      },\n    ),\n  );\n\n  return content;\n}\n\n```\n\n`ChatroomGlobalBroadcastView` allows you to set the icon, font, and background color.\n\n```dart\nconst ChatroomGlobalBroadcastView({\n  this.icon,\n  this.textStyle,\n  this.backgroundColor,\n  super.key,\n});\n```\n\n### ChatRoomSettings class  \n\nThe `ChatRoomSettings` class provides ChatroomUIKit settings.\n\n```dart\nclass ChatRoomSettings {\n  static String? userDefaultAvatar; // Default avatar.\n  static String? defaultIdentify; // Default identity icon.\n  static String? defaultGiftIcon; // Default gift icon.\n\n  static bool enableMsgListTime = true; // Whether the time is displayed on the message list.\n  static bool enableMsgListAvatar = true; // Whether the avatars are displayed on the message list.\n  static bool enableMsgListNickname = true; // Whether nicknames are displayed on the message list.\n  static bool enableMsgListIdentify = true; // Whether identities are displayed on the message list.\n\n  static bool enableMsgListGift = false; // Whether gifts are displayed on the message list.\n\n  static bool enableParticipantItemIdentify = false; // Whether identities are displayed on the participant list.\n\n  static CornerRadius inputBarRadius = CornerRadius.large; // Corner radius of the input box.\n  static CornerRadius avatarRadius = CornerRadius.large; // Corner radius of the avatar.\n}\n\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feasemob%2Fuikit_chatroom_flutter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feasemob%2Fuikit_chatroom_flutter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feasemob%2Fuikit_chatroom_flutter/lists"}