ww-sample/bloc_example/lib/screens/chat_room.dart

import 'package:flutter/material.dart';

class ChatRoom extends StatelessWidget {
  final List<Map<String, dynamic>> messages = [
    {
      'sender': 'system',
      'text': '尊敬的经纪：您好，欢迎来到《名媛汇》高端外围服务平台。您可以通过下方的介绍简单的了解一下平台介绍、客服服务、交易流程、常见问题',
      'time': '14:20'
    },
    {'sender': 'system', 'text': '商务客服24小时在线，如有疑问请及时沟通', 'time': '14:20'},
    {
      'sender': 'user',
      'text': 'Proin gravida dolor sit amet lacus accumsan et viverra.',
      'time': '14:22'
    },
    {
      'sender': 'system',
      'text': '订单号：100000001，尾款已交收，请及时退款，谢谢配合！',
      'time': '14:21'
    },
    {
      'sender': 'system',
      'text': '订单号：100000001，尾款已交收，请及时退款，谢谢配合！',
      'time': '14:21'
    },
    {
      'sender': 'system',
      'text': '订单号：100000001，尾款已交收，请及时退款，谢谢配合！',
      'time': '14:21'
    },
    {
      'sender': 'system',
      'text': '订单号：100000001，尾款已交收，请及时退款，谢谢配合！',
      'time': '14:21'
    },
    {
      'sender': 'system',
      'text': '订单号：100000001，尾款已交收，请及时退款，谢谢配合！',
      'time': '14:21'
    },
    {
      'sender': 'system',
      'text': '订单号：100000001，尾款已交收，请及时退款，谢谢配合！',
      'time': '14:22'
    },
  ];

  final List<Map<String, String>> avatars = [
    {
      'name': '北京XX',
      'image': 'https://picsum.photos/80/100',
    },
    {
      'name': '上海XX',
      'image': 'https://picsum.photos/80/100',
    },
    {
      'name': '校花XX',
      'image': 'https://picsum.photos/80/100',
    },
    {
      'name': '嫩模XX',
      'image': 'https://picsum.photos/80/100',
    },
    {
      'name': '空姐XX',
      'image': 'https://picsum.photos/80/100',
    },
  ];

  final List<String> quickReplies = ['名媛汇', '交易流程', '常见问题'];
  final List<String> paymentReplies = ['支付回款', '订单群'];

  ChatRoom({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size(double.infinity, 64),
        child: AppBar(
            centerTitle: true,
            title: const Column(children: <Widget>[
              Text('选妃助手'),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Icon(Icons.circle, color: Colors.blue, size: 10),
                  SizedBox(width: 4),
                  Text("机器人",
                      style: TextStyle(fontSize: 14, color: Colors.blue)),
                ],
              )
            ])),
      ),
      // AppBar(
      //   leading: const BackButton(),
      //   title: const Text('选妃助手'),
      //   centerTitle: true,
      //   bottom: const PreferredSize(
      //     preferredSize: const Size.fromHeight(32),
      //     child: Column(
      //       children: [
      //         const Text(
      //           '机器人',
      //           style: TextStyle(color: Colors.blue, fontSize: 14),
      //         ),
      //         const SizedBox(height: 8),
      //       ],
      //     ),
      //   ),
      // ),
      body: Column(
        children: [
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            padding: const EdgeInsets.symmetric(horizontal: 12),
            child: Row(
              children: avatars.map((item) {
                return Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 6.0),
                  child: Column(
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.circular(8),
                        child: Image.network(
                          item['image']!,
                          width: 80,
                          height: 100,
                          fit: BoxFit.cover,
                        ),
                      ),
                      Container(
                        width: 80,
                        alignment: Alignment.center,
                        padding: const EdgeInsets.symmetric(vertical: 4),
                        decoration: BoxDecoration(
                          color: Colors.black54,
                          borderRadius:
                              BorderRadius.vertical(bottom: Radius.circular(8)),
                        ),
                        child: Text(
                          item['name']!,
                          style: const TextStyle(
                              color: Colors.white, fontSize: 14),
                        ),
                      )
                    ],
                  ),
                );
              }).toList(),
            ),
          ),

          Expanded(
            child: ListView.builder(
              padding: const EdgeInsets.all(16),
              itemCount: messages.length,
              itemBuilder: (context, index) {
                final msg = messages[index];
                final isUser = msg['sender'] == 'user';
                return Align(
                  alignment:
                      isUser ? Alignment.centerRight : Alignment.centerLeft,
                  child: Container(
                    padding: const EdgeInsets.all(12),
                    margin: const EdgeInsets.symmetric(vertical: 4),
                    constraints: const BoxConstraints(maxWidth: 300),
                    decoration: BoxDecoration(
                      color: isUser ? Colors.lightBlueAccent : Colors.grey[200],
                      borderRadius: BorderRadius.circular(12),
                    ),
                    child: Column(
                      crossAxisAlignment: isUser
                          ? CrossAxisAlignment.end
                          : CrossAxisAlignment.start,
                      children: [
                        Text(
                          msg['text'],
                          style: const TextStyle(fontSize: 14),
                        ),
                        const SizedBox(height: 4),
                        Text(
                          msg['time'],
                          style: const TextStyle(
                              fontSize: 10, color: Colors.black45),
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),

          // Quick Reply Section
          // Padding(
          //   padding: const EdgeInsets.symmetric(horizontal: 8),
          //   child: Wrap(
          //     spacing: 8,
          //     runSpacing: 8,
          //     children: quickReplies
          //         .map((reply) => OutlinedButton(
          //               onPressed: () {},
          //               child: Text(reply),
          //             ))
          //         .toList(),
          //   ),
          // ),
          // const SizedBox(height: 8),

          // Padding(
          //   padding: const EdgeInsets.symmetric(horizontal: 8),
          //   child: Wrap(
          //     spacing: 8,
          //     runSpacing: 8,
          //     children: paymentReplies
          //         .map((reply) => OutlinedButton(
          //               onPressed: () {},
          //               child: Text(reply),
          //             ))
          //         .toList(),
          //   ),
          // ),

          // Bottom sticky button
          Container(
            width: double.infinity,
            margin: const EdgeInsets.all(16),
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.lightBlue,
                padding: const EdgeInsets.symmetric(vertical: 16),
              ),
              onPressed: () {},
              child: const Text('开始服务',
                  style: TextStyle(fontSize: 16, color: Colors.white)),
            ),
          ),
        ],
      ),
    );
  }
}