채팅 기록 표시에 chat_flutter 사용

머리말

최근에 채팅 기록 페이지 표시를 구현해야했는데 인터넷에 나와 맞는 사람이 없어서 직접 만들었습니다. 전체적인 느낌은 나쁘지 않습니다.

다음은 주소, 렌더링 및 자습서입니다.

렌더링

주소

• 깃허브: https://github.com/xiaorui-23/chat_flutter
• 기티: 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) {},
                                )
                            ),
                        ],
                    ),
                ),
            ),
        );
    }
}

문서 주소

별도의 문서를 작성해서 이것저것 배포할 필요는 없을 것 같아서 위 주소에 전체 과정을 적어두었습니다 README.md.

마침내

관련되지 않은 이 네이티브 코드는 dart모두 다른 코드를 구현하는 것은 매우 간단합니다. 작성된 코드를 패키징하여 웹사이트에 게시하기만 하면 됩니다 pub.dev.

현재는 , , , 유형의 녹화 콘텐츠 표시만 text지원 file하며 image향후 audio관련 기능이 구현될 수 있습니다.

위는 chat_flutter플러그인을 통해 채팅 기록을 표시하는 간단한 전체 프로세스입니다.이 플러그인 사용에 대한 질문이 있으면 저에게 연락하거나 웨어 하우스 에 github게시 할 수 있습니다.giteeissue