1. Toy模板网首页
  2. > Toy博客

flutter聊天界面-自定义表情键盘实现

9月前 作者：BruceBoy 分类：Toy博客 阅读(49) 违法举报

这篇具有很好参考价值的文章主要介绍了flutter聊天界面-自定义表情键盘实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

flutter聊天界面-自定义表情键盘实现
flutter 是 Google推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App，一套代码同时运行在 iOS 和 Android平台。

flutter开发基础腾讯IM的聊天应用，使用的是tencent_im_sdk_plugin插件。使用的是自定义表情。

flutter聊天界面-自定义表情键盘实现,flutter,flutter开发实战,flutter,flutter聊天界面,自定义表情,聊天界面

一、使用的表情

1.1、自定义表情

这里使用自定义表情，表情列表如下

const emojiUrl = 'https://web.sdk.qcloud.com/im/assets/emoji/';

const emojiMap = {
  '[NO]': 'emoji_0@2x.png',
  '[OK]': 'emoji_1@2x.png',
  '[下雨]': 'emoji_2@2x.png',
  '[么么哒]': 'emoji_3@2x.png',
  '[乒乓]': 'emoji_4@2x.png',
  '[便便]': 'emoji_5@2x.png',
  '[信封]': 'emoji_6@2x.png',
  '[偷笑]': 'emoji_7@2x.png',
  '[傲慢]': 'emoji_8@2x.png',
  '[再见]': 'emoji_9@2x.png',
  '[冷汗]': 'emoji_10@2x.png',
  '[凋谢]': 'emoji_11@2x.png',
  '[刀]': 'emoji_12@2x.png',
  '[删除]': 'emoji_13@2x.png',
  '[勾引]': 'emoji_14@2x.png',
  '[发呆]': 'emoji_15@2x.png',
  '[发抖]': 'emoji_16@2x.png',
  '[可怜]': 'emoji_17@2x.png',
  '[可爱]': 'emoji_18@2x.png',
  '[右哼哼]': 'emoji_19@2x.png',
  '[右太极]': 'emoji_20@2x.png',
  '[右车头]': 'emoji_21@2x.png',
  '[吐]': 'emoji_22@2x.png',
  '[吓]': 'emoji_23@2x.png',
  '[咒骂]': 'emoji_24@2x.png',
  '[咖啡]': 'emoji_25@2x.png',
  '[啤酒]': 'emoji_26@2x.png',
  '[嘘]': 'emoji_27@2x.png',
  '[回头]': 'emoji_28@2x.png',
  '[困]': 'emoji_29@2x.png',
  '[坏笑]': 'emoji_30@2x.png',
  '[多云]': 'emoji_31@2x.png',
  '[大兵]': 'emoji_32@2x.png',
  '[大哭]': 'emoji_33@2x.png',
  '[太阳]': 'emoji_34@2x.png',
  '[奋斗]': 'emoji_35@2x.png',
  '[奶瓶]': 'emoji_36@2x.png',
  '[委屈]': 'emoji_37@2x.png',
  '[害羞]': 'emoji_38@2x.png',
  '[尴尬]': 'emoji_39@2x.png',
  '[左哼哼]': 'emoji_40@2x.png',
  '[左太极]': 'emoji_41@2x.png',
  '[左车头]': 'emoji_42@2x.png',
  '[差劲]': 'emoji_43@2x.png',
  '[弱]': 'emoji_44@2x.png',
  '[强]': 'emoji_45@2x.png',
  '[彩带]': 'emoji_46@2x.png',
  '[彩球]': 'emoji_47@2x.png',
  '[得意]': 'emoji_48@2x.png',
  '[微笑]': 'emoji_49@2x.png',
  '[心碎了]': 'emoji_50@2x.png',
  '[快哭了]': 'emoji_51@2x.png',
  '[怄火]': 'emoji_52@2x.png',
  '[怒]': 'emoji_53@2x.png',
  '[惊恐]': 'emoji_54@2x.png',
  '[惊讶]': 'emoji_55@2x.png',
  '[憨笑]': 'emoji_56@2x.png',
  '[手枪]': 'emoji_57@2x.png',
  '[打哈欠]': 'emoji_58@2x.png',
  '[抓狂]': 'emoji_59@2x.png',
  '[折磨]': 'emoji_60@2x.png',
  '[抠鼻]': 'emoji_61@2x.png',
  '[抱抱]': 'emoji_62@2x.png',
  '[抱拳]': 'emoji_63@2x.png',
  '[拳头]': 'emoji_64@2x.png',
  '[挥手]': 'emoji_65@2x.png',
  '[握手]': 'emoji_66@2x.png',
  '[撇嘴]': 'emoji_67@2x.png',
  '[擦汗]': 'emoji_68@2x.png',
  '[敲打]': 'emoji_69@2x.png',
  '[晕]': 'emoji_70@2x.png',
  '[月亮]': 'emoji_71@2x.png',
  '[棒棒糖]': 'emoji_72@2x.png',
  '[汽车]': 'emoji_73@2x.png',
  '[沙发]': 'emoji_74@2x.png',
  '[流汗]': 'emoji_75@2x.png',
  '[流泪]': 'emoji_76@2x.png',
  '[激动]': 'emoji_77@2x.png',
  '[灯泡]': 'emoji_78@2x.png',
  '[炸弹]': 'emoji_79@2x.png',
  '[熊猫]': 'emoji_80@2x.png',
  '[爆筋]': 'emoji_81@2x.png',
  '[爱你]': 'emoji_82@2x.png',
  '[爱心]': 'emoji_83@2x.png',
  '[爱情]': 'emoji_84@2x.png',
  '[猪头]': 'emoji_85@2x.png',
  '[猫咪]': 'emoji_86@2x.png',
  '[献吻]': 'emoji_87@2x.png',
  '[玫瑰]': 'emoji_88@2x.png',
  '[瓢虫]': 'emoji_89@2x.png',
  '[疑问]': 'emoji_90@2x.png',
  '[白眼]': 'emoji_91@2x.png',
  '[皮球]': 'emoji_92@2x.png',
  '[睡觉]': 'emoji_93@2x.png',
  '[磕头]': 'emoji_94@2x.png',
  '[示爱]': 'emoji_95@2x.png',
  '[礼品袋]': 'emoji_96@2x.png',
  '[礼物]': 'emoji_97@2x.png',
  '[篮球]': 'emoji_98@2x.png',
  '[米饭]': 'emoji_99@2x.png',
  '[糗大了]': 'emoji_100@2x.png',
  '[红双喜]': 'emoji_101@2x.png',
  '[红灯笼]': 'emoji_102@2x.png',
  '[纸巾]': 'emoji_103@2x.png',
  '[胜利]': 'emoji_104@2x.png',
  '[色]': 'emoji_105@2x.png',
  '[药]': 'emoji_106@2x.png',
  '[菜刀]': 'emoji_107@2x.png',
  '[蛋糕]': 'emoji_108@2x.png',
  '[蜡烛]': 'emoji_109@2x.png',
  '[街舞]': 'emoji_110@2x.png',
  '[衰]': 'emoji_111@2x.png',
  '[西瓜]': 'emoji_112@2x.png',
  '[调皮]': 'emoji_113@2x.png',
  '[象棋]': 'emoji_114@2x.png',
  '[跳绳]': 'emoji_115@2x.png',
  '[跳跳]': 'emoji_116@2x.png',
  '[车厢]': 'emoji_117@2x.png',
  '[转圈]': 'emoji_118@2x.png',
  '[鄙视]': 'emoji_119@2x.png',
  '[酷]': 'emoji_120@2x.png',
  '[钞票]': 'emoji_121@2x.png',
  '[钻戒]': 'emoji_122@2x.png',
  '[闪电]': 'emoji_123@2x.png',
  '[闭嘴]': 'emoji_124@2x.png',
  '[闹钟]': 'emoji_125@2x.png',
  '[阴险]': 'emoji_126@2x.png',
  '[难过]': 'emoji_127@2x.png',
  '[雨伞]': 'emoji_128@2x.png',
  '[青蛙]': 'emoji_129@2x.png',
  '[面条]': 'emoji_130@2x.png',
  '[鞭炮]': 'emoji_131@2x.png',
  '[风车]': 'emoji_132@2x.png',
  '[飞吻]': 'emoji_133@2x.png',
  '[飞机]': 'emoji_134@2x.png',
  '[饥饿]': 'emoji_135@2x.png',
  '[香蕉]': 'emoji_136@2x.png',
  '[骷髅]': 'emoji_137@2x.png',
  '[麦克风]': 'emoji_138@2x.png',
  '[麻将]': 'emoji_139@2x.png',
  '[鼓掌]': 'emoji_140@2x.png',
  '[龇牙]': 'emoji_141@2x.png',
};

