TIMUIKitProfile-Implementation

Introduction

The widget of the user profile page.

Parameter details

Code examples

builder

Builder is a builder used to customize the entire user information page..

If this property is used, profileWidgetBuilder and profileWidgetsOrder will become invalid.

The following example code shows to use builder to show only user information card, user gender card, user's birthday card..

/// @title:"Builder is a builder used to customize the entire user information page.."
/// @title:"If this property is used, profileWidgetBuilder and profileWidgetsOrder will become invalid."
/// @title:"The following example code shows to use builder to show only user information card, user gender card, user's birthday card.."
/// @picture:"https://qcloudimg.tencent-cloud.cn/raw/77fc336cfdbe93e73b31b2c82e4cf93b.png"
@override
Widget build(BuildContext context) {
  final theme = Provider.of<DefaultThemeData>(context).theme;
  return Scaffold(
    appBar: AppBar(
      shadowColor: Colors.white,
      title: Text(
        "Profile",
        style: const TextStyle(color: Colors.white, fontSize: 17),
      ),
      flexibleSpace: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(colors: [
            theme.lightPrimaryColor ?? CommonColor.lightPrimaryColor,
            theme.primaryColor ?? CommonColor.primaryColor
          ]),
        ),
      ),
      iconTheme: const IconThemeData(
        color: Colors.white,
      ),
      leading: IconButton(
        padding: const EdgeInsets.only(left: 16),
        icon: Image.asset(
          'images/arrow_back.png',
          package: 'tim_ui_kit',
          height: 34,
          width: 34,
        ),
        onPressed: () {
          Navigator.pop(context, newUserMARK);
        },
      ),
    ),
    body: Container(
      color: theme.weakBackgroundColor,
      child: TIMUIKitProfile(
        builder: (context, friendInfo, conversation, friendType, isMute) {
          return Column(
            children: [
              TIMUIKitProfileUserInfoCard(userInfo: friendInfo.userProfile),
              TIMUIKitProfileWidget.genderBar(
                  friendInfo.userProfile?.gender ?? 0),
              TIMUIKitProfileWidget.birthdayBar(
                  friendInfo.userProfile?.birthday)
            ],
          );
        },
        userID: widget.userID,
        controller: _timuiKitProfileController,
      ),
    ),
  );
}

lifeCycle

The life cycle hooks triggered when user information is operated.

The following example code shows to use shouldAddFriend to pop up the confirmation window before adding a friend..

