flutter_weixin聊天界面实现

最新推荐文章于 2025-10-15 10:55:55 发布

原创

最新推荐文章于 2025-10-15 10:55:55 发布 · 637 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

文章介绍了如何在Flutter应用中创建一个具有自定义文本框和实时加载功能的聊天界面，包括使用List存储输入消息、ListView.builder显示消息列表以及MessageCard组件的实现。

1、自定义聊天文本框

2、输入的数据用list储存

List<String> _messages = [];

3、加载遍历数据

ListView.builder(
        itemCount: _messages.length,
        itemBuilder: (BuildContext context, int index) {
          // return ListTile(
          //   title: Text(_messages[index]),
          // );
          return MessageCard( messageText: _messages[index], sentTime: getCurrentTime());
        },
      ),

效果展示：

完整代码：

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

import 'chat_user_card.dart';

class MessageCard extends StatelessWidget {
  final String messageText;
  final String sentTime;

  const MessageCard(
      {super.key, required this.messageText, required this.sentTime});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(sentTime,
            style: const TextStyle(fontSize: 13, color: Colors.black54)),
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Container(
            //   width: 100.0,
            // ),
            Flexible(
              child: Container(
                padding: const EdgeInsets.all(8),
                margin: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                decoration: const BoxDecoration(
                  color: Colors.lightGreen,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(30),