Flutter聊天界面插件chatbar的使用

chatbar 是一个用于在您的 Flutter 应用程序中添加可定制的 WhatsApp、Hangout 或 Messenger 风格聊天应用工具栏的插件。

示例

Gradient 支持

自定义颜色

💻 安装

在 pubspec.yaml 文件的 dependencies: 部分添加以下行：

chatbar: <最新版本>

然后在项目中导入：

import 'package:chatbar/chatbar.dart';

API & 参数

以下是 ChatBar 的参数及其说明：

示例代码

以下是一个完整的示例代码，展示如何使用 chatbar 插件创建一个聊天界面工具栏：

import 'package:chatbar/chatbar.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final navigatorKey = GlobalKey<NavigatorState>();

  void show() {
    final context = navigatorKey.currentState.overlay.context;
    final dialog = AlertDialog(
      content: Container(
        child: Image.network(
            "https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/55786278_1694407227328700_8743813181337501696_n.jpg?_nc_cat=101&_nc_oc=AQnH_MY2ofbfcVeo2-QeS6P10Kg88RnI_zTh78UQGpzY8wVasLyF4hF2_JH0bOB2b8c&_nc_ht=scontent.fdel8-1.fna&oh=ec6eedc22c681f49fa96714991fca364&oe=5D9BC9A5"),
      ),
    );
    showDialog(context: context, builder: (x) => dialog);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey,
      home: Scaffold(
        appBar: ChatBar(
          onprofileimagetap: () => show(), // 点击头像时显示对话框
          profilePic: Image.network(
            'https://lh3.googleusercontent.com/proxy/wRhhKOz4fdOYlT-mUGTOYJrhTqr3VJ9B9A9hMbvFLRZ-PYlpeY-FRrEIwEvWkkk1wm3iYjhRfWctbG4wDw5XMn1GX6A7TBWeM6ybWnC4QH-iilfTtjKA',
            height: 50,
            width: 50,
            fit: BoxFit.contain,
          ),
          username: "Shivansh Talwar",
          status: Text(''),
          color: Colors.green.shade400, // 设置背景颜色为绿色
          backbuttoncolor: Colors.white, // 设置返回按钮颜色为白色
          backbutton: IconButton(
            icon: Icon(Icons.keyboard_arrow_left), // 自定义返回按钮图标
            onPressed: () {},
            color: Colors.white,
          ),
          actions: [
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.phone), // 添加电话图标
              color: Colors.white,
            ),
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.videocam), // 添加视频通话图标
              color: Colors.white,
            ),
            PopupMenuButton<String>(
              icon: Icon(
                Icons.more_vert,
                color: Colors.white,
              ), // 添加更多选项图标
              enabled: true,
              onSelected: (str) {},
              itemBuilder: (BuildContext context) => [
                const PopupMenuItem<String>(
                  value: 'View Contact',
                  child: Text('View Contact'), // 添加查看联系人选项
                ),
                const PopupMenuItem<String>(
                  value: 'Media',
                  child: Text('Media'), // 添加媒体选项
                ),
                const PopupMenuItem<String>(
                  value: 'Search',
                  child: Text('Search'), // 添加搜索选项
                ),
                const PopupMenuItem<String>(
                  value: 'Wallpaper',
                  child: Text('Wallpaper'), // 添加壁纸选项
                ),
              ],
            )
          ],
        ),
        body: Center(
          child: Text(''), // 中心显示空文本
        ),
      ),
    );
  }
}

作者

• Shivansh Talwar

如何贡献

1. Fork 该项目。
2. 创建一个新的分支 (git checkout -b my-new-feature)。
3. 提交更改 (git commit -am 'Add some feature')。
4. 推送到分支 (git push origin my-new-feature)。
5. 创建新的 Pull Request。

许可证

版权所有 (c) 2019 Shivansh Talwar

特此免费授予任何人获得本软件及相关文档文件（“软件”）副本的权利，无限制地使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本，并允许他人这样做，但须符合以下条件：

上述版权声明和本许可声明应包含在所有副本或实质性部分中。

软件按“原样”提供，不作任何明示或暗示的保证，包括但不限于对适销性、特定用途适用性和非侵权性的保证。在任何情况下，作者或版权持有人均不对因软件或其使用或其他交易而引起的任何索赔、损害或其他责任负责。