/// @title:"The life cycle hooks triggered when user information is operated."
/// @title:"The following example code shows to use shouldAddFriend to pop up the confirmation window before adding a friend.."
/// @picture:"https://tuikit-1251787278.cos.ap-guangzhou.myqcloud.com/lifeCycle.gif"
@override
Widget build(BuildContext context) {
  final theme = Provider.of<DefaultThemeData>(context).theme;
  ProfileLifeCycle lifeCycle = ProfileLifeCycle(
    shouldAddToBlockList: (String userID) async {
      return true;
    },
    shouldAddFriend: (String userID) async {
      Future<bool?> showShouldAddToBlockListDialog() {
        return showDialog<bool>(
          context: context,
          builder: (context) {
            return AlertDialog(
              title: const Text("Confirm"),
              content: const Text("Are you sure to add this friend?"),
              actions: <Widget>[
                TextButton(
                  child: const Text("No"),
                  onPressed: () => Navigator.of(context).pop(),
                ),
                TextButton(
                  child: const Text("Yes"),
                  onPressed: () {
                    Navigator.of(context).pop(true);
                  },
                ),
              ],
            );
          },
        );
      }

      bool? isAdd = await showShouldAddToBlockListDialog();
      return isAdd ?? false;
    },
    shouldDeleteFriend: (String userID) async {
      return true;
    },
    didGetFriendInfo: (V2TimFriendInfo? friendInfo) async {
      return friendInfo;
    },
  );
  return Scaffold(
    appBar: AppBar(
      shadowColor: Colors.white,
      title: Text(
        "Profile",
        style: const TextStyle(color: Colors.white, fontSize: 17),
      ),
      flexibleSpace: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(colors: [
            theme.lightPrimaryColor ?? CommonColor.lightPrimaryColor,
            theme.primaryColor ?? CommonColor.primaryColor
          ]),
        ),
      ),
      iconTheme: const IconThemeData(
        color: Colors.white,
      ),
      leading: IconButton(
        padding: const EdgeInsets.only(left: 16),
        icon: Image.asset(
          'images/arrow_back.png',
          package: 'tim_ui_kit',
          height: 34,
          width: 34,
        ),
        onPressed: () {
          Navigator.pop(context, newUserMARK);
        },
      ),
    ),
    body: Container(
      color: theme.weakBackgroundColor,
      child: TIMUIKitProfile(
        lifeCycle: lifeCycle,
        userID: widget.userID,
        profileWidgetBuilder: ProfileWidgetBuilder(
            searchBar: (conversation) => TIMUIKitProfileWidget.searchBar(
                    context, conversation, handleTap: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => Search(
                            conversation: conversation,
                            onTapConversation: (V2TimConversation conversation,
                                [V2TimMessage? targetMsg]) {
                              Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                    builder: (context) => Chat(
                                      selectedConversation: conversation,
                                      initFindingMsg: targetMsg,
                                    ),
                                  ));
                            }),
                      ));
                }),
            customBuilderOne: (bool isFriend, V2TimFriendInfo friendInfo,
                V2TimConversation conversation) {
              if (!isFriend) {
                return Container();
              }
              return Column(
                  children:
                      _buildBottomOperationList(context, conversation, theme));
            }),
        controller: _timuiKitProfileController,
        profileWidgetsOrder: const [
          ProfileWidgetEnum.userInfoCard,
          ProfileWidgetEnum.operationDivider,
          ProfileWidgetEnum.remarkBar,
          ProfileWidgetEnum.genderBar,
          ProfileWidgetEnum.birthdayBar,
          ProfileWidgetEnum.operationDivider,
          ProfileWidgetEnum.searchBar,
          ProfileWidgetEnum.operationDivider,
          ProfileWidgetEnum.addToBlockListBar,
          ProfileWidgetEnum.pinConversationBar,
          ProfileWidgetEnum.messageMute,
          ProfileWidgetEnum.operationDivider,
          ProfileWidgetEnum.customBuilderOne,
          ProfileWidgetEnum.addAndDeleteArea
        ],
      ),
    ),
  );
}

profileWidgetBuilderAndprofileWidgetsOrder

The profileWidgetsOrder determines the order of components in the profileWidgetBuilder in the page.

For example, when the profile WidgetsOrder is [ProfileWidgetEnum.userInfoCard, ProfileWidgetEnum.portraitBar], the userInfoCard component is above the portraitBar component.

The profileWidgetBuilder determines the rendering results of components with different names in the TIMUIKitProfile..

In profileWidgetBuilder, except searchBar and customBuilder (One-Five), other components have default components.

The code example is an example of using custom searchBar and customBuilderOne. If you need to customize other components, add the component name in the profileWidgetBuilder property..