const emojiName = [
  '[龇牙]',
  '[调皮]',
  '[流汗]',
  '[偷笑]',
  '[再见]',
  '[敲打]',
  '[擦汗]',
  '[猪头]',
  '[玫瑰]',
  '[流泪]',
  '[大哭]',
  '[嘘]',
  '[酷]',
  '[抓狂]',
  '[委屈]',
  '[便便]',
  '[炸弹]',
  '[菜刀]',
  '[可爱]',
  '[色]',
  '[害羞]',
  '[得意]',
  '[吐]',
  '[微笑]',
  '[怒]',
  '[尴尬]',
  '[惊恐]',
  '[冷汗]',
  '[爱心]',
  '[示爱]',
  '[白眼]',
  '[傲慢]',
  '[难过]',
  '[惊讶]',
  '[疑问]',
  '[困]',
  '[么么哒]',
  '[憨笑]',
  '[爱情]',
  '[衰]',
  '[撇嘴]',
  '[阴险]',
  '[奋斗]',
  '[发呆]',
  '[右哼哼]',
  '[抱抱]',
  '[坏笑]',
  '[飞吻]',
  '[鄙视]',
  '[晕]',
  '[大兵]',
  '[可怜]',
  '[强]',
  '[弱]',
  '[握手]',
  '[胜利]',
  '[抱拳]',
  '[凋谢]',
  '[米饭]',
  '[蛋糕]',
  '[西瓜]',
  '[啤酒]',
  '[瓢虫]',
  '[勾引]',
  '[OK]',
  '[爱你]',
  '[咖啡]',
  '[月亮]',
  '[刀]',
  '[发抖]',
  '[差劲]',
  '[拳头]',
  '[心碎了]',
  '[太阳]',
  '[礼物]',
  '[皮球]',
  '[骷髅]',
  '[挥手]',
  '[闪电]',
  '[饥饿]',
  '[困]',
  '[咒骂]',
  '[折磨]',
  '[抠鼻]',
  '[鼓掌]',
  '[糗大了]',
  '[左哼哼]',
  '[打哈欠]',
  '[快哭了]',
  '[吓]',
  '[篮球]',
  '[乒乓]',
  '[NO]',
  '[跳跳]',
  '[怄火]',
  '[转圈]',
  '[磕头]',
  '[回头]',
  '[跳绳]',
  '[激动]',
  '[街舞]',
  '[献吻]',
  '[左太极]',
  '[右太极]',
  '[闭嘴]',
  '[猫咪]',
  '[红双喜]',
  '[鞭炮]',
  '[红灯笼]',
  '[麻将]',
  '[麦克风]',
  '[礼品袋]',
  '[信封]',
  '[象棋]',
  '[彩带]',
  '[蜡烛]',
  '[爆筋]',
  '[棒棒糖]',
  '[奶瓶]',
  '[面条]',
  '[香蕉]',
  '[飞机]',
  '[左车头]',
  '[车厢]',
  '[右车头]',
  '[多云]',
  '[下雨]',
  '[钞票]',
  '[熊猫]',
  '[灯泡]',
  '[风车]',
  '[闹钟]',
  '[雨伞]',
  '[彩球]',
  '[钻戒]',
  '[沙发]',
  '[纸巾]',
  '[手枪]',
  '[青蛙]',
];

