Flutter Question posted in
The official Flutter documentation can be found here.

how to hide the user list icon from mesibo in flutter

I am using mesibo_flutter_sdk 2.2.0 for chats, but there is no option to hide the user list icon. Please find attached the screenshot below.

enter image description here

I checked MesiboUIOptions, but there is no option available to hide the user list icon.

Code:
void initMesibo(String token) async {

// Future<String> asyncAppId = _mesibo.getAppIdForAccessToken();
// asyncAppId.then((String appid) { mAppId = appid; });



_mesibo.setAccessToken(token);
_mesibo.setListener(this);
_mesibo.start();
_mesiboUi.getUiDefaults().then((MesiboUIOptions options) {
  options.enableBackButton = true;

  options.appName = "Chats";
  options.userOnlineIndicationTitle="Online";
  options.toolbarColor = 0xFF73ad00;
  options.statusBarColor = 0xFF73ad00;
  _mesiboUi.setUiDefaults(options);
});



MesiboUIButtons buttons = MesiboUIButtons();
buttons.message = false;
buttons.audioCall = true;
buttons.videoCall = true;
buttons.groupAudioCall = true;
buttons.groupVideoCall = true;
buttons.endToEndEncryptionInfo = false; // e2ee should be enabled
_mesiboUi.setupBasicCustomization(buttons, null);

}

Tags:

2

Answers


  1. 0

    The best way to customize buttons in a Mesibo UI is by defining a UI listener in native code, as explained in the Mesibo documentation here:

    https://docs.mesibo.com/ui-modules/customizing/

    For Flutter, basic button customization can be done by setting properties on the MesiboUIButtons object, set buttons.message = false:

    MesiboUIButtons buttons = MesiboUIButtons();
buttons.message = false;
buttons.audioCall = true;
buttons.videoCall = true;
buttons.groupAudioCall = true;
buttons.groupVideoCall = true;
buttons.endToEndEncryptionInfo = false;  
_mesiboUi.setupBasicCustomization(buttons, null);

    Refer to this Flutter sample code for an implementation:

    https://github.com/mesibo/samples/blob/master/flutter/firstapp/lib/main.dart#L270

    Login or Signup to reply.
  2. 0

    if the solution proposed to Meisbo itself does not work for you for some reason i’m proposing another one:

    We can create a custom layout for your chat interface instead of using the built-in Mesibo UI:

    class CustomChatScreen extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Chat'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView.builder(
              itemCount: messages.length,
              itemBuilder: (context, index) => ListTile(
                title: Text(messages[index]),
              ),
            ),
          ),
          Row(
            children: <Widget>[
              Expanded(
                child: TextField(
                 controller: messageController,
                 decoration: InputDecoration(
                    hintText: 'Type a message',
                 ),
                ),
              ),
              IconButton(
                icon: Icon(Icons.send),
                onPressed: () {
                 // Handle send button press
                },
              ),
            ],
          ),
        ],
      ),
    );
 }
}

    Here messages is a list of strings representing the messages in the chat, and messageController is a TextEditingController for the text field where the user types their message. When the send button is pressed, you would handle sending the message and updating the messages list accordingly.

    This is a starting point you will need to add some features such as displaying the sender of each message or handling media attachments.

    this approach requires a lot of labor and you have to manully manage all aspect of the chat interface

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search