Flutter聊天列表展示插件chat_list的使用

chat_list 是一个用于在Flutter应用中快速集成聊天视图的插件，帮助你轻松启动聊天应用程序。本文将详细介绍如何使用该插件，并提供完整的示例代码。

示例

你可以查看 GitHub上的示例 获取更多细节。

使用方法

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 chat_list 依赖：

dependencies:
  flutter:
    sdk: flutter
  chat_list: ^latest_version

然后运行 flutter pub get 来安装依赖。

2. 创建消息列表

创建一个包含消息的列表，每个消息都是一个 MessageWidget 或 Message 对象。以下是一个简单的例子：

final List<Message> _messageList = [
  Message(
      content: "Hi, Bill! This is the simplest example ever.",
      ownerType: OwnerType.sender,
      ownerName: "Higor Lapa"),
  Message(
      content:
          "Let's make it better , Higor. Custom font size and text color",
      textColor: Colors.black38,
      fontSize: 18.0,
      ownerType: OwnerType.receiver,
      ownerName: "Bill Gates"),
  // 更多消息...
];

3. 使用 ChatList 组件

在你的 build 方法中使用 ChatList 组件来显示消息列表。你需要传递一个 ScrollController 来控制滚动行为。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ChatList Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'ChatList Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title = ""}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final ScrollController _scrollController = ScrollController();

  final List<Message> _messageList = [
    // 初始化消息列表
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
            child: ChatList(
          children: _messageList,
          scrollController: _scrollController,
        )));
  }

  void _onNewMessage() {
    _scrollController.animateTo(_scrollController.position.maxScrollExtent,
        duration: const Duration(milliseconds: 200), curve: Curves.easeIn);
  }
}

4. 完整示例

以下是完整的示例代码，包括如何初始化消息列表和处理新消息的滚动行为：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ChatList Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'ChatList Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title = ""}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final ScrollController _scrollController = ScrollController();

  final List<Message> _messageList = [
    Message(
        content: "Hi, Bill! This is the simplest example ever.",
        ownerType: OwnerType.sender,
        ownerName: "Higor Lapa"),
    Message(
        content:
            "Let's make it better , Higor. Custom font size and text color",
        textColor: Colors.black38,
        fontSize: 18.0,
        ownerType: OwnerType.receiver,
        ownerName: "Bill Gates"),
    Message(
        content: "Bill, we have to talk about business",
        fontSize: 12.0,
        ownerType: OwnerType.sender,
        ownerName: "Higor"),
    Message(
        content: "Wow, I like it. Tell me what I can do for you, pal.",
        ownerType: OwnerType.receiver,
        ownerName: "Bill Gates"),
    Message(
        content: "I'm just a copy",
        ownerType: OwnerType.sender,
        ownerName: "Higor"),
    Message(content: "Nice", ownerType: OwnerType.receiver, ownerName: "Bill Gates"),
    // 更多消息...
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
            child: ChatList(
          children: _messageList,
          scrollController: _scrollController,
        )));
  }

  void _onNewMessage() {
    _scrollController.animateTo(_scrollController.position.maxScrollExtent,
        duration: const Duration(milliseconds: 200), curve: Curves.easeIn);
  }
}