Flutter 应用程序中的聊天 UI

您是否曾发现自己在开发一个看似简单的聊天功能时犹豫不决，最终被数周的重复工作所吓倒？在现代应用程序中无处不在的聊天功能的实施任务往往被低估，导致开发人员和客户都感到沮丧。这一挑战凸显了对制作一个强大的聊天系统所涉及的错综复杂因素进行细致入微的了解的必要性，促使我们重新评估期望值，并对开发时间表采取更明智的方法。

在 Flutter 应用程序中创建聊天 UI 的最简单方法 —— 我们可以直接用 flutter chat ui 的软件包，地址：https://pub.dev/packages/flutter_chat_ui/install。

在 Flutter 应用程序中导入软件包，为此请打开终端并写入：flutter pub add flutter_chat_ui
或转到 pubspc.yaml 文件并粘贴：

flutter_chat_ui: ^latest version到dependencies:

添加包后，当要创建聊天界面时，请进入聊天页面，然后导入软件包文件，将 flutter type chat 作为类型。

import 'package:flutter/material.dart';
// ignore: depend_on_referenced_packages
import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
import 'package:flutter_chat_ui/flutter_chat_ui.dart';

在 stateFul 类中，为消息创建一个列表，并为特定 id 创建一个用户。

class _ChatPageState extends State<ChatPage> {
  final List<types.Message> _messages = [];
  final _user = types.User(
    id: UniqueKey().toString(),
  );

然后，在构建部件中返回一个 scafold，并在正文中调用聊天部件。

 @override
   Widget build (BuildContext context) { 
    return  Scaffold ( 
      body : Chat ( 
         messages : _messages, 
          onSendPressed : _handleSendPressed, 
          user : _user), 
    ); 
  }

对于聊天部件，它需要消息、onSendPressed 和用户。消息调用我们之前创建的消息列表，用户调用 _user，onSendPressed 调用下面提到的函数。

void _handleSendPressed(types.PartialText message) {
    final textMessage = types.TextMessage(
      author: _user,
      createdAt: DateTime.now().millisecondsSinceEpoch,
      id: UniqueKey().toString(),
      text: message.text,
    );

    _addMessage(textMessage);
  }

  void _addMessage(types.Message message) {
    print("Adding message: $message");
    setState(() {
      _messages.insert(0, message);
    });
  }

现在，运行你的项目，它将返回一个默认主题的界面。为了自定义界面主题，软件包提供了大量属性供配置。

我已经在下文的 themeData 中探讨了一些属性。

  theme: DefaultChatTheme(
              // INPUT TEXTFIELD THEME
              inputTextCursorColor: Colors.red,
              inputSurfaceTintColor: Colors.yellow,
              inputBackgroundColor: Colors.white,
              inputTextColor: Colors.white,
              inputMargin:
                  const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
              inputTextStyle: const TextStyle(
                color: Colors.black,
              ),
              inputBorderRadius: const BorderRadius.horizontal(
                left: Radius.circular(10),
                right: Radius.circular(10),
              ),
              // inputTextDecoration: const InputDecoration(
              //   border: InputBorder.none,
              //   contentPadding: EdgeInsets.zero,
              //   hintText: 'Type a message',
              //   hintStyle: TextStyle(color: Colors.black54),
              // ),
              inputContainerDecoration: BoxDecoration(
                color: Colors.grey,
                border: Border.all(color: Colors.grey, width: 1.0),
                borderRadius: const BorderRadius.horizontal(
                  left: Radius.circular(10),
                  right: Radius.circular(10),
                ),
              ),
              // OTHER CHANGES IN THEME
              primaryColor: const Color.fromARGB(255, 191, 12, 12),
              
              backgroundColor: const Color.fromARGB(255, 227, 227, 227)),

通过这些属性，可以自定义适合 Flutter 项目的一切。此外，还可以在聊天窗口小部件中自定义滚动行为或取消键盘，以获得更好的用户体验。

 body: Chat(
          scrollPhysics: const BouncingScrollPhysics(),
          keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
          messages: _messages,
          onSendPressed: _handleSendPressed,
          user: _user,
 ),// Chat

注意：为不同用户提供唯一密钥，否则会出现同一个部件树中使用了重复密钥的异常情况。

作者：fluttery.sparrow