Using the sample app

Let's look at the necessary process to run the sample app.

Required changes

Precautions

After downloading the sample code, you need to change the roomId value. You can check the part to be changed through the explanation below and change it.

Source Code 💾

• Flutter Kakao type (opens new window)
• Flutter Live commerce (opens new window)
• Flutter Youtube type (opens new window)

Different platforms are available for different samples.

The platforms that can be built for each sample app may be different, and applicable platforms are specified in the address as shown in the image above, so please refer to them.

Change roomId

1. Download the Flutter sample app.
2. Unzip the compressed file and open the lib/main.dart file with an editor.
3. Copy the Channel Key of the chat room opened on the CMS screen.
4. Paste the key value you copied in step 1 into the variable name roomId.

• lib/main.dart

const roomId = "pasteYourChannelKey"
class VChatCloudApp extends StatelessWidget{
  // ...
}

Channel

You can use the Channel class to enter a chat room and control message events. The code below deals only with entering the chat room, and for detailed event descriptions such as sending messages and notifications, please refer to Channel in the left menu list.

var channelStore = Provider.of<ChannelStore>(context, listen: false);
var clientKey = storage.getString("clientKey");
var user = UserModel(
    roomId: ROOM_ID,
    nickName: nickName,
    userInfo: {"profile": imageIndex.toString()},
    clientKey: clientKey,
);

// join channel
var history = await channelStore.channel.join(user);

// add history
List<ChatItem> list = [];
list.addAll((history.body["history"] as List<dynamic>)
    .map((e) => ChatItem.fromJson(e as Map<String, dynamic>)));
var channelStore = Provider.of<ChannelStore>(context, listen: false);
channelStore.setChatLog(list);

• Parameter value

  value	identifier	Description
  user	UserModel (opens new window)	-

• result value

  value	identifier	Description
  history	List<ChannelResultModel (opens new window)>	Array of channel event data