Customize the Nickname and Profile Photo to Your Flutter Calling App with 1 Line of Code

In order to provide a personalized experience for users in your audio/video calling project, we offer a custom service to set your exclusive nickname and avatar photo. You could integrate the TUICallKit component into your Flutter project (Flutter 3.0 or higher version).

Video Tutorial

To customize your nickname or profile photo, use the following API for update:

TUIResult result = TUICallKit.instance.setSelfInfo('userName', 'url:********');

Step 0: Hand login asynchronous flow

As the login function in the ‘TUICallKit’ interface is an asynchronous flow, we need to make a simple modification to the relevant code as shown in the following steps:

• Add ‘async’ after the parentheses of the ‘ _initCallkit() ‘ function.
• Add ‘await’ before the ‘ TUICallKit.instance.login() ‘ function in the body of the ‘ _initCallkit() ‘ function.

image 1: before modification

image 2: after modification

Step 1: Customize personal information

Use the API provided by TUICallKit to modify the nickname and avatar. Let’s copy this line of code and navigate to your Flutter project to paste it.

TUIResult result = TUICallKit.instance.setSelfInfo('userName', 'url:********');

Then pass our user nickname and avatar URL in string format, like this:

image 3: modification interface

This is just an example, and you can modify them to your liking as long as you pass them in string format. Now the interface call is ready.

step 2：Run your program

Let’s compile and run your code. And then you can open another device and initiate an audio call to “6666”.

image 4: two prepared devices

After connecting, you will see the basic information of “6666” with “TUICalkit” as his nickname and the newly set avatar as the URL we just passed in on the other device. On the “6666” device, you will see that the user who initiated the audio call has the nickname “8888” and his avatar is displayed.

image 5: making a call

We answer the call and it works fine.

image 6: answering the call

Conclusion

Now by using the TUICallKit interface, customizing nicknames and avatars is complete. If you have more advanced requirements such as AI-powered noise cancellation and spatial audio, we offer a fully customized audio/video communication SDK & API family for web, mobile, and games. Tailor your video communication experience to meet your specific needs and captivate your audience with Tencent RTC.

If you have any questions or need assistance, our support team is always ready to help. Please feel free to get in touch with us, or join us in Discord and Telegram.