前言

最近需要实现一个聊天记录的页面展示，在网上发现没有适合自己的，于是自己就造了一个，总体感觉还不赖。

下面奉上地址、效果图和教程。

效果图

地址

github: https://github.com/xiaorui-23/chat_flutter
gitee: https://gitee.com/xiaorui-23/flutter_chat
pub.dev: https://pub.dev/packages/chat_flutter
pub.flutter-io.cn: https://pub.flutter-io.cn/packages/chat_flutter -> 这个是 pub.dev的国内镜像地址。

上手使用

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

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

class MyApp extends StatefulWidget {
    const MyApp({super.key});

    @override
    State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
    FocusNode? _focusNode;

    List<ChatViewItem> chatRecordList = [];

    @override
    void initState() {

        super.initState();
        
        chatRecordList = [
            ChatViewItem(
                itemBody: "hello",
            ),
            ChatViewItem(
                senderRight: false,
                itemBody: "Hi",
            ),
        ];
    }
    

    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                appBar: AppBar(
                    centerTitle: true,
                    // title: const Text('chat_flutter 插件展示案例'),
                ),
                backgroundColor: const Color.fromARGB(255, 239, 238, 234),
                body: GestureDetector(
                    onTap: () {
                        if (_focusNode != null){
                            _focusNode!.unfocus();
                        }
                    },
                    child: Column(
                        children: [
                            Expanded(
                                child: ChatViewWidget(
                                    isNeedScrollBottom: true,
                                    children: chatRecordList,
                                    onCreated: (chatViewWidgetController) {},
                                )
                            ),
                        ],
                    ),
                ),
            ),
        );
    }
}