1.2、定义自定义表情数据类

这里定义自定义表情的数据类 CommonChatEmoji

class CommonChatEmojiItem {
  String? emojiName;
  String? url;

  CommonChatEmojiItem({required this.emojiName, required this.url});
}

class CommonChatEmoji {
  static List<CommonChatEmojiItem> emojiUrlList() {
    return emojiName
        .map((item) => CommonChatEmojiItem(
            emojiName: item, url: emojiUrl + emojiMap[item]!))
        .toList();
  }

  static bool emojiIsContain(String emojiName) {
    bool isContain = false;
    CommonChatEmojiItem? emojiItem = CommonChatEmoji.findEmojiItem(emojiName);
    if (emojiName.contains(emojiName) && emojiItem != null) {
      isContain = true;
    }

    return isContain;
  }

  static CommonChatEmojiItem? findEmojiItem(String emojiName) {
    List<CommonChatEmojiItem> emojiItemList = CommonChatEmoji.emojiUrlList();
    CommonChatEmojiItem? emojiItem;
    for(CommonChatEmojiItem item in emojiItemList) {
      if (emojiName == item.emojiName) {
        emojiItem = item;
        break;
      }
    }

    return emojiItem;
  }
}

二、聊天表情键盘

2.1、实现表情排列Panel键盘