/// @title:"The profileWidgetsOrder determines the order of components in the profileWidgetBuilder in the page."
/// @title:"For example, when the profile WidgetsOrder is [ProfileWidgetEnum.userInfoCard, ProfileWidgetEnum.portraitBar], the userInfoCard component is above the portraitBar component."
/// @title:"The profileWidgetBuilder determines the rendering results of components with different names in the TIMUIKitProfile.."
/// @title:"In profileWidgetBuilder, except searchBar and customBuilder (One-Five), other components have default components."
/// @title:"The code example is an example of using custom searchBar and customBuilderOne. If you need to customize other components, add the component name in the profileWidgetBuilder property.."
/// @picture:"https://qcloudimg.tencent-cloud.cn/raw/27f098a1b389979765a5eb0e3898561d.png"
/// @picture:"https://qcloudimg.tencent-cloud.cn/raw/a5a6cd1d134a208d8db375d71b807b7c.png"
_buildBottomOperationList(
    BuildContext context, V2TimConversation conversation, theme) {
  final operationList = [
    {
      "label": "Send Message",
      "id": "sendMsg",
    },
    {
      "label": "Voice Call",
      "id": "audioCall",
    },
    {
      "label": "Video Call",
      "id": "videoCall",
    },
  ];
  return operationList.map((e) {
    return InkWell(
      onTap: () {},
      child: Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.symmetric(vertical: 15),
        decoration: BoxDecoration(
            color: Colors.white,
            border: Border(bottom: BorderSide(color: theme.weakDividerColor))),
        child: Text(
          e["label"] ?? "",
          style: TextStyle(
              color: e["id"] != "deleteFriend"
                  ? theme.primaryColor
                  : theme.cautionColor,
              fontSize: 17),
        ),
      ),
    );
  }).toList();
}

@override
Widget build(BuildContext context) {
  final theme = Provider.of<DefaultThemeData>(context).theme;
  return Scaffold(
    appBar: AppBar(
      shadowColor: Colors.white,
      title: Text(
        "Details",
        style: const TextStyle(color: Colors.white, fontSize: 17),
      ),
      flexibleSpace: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(colors: [
            theme.lightPrimaryColor ?? CommonColor.lightPrimaryColor,
            theme.primaryColor ?? CommonColor.primaryColor
          ]),
        ),
      ),
      iconTheme: const IconThemeData(
        color: Colors.white,
      ),
      leading: IconButton(
        padding: const EdgeInsets.only(left: 16),
        icon: Image.asset(
          'images/arrow_back.png',
          package: 'tim_ui_kit',
          height: 34,
          width: 34,
        ),
        onPressed: () {
          Navigator.pop(context, newUserMARK);
        },
      ),
    ),
    body: Container(
      color: theme.weakBackgroundColor,
      child: TIMUIKitProfile(
        userID: widget.userID,
        profileWidgetBuilder: ProfileWidgetBuilder(
            searchBar: (conversation) => TIMUIKitProfileWidget.searchBar(
                    context, conversation, handleTap: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => Search(
                            conversation: conversation,
                            onTapConversation: (V2TimConversation conversation,
                                [V2TimMessage? targetMsg]) {
                              Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                    builder: (context) => Chat(
                                      selectedConversation: conversation,
                                      initFindingMsg: targetMsg,
                                    ),
                                  ));
                            }),
                      ));
                }),
            customBuilderOne: (bool isFriend, V2TimFriendInfo friendInfo,
                V2TimConversation conversation) {
              if (!isFriend) {
                return Container();
              }
              return Column(
                  children:
                      _buildBottomOperationList(context, conversation, theme));
            }),
        controller: _timuiKitProfileController,
        profileWidgetsOrder: const [
          ProfileWidgetEnum.userInfoCard,
          ProfileWidgetEnum.portraitBar,
          ProfileWidgetEnum.nicknameBar,
          ProfileWidgetEnum.userAccountBar,
          ProfileWidgetEnum.signatureBar,
          ProfileWidgetEnum.operationDivider,
          ProfileWidgetEnum.remarkBar,
          ProfileWidgetEnum.genderBar,
          ProfileWidgetEnum.birthdayBar,
          ProfileWidgetEnum.operationDivider,
          ProfileWidgetEnum.searchBar,
          ProfileWidgetEnum.operationDivider,
          ProfileWidgetEnum.addToBlockListBar,
          ProfileWidgetEnum.pinConversationBar,
          ProfileWidgetEnum.messageMute,
          ProfileWidgetEnum.operationDivider,
          ProfileWidgetEnum.customBuilderOne,
          ProfileWidgetEnum.addAndDeleteArea
        ],
      ),
    ),
  );
}