搜索插件、代码仓与 APP 分类

floating_chat_button 封面
插件详情v1.1.0

floating_chat_button

一个可拖动到屏幕任意位置的浮动按钮,可向用户显示消息

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
235
喜欢数
56
Pub 分数
150

安装插件

flutter pub add floating_chat_button

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包,提供可拖动的浮动按钮,用于向用户显示消息。该按钮可在屏幕上自由移动,非常适合交互式聊天界面或应用内通知。它支持多个平台,包括 Android、iOS、Web、macOS、Windows 和 Linux,确保在不同设备上行为一致。设计简洁易用,通过提供持久且易于访问的通信元素,提升用户参与度。

适合场景

  • 应用内消息系统
  • 用户支持聊天组件
  • 交互式 UI 元素
  • 实时通知显示
  • 以移动设备为先的聊天界面

主要特点

  • 可拖动的界面
  • 跨平台兼容性
  • 消息显示功能
  • 可自定义定位
  • 响应式设计
  • 与 Flutter 的轻松集成

适合对象

  • 开发聊天应用的开发者
  • 寻求交互元素的UI设计师
  • 需要持续用户通知的应用程序
  • 跨平台移动应用程序
  • 简单而有效的沟通工具

使用建议

  • 可能需要额外的样式才能实现复杂的布局
  • 对低端设备的性能影响
  • 仅限基本消息渲染
  • 不适用于高流量聊天流
  • 需要仔细放置以避免用户界面杂乱

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

Show a draggable floating chat icon button and show messages on screens

Features

A widget for displaying a chat icon (or custom widget) on top of a background widget.

It can show and hide messages or display a message that is passed in its constructor.

Alt text Alt text Alt text

Getting started

Add it as the body of a scaffold (or other full screen view) and then supply the widget that should be shown under the chat widget as the background parameter.

Alternately, use a stack view to position the chat widget and leave the background as null.

The FloatingChatIcon will default to a blue circle with white chat icon and the messageWidget will default to a blue rounded rectangle with white text. All of these colours can be configured or custom widgets can be passed to chatIconWidget, messageWidget or messageTextWidget.

The ShowMessageParameters allows you to show the message passed to the constructor after a given delayDuration, for the amount of time specified in durationToShowMessage and at a random frequency (eg "Only show this message 50% of the time that the widget is instantiated") with showMessageFrequency.

Usage

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: FloatingChatButton(
          background: BackgroundWidget(),
          onTap: (_) {
            _showBottomSheet(context);
          },
          messageText: "I like this package",
      )
    );
  }

所属分类

源码仓库

使用此插件的项目

暂无相关数据。