【Flutter】聊天窗口中加入emoji

✨Demo地址

首先，我们要做一个聊天窗口

chat_bubble.dart

BubbleNormal({
    Key? key,
    required this.text,
    this.bubbleRadius = BUBBLE_RADIUS,
    this.isSender = true,
    this.color = Colors.white70,
    this.tail = true,
    this.sent = false,
    this.delivered = false,
    this.seen = false,
    this.textStyle = const TextStyle(
        color: Colors.black87,
        fontSize: 16,
    ),
}) : super(key: key);

当然，我们也可以直接安装插件（避免重复造轮子）

pub.dev/packages/ch…

flutter pub add chat_bubbles

构造输入框

输入框可以由这几个元素组成

Container
- Row
  - IconButton
  - Expanded
    - TextField
  - IconButton

我们可以大概得出这样的结构

添加emoji的位置

导入插件

pub.dev/packages/em…

flutter pub add emoji_picker_flutter

在输入框外层的布局，我们可以使用Column()组件来包裹聊天窗口和输入框，然后，在输入框的下面加入Offstage()
在Offstage中嵌套一个SIzedBox设置高度，用来占位
定义一个变量来控制Emoji输入框的显示

  Offstage(
          offstage: !_emojiShowing,
          child: SizedBox(
            height: 250,
            child: EmojiPicker(
                onEmojiSelected: (Category category, Emoji emoji) {
                  _onEmojiSelected(emoji);
                },
                onBackspacePressed: _onBackspacePressed,
                config: Config(
                    columns: 7,
                    emojiSizeMax: 32 * (Platform.isIOS ? 1.30 : 1.0),
                    verticalSpacing: 0,
                    horizontalSpacing: 0,
                    initCategory: Category.RECENT,
                    bgColor: const Color(0xFFF2F2F2),
                    indicatorColor: Colors.blue,
                    iconColor: Colors.grey,
                    iconColorSelected: Colors.blue,
                    progressIndicatorColor: Colors.blue,
                    backspaceColor: Colors.blue,
                    skinToneDialogBgColor: Colors.white,
                    skinToneIndicatorColor: Colors.grey,
                    enableSkinTones: true,
                    showRecentsTab: true,
                    recentsLimit: 28,
                    noRecentsText: 'No Recents',
                    noRecentsStyle:
                        const TextStyle(fontSize: 20, color: Colors.black26),
                    tabIndicatorAnimDuration: kTabScrollDuration,
                    categoryIcons: const CategoryIcons(),
                    buttonMode: ButtonMode.MATERIAL)),
          ),
        ),

至此，我们的聊天窗口加入emoji已经完成了，当然，类似的做法可以加入图片，小视频等功能。

拓展的功能点：

聊天窗口也可以使用FireBase等实现实时通讯
下拉加载更多消息
发送语音
发送图片（image_picker）
图片放大（photo_view）
长按撤回，删除

Container(
  margin: EdgeInsets.symmetric(vertical: 10),
  height: 100,
  width: 100,
  child: PopupMenuButton(
    child: FlutterLogo(),
    itemBuilder: (context) {
      return <PopupMenuItem>[new PopupMenuItem(child: Text('删除'))];
    },
  ),
),

Issues

当前版本存在表情缩小的问题，还没有解决

github.com/flutter/flu…