Flutter聊天界面插件mobile_chat_ui的使用

mobile_chat_ui 是一个为Android、iOS和Web开发者提供的完全可自定义的现代聊天UI。以下是该插件的安装和基本使用方法。

功能亮点

• 完全可自定义的聊天界面。
• 支持显示用户头像。
• 可选择作者详情的位置（顶部或底部）。
• 提供输入框选项。

要求

确保您的开发环境满足以下要求：

• Dart >= 3.1.1
• Flutter >= 3.13.3

首先，在您的项目目录下运行以下命令来添加依赖：

flutter pub add mobile_chat_ui

使用示例

导入包并使用

在您的Flutter应用中导入mobile_chat_ui包，并在Scaffold中使用Chat组件。

import 'package:mobile_chat_ui/mobile_chat_ui.dart';

return Scaffold(
    appBar: AppBar(title: const Text("Chat Test")),
    body: Chat(
        user: loggedInUser, // 当前登录用户的对象
        messages: messages, // 消息列表
        theme: DefaultChatTheme(userAvatarRadius: 12), // 自定义主题
        authorDetailsLocation: AuthorDetailsLocation.bottom, // 设置作者信息位置
        hasInput: true, // 是否显示输入框
        showUserAvatar: true, // 是否显示用户头像
    ),
);

示例Demo

这里提供了一个完整的示例demo，包括了如何设置主应用以及具体的聊天屏幕实现。

main.dart

这是应用程序的入口文件，设置了MaterialApp的主题和首页指向。

import 'package:flutter/material.dart';
import 'chat_screen.dart'; // 引入聊天屏幕

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ChatScreen(),
    );
  }
}

chat_screen.dart

这是实际展示聊天界面的页面。

import 'package:flutter/material.dart';
import 'package:mobile_chat_ui/mobile_chat_ui.dart';

// 假设有一个已登录用户的模型
class User {
  final String name;
  final String avatarUrl;

  User(this.name, this.avatarUrl);
}

// 消息模型
class Message {
  final String text;
  final User sender;
  final DateTime time;

  Message(this.text, this.sender, this.time);
}

class ChatScreen extends StatefulWidget {
  const ChatScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final List<Message> _messages = [
    // 示例消息数据
    Message('Hello!', User('John Doe', 'url_to_avatar'), DateTime.now()),
  ];

  final User _loggedInUser = User('Jane Doe', 'url_to_avatar');

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Chat Screen")),
      body: Chat(
        user: _loggedInUser,
        messages: _messages,
        theme: DefaultChatTheme(userAvatarRadius: 12),
        authorDetailsLocation: AuthorDetailsLocation.bottom,
        hasInput: true,
        showUserAvatar: true,
      ),
    );
  }
}