排列表情，使用的是GridView.builder，GridView网格布局是一种常见的布局类型，GridView 组件正是实现了网格布局的组件，
SliverGridDelegate是一个抽象类，定义了GridView Layout相关接口，子类需要通过实现它们来实现具体的布局算法。Flutter中提供了两个SliverGridDelegate的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent，

            

GridView.builder(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 7, //每行三列
                childAspectRatio: 1.0, //显示区域宽高相等
              ),
              itemCount: CommonChatEmoji.emojiUrlList().length,
              itemBuilder: (context, index) {
                CommonChatEmojiItem emojiItem =
                    CommonChatEmoji.emojiUrlList()[index];
                return ChatInputEmojiButton(
                  emojiItem: emojiItem,
                  size: itemSize,
                  onEmojiLongPressed: widget.onEmojiLongPressed,
                  onEmojiTapPressed: widget.onEmojiTapPressed,
                );
              },
              padding: EdgeInsets.only(
                bottom: deleteBarHeight,
              ),
            ),

排列效果如图所示
flutter聊天界面-自定义表情键盘实现,flutter,flutter开发实战,flutter,flutter聊天界面,自定义表情,聊天界面

聊天界面的表情Panel的布局完整代码

// 表情输入
class ChatInputEmojiPanel extends StatefulWidget {
  const ChatInputEmojiPanel({
    Key? key,
    required this.emojiPanelHeight,
    required this.chatInputBarController,
    required this.onTextFieldDelete,
    required this.onEmojiTapPressed,
    required this.onEmojiLongPressed,
    required this.onTextFieldSend,
  }) : super(key: key);

  final double emojiPanelHeight;
  final ChatInputBarController chatInputBarController;
  final Function onTextFieldDelete;
  final Function onTextFieldSend;
  final Function(CommonChatEmojiItem emojiItem) onEmojiTapPressed;
  final Function(CommonChatEmojiItem emojiItem, Offset globalPosition) onEmojiLongPressed;

  @override
  State<ChatInputEmojiPanel> createState() => _ChatInputEmojiPanelState();
}

class _ChatInputEmojiPanelState extends State<ChatInputEmojiPanel> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;
    int crossAxisCount = 7;
    double itemSize = screenSize.width / crossAxisCount;
    EdgeInsets viewPadding = MediaQuery.of(context).viewPadding;

    double emojiCateBarHeight = 50.0 + viewPadding.bottom;
    double deleteBarHeight = 50.0;

    return Container(
      width: screenSize.width,
      height: widget.emojiPanelHeight,
      decoration: BoxDecoration(
        color: ColorUtil.hexColor(0xf7f7f7),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            child: Stack(
              children: [
                GridView.builder(
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 7, //每行三列
                    childAspectRatio: 1.0, //显示区域宽高相等
                  ),
                  itemCount: CommonChatEmoji.emojiUrlList().length,
                  itemBuilder: (context, index) {
                    CommonChatEmojiItem emojiItem =
                        CommonChatEmoji.emojiUrlList()[index];
                    return ChatInputEmojiButton(
                      emojiItem: emojiItem,
                      size: itemSize,
                      onEmojiLongPressed: widget.onEmojiLongPressed,
                      onEmojiTapPressed: widget.onEmojiTapPressed,
                    );
                  },
                  padding: EdgeInsets.only(
                    bottom: deleteBarHeight,
                  ),
                ),
                Positioned(
                  bottom: 0.0,
                  right: 0.0,
                  child: ChatInputEmojiDeleteBar(
                    height: deleteBarHeight,
                    onTextFieldDelete: widget.onTextFieldDelete,
                  ),
                ),
              ],
            ),
          ),
          ChatInputEmojiCateBar(
            height: emojiCateBarHeight,
            onTextFieldSend: widget.onTextFieldSend,
          ),
        ],
      ),
    );
  }
}

// 显示表情Emoji图片
class ChatInputEmojiButton extends StatelessWidget {
  const ChatInputEmojiButton({
    Key? key,
    required this.emojiItem,
    required this.size,
    required this.onEmojiTapPressed,
    required this.onEmojiLongPressed,
  }) : super(key: key);

  final CommonChatEmojiItem emojiItem;
  final double size;
  final Function(CommonChatEmojiItem emojiItem) onEmojiTapPressed;
  final Function(CommonChatEmojiItem emojiItem, Offset globalPosition) onEmojiLongPressed;

  @override
  Widget build(BuildContext context) {
    double iconSize = size;
    if (iconSize > 36.0) {
      iconSize = 36.0;
    }
    return ButtonWidget(
      width: size,
      height: size,
      onLongPressStart: (LongPressStartDetails details) {
        onEmojiLongPressed(emojiItem, details.globalPosition);
      },
      onPressed: () {
        onEmojiTapPressed(emojiItem);
      },
      child: ImageHelper.imageNetwork(
        imageUrl: "${emojiItem.url}",
        fit: BoxFit.cover,
        width: iconSize,
        height: iconSize,
      ),
    );
  }
}

2.2、表情Panel的布局代码。

// 底部表情切换bar与发送按钮
class ChatInputEmojiCateBar extends StatefulWidget {
  const ChatInputEmojiCateBar({
    Key? key,
    required this.height,
    required this.onTextFieldSend,
  }) : super(key: key);

  final double height;
  final Function onTextFieldSend;

  @override
  State<ChatInputEmojiCateBar> createState() => _ChatInputEmojiCateBarState();
}

class _ChatInputEmojiCateBarState extends State<ChatInputEmojiCateBar> {
  @override
  Widget build(BuildContext context) {
    EdgeInsets viewPadding = MediaQuery.of(context).viewPadding;
    Size screenSize = MediaQuery.of(context).size;

    print("ChatInputEmojiCateBar viewPadding bottom：${viewPadding.bottom}");
    return Container(
      width: screenSize.width,
      height: widget.height,
      decoration: BoxDecoration(
        color: ColorUtil.hexColor(0xf7f7f7),
        border: Border(
          bottom: BorderSide(width: 0.0, color: ColorUtil.hexColor(0xffffff)),
          left: BorderSide(width: 0.0, color: ColorUtil.hexColor(0xffffff)),
          right: BorderSide(width: 0.0, color: ColorUtil.hexColor(0xffffff)),
          top: BorderSide(width: 1.0, color: ColorUtil.hexColor(0xf0f0f0)),
        ),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                ButtonWidget(
                  margin: EdgeInsets.only(left: 10.0),
                  width: 36.0,
                  onPressed: () {},
                  child: ImageHelper.wrapAssetAtImages(
                    "icons/ic_custom_emoji_cate.png",
                    fit: BoxFit.cover,
                    width: 32.0,
                    height: 32.0,
                  ),
                ),
                Expanded(
                  child: Container(),
                ),
                ButtonWidget(
                  margin: const EdgeInsets.only(left: 10.0),
                  width: 70.0,
                  bgColor: ColorUtil.hexColor(0xf7f7f7),
                  bgHighlightedColor: ColorUtil.hexColor(0x3b93ff, alpha: 0.35),
                  onPressed: () {
                    widget.onTextFieldSend();
                  },
                  child: Text(
                    "发送",
                    textAlign: TextAlign.center,
                    maxLines: 1000,
                    overflow: TextOverflow.ellipsis,
                    softWrap: true,
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                      fontStyle: FontStyle.normal,
                      color: ColorUtil.hexColor(0x3b93ff),
                      decoration: TextDecoration.none,
                    ),
                  ),
                ),
              ],
            ),
          ),
          SizedBox(
            height: viewPadding.bottom,
          ),
        ],
      ),
    );
  }
}

删除输入的表情的删除按钮

// 表情键盘底部发送及删除按钮
class ChatInputEmojiDeleteBar extends StatefulWidget {
  const ChatInputEmojiDeleteBar({
    Key? key,
    required this.height,
    required this.onTextFieldDelete,
  }) : super(key: key);

  final double height;
  final Function onTextFieldDelete;

  @override
  State<ChatInputEmojiDeleteBar> createState() =>
      _ChatInputEmojiDeleteBarState();
}

class _ChatInputEmojiDeleteBarState extends State<ChatInputEmojiDeleteBar> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(right: 10.0),
      color: Colors.transparent,
      height: widget.height,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          ButtonWidget(
            onPressed: () {
              widget.onTextFieldDelete();
            },
            child: ImageHelper.wrapAssetAtImages(
              "icons/ic_backspace.png",
              fit: BoxFit.cover,
              width: 42.0,
              height: 42.0,
            ),
          ),
        ],
      ),
    );
  }
}

2.3、长按预览表情

当我们使用常见的聊天工具的时候，表情基本上都有预览功能，这里实现长按预览表情功能。
预览表情效果如下
flutter聊天界面-自定义表情键盘实现,flutter,flutter开发实战,flutter,flutter聊天界面,自定义表情,聊天界面

具体代码

/// 表情长按预览功能
class ChatInputEmojiPreview extends StatefulWidget {
  const ChatInputEmojiPreview({
    Key? key,
    required this.emojiItem,
    required this.width,
    required this.height,
  }) : super(key: key);

  final CommonChatEmojiItem emojiItem;
  final double width;
  final double height;

  @override
  State<ChatInputEmojiPreview> createState() => _ChatInputEmojiPreviewState();
}

class _ChatInputEmojiPreviewState extends State<ChatInputEmojiPreview> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ChatInputEmojiShowEmoji(
        emojiItem: widget.emojiItem,
        width: widget.width,
        height: widget.height,
      ),
    );
  }
}

// 显示预览的内容
class ChatInputEmojiShowEmoji extends StatelessWidget {
  const ChatInputEmojiShowEmoji({
    Key? key,
    required this.emojiItem,
    required this.width,
    required this.height,
  }) : super(key: key);

  final CommonChatEmojiItem emojiItem;
  final double width;
  final double height;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      height: height,
      child: Stack(
        children: [
          ImageHelper.wrapAssetAtImages(
            "icons/bg_emoji-preview.png",
            width: width,
            height: height,
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(
                height: 25.0,
              ),
              ImageHelper.imageNetwork(
                imageUrl: "${emojiItem.url}",
                fit: BoxFit.cover,
                width: 60,
                height: 60,
              ),
              SizedBox(
                height: 3.0,
              ),
              Text(
                "${emojiItem.emojiName}",
                textAlign: TextAlign.center,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w500,
                  fontStyle: FontStyle.normal,
                  color: ColorUtil.hexColor(0x555555),
                  decoration: TextDecoration.none,
                ),
              ),
              Expanded(
                child: Container(),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

三、小结

flutter聊天界面-自定义表情键盘实现，主要实现GridView布局表情，自定义预览功能，使用GestureDetector长按功能得到LongPressStartDetails details获得长按的位置，展示表情预览、表情的图片和文本富文本展示-Text.rich(TextSpan(children: textSapns));。

学习记录，每天不停进步。文章来源地址https://www.toymoban.com/news/detail-536439.html

到了这里，关于flutter聊天界面-自定义表情键盘实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • flutter开发实战-实现自定义按钮类似UIButton效果

    flutter开发实战-实现自定义按钮类似UIButton效果 最近开发过程中需要实现一下UIButton效果的flutter按钮，这里使用的是监听手势点击事件。 GestureDetector属性定义 由于属性太多，我们实现onTapDown、onTapUp、onTapCancel、onTap。 实现自定义按钮类似，我们实现onTapDown、onTapUp、onTapCance

    2024年02月14日
    浏览(46)

  • Flutter GetX 实现 ChatGPT 简单聊天界面

    Flutter 是一款跨平台的移动应用开发框架，而 GetX 是 Flutter 中一种简单易用的状态管理和路由管理工具。本篇我们将使用 Flutter 和 GetX 实现一个简单的聊天界面，以与 ChatGPT 进行交互。 我们需要在 Flutter 项目中引入 GetX 库。在 pubspec.yaml 文件中添加以下依赖： 在 main 函数中添

    2023年04月17日
    浏览(86)
  • flutter聊天界面-TextField输入框buildTextSpan实现@功能展示高亮功能

    flutter聊天界面-TextField输入框buildTextSpan实现@功能展示高亮功能

    flutter聊天界面-TextField输入框buildTextSpan实现@功能展示高亮功能 最近有位朋友讨论的时候，提到了输入框的高亮展示。在flutter TextField中需要插入特殊样式的标签，比如：“请 @张三 回答一下”，这一串字符在TextField中输入，当输入@时 弹出好友列表选择，然后将 “@张三”高

    2024年02月07日
    浏览(51)

  • flutter开发实战-RawKeyboardListener监听键盘事件及keycode。

    flutter开发实战-RawKeyboardListener监听键盘事件及keycode。 最近开发过程中遇到外设备的按钮点击触发相应的操作，需要监听对应的keycode来开启游戏或者相关操作。 这里用到了RawKeyboardListener RawKeyboardListener是一个Widget，可以用来监听键盘的原始输入事件。 RawKeyboardListener属性 on

    2024年02月14日
    浏览(42)
  • flutter开发实战-自定义相机camera功能

    flutter开发实战-自定义相机camera功能

    flutter开发实战-自定义相机camera功能。 Flutter 本质上只是一个 UI 框架，运行在宿主平台之上，Flutter 本身是无法提供一些系统能力，比如使用蓝牙、相机、GPS等，因此要在 Flutter 中调用这些能力就必须和原生平台进行通信。 实现相机功能，我们使用的是camera插件。 在pubspec.

    2024年02月15日
    浏览(49)

  • flutter开发实战-webview自定义标题栏Appbar

    flutter开发实战-webview定义标题栏Appbar 在开发中，使用到webview，在之前实现webview使用，webview页面使用的时自定义标题栏，在上一个webview结合JsBridge实现交互忘记这个标题栏，这里记录一下。 flutter开发实战-webview定义标题栏Appbar，PreferredSizeWidget webview页面使用的时自定义标题

    2024年02月16日
    浏览(39)
  • flutter开发实战-自定义Switch开关控件Widget

    flutter开发实战-自定义Switch开关控件Widget

    flutter开发实战-自定义Switch开关控件 在flutter中实现自定义Switch，主要实现类似IOS的UISwitch样式的开关控件 实现自定义Switch的Widget，主要实现交织动画。 交织动画 有些时候我们可能会需要一些复杂的动画，这些动画可能由一个动画序列或重叠的动画组成。一个动画组合在不同

    2024年02月13日
    浏览(50)
  • flutter聊天界面-聊天气泡长按弹出复制、删除按钮菜单

    flutter聊天界面-聊天气泡长按弹出复制、删除按钮菜单

    flutter聊天界面-聊天气泡长按弹出复制、删除按钮菜单 在之前实现了flutter聊天界面的富文本展示内容，这里记录一下当长按聊天气泡的时候弹出复制、删除等菜单功能 当长按聊天气泡的时候弹出复制、删除等菜单，可新增更多按钮 实现箭头效果，这里实现自定义的CustomPai

    2024年02月13日
    浏览(43)
  • flutter聊天界面-加号【➕】更多展开相机、相册等操作Panel

    flutter聊天界面-加号【➕】更多展开相机、相册等操作Panel

    flutter聊天界面-加号【➕】更多展开相机、相册等操作Panel 在之前实现了flutter聊天界面的自定义表情的展示，这里记录一下更多操作展开的相机、相册等操作功能实现。 更多操作展开的相机、相册等操作功能实现。 展开的操作按钮可能比较多，一页显示8个、多个可以左右滑

    2024年02月13日
    浏览(42)
  • flutter聊天界面-Text富文本表情emoji、url、号码展示

    flutter聊天界面-Text富文本表情emoji、url、号码展示

    flutter聊天界面-Text富文本表情emoji、url、号码展示 Text富文本表情emoji展示，主要通过实现Text.rich展示文本、emoji、自定义表情、URL等 Text用于显示简单样式文本 TextSpan它代表文本的一个“片段”，不同“片段”可按照不同的样式显示。 示例片段 Text富文本表情emoji展示主要通过

    2024年02月12日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包