Flutter 实现聊天的方式有很多种，这里提供一种简单的实现方式：
1.使用 Flutter 中提供的 WebSocket API 进行实时通信； 2.使用 Flutter 中提供的 Stream API 监听 WebSocket 的数据流； 3.将接收到的消息渲染到列表中。
下面是代码示例：
import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:web_socket_channel/io.dart'; class ChatPage extends StatefulWidget { const ChatPage({Key? key}) : super(key: key); @override _ChatPageState createState() => _ChatPageState(); } class _ChatPageState extends State<ChatPage> { TextEditingController _textController = TextEditingController(); IOWebSocketChannel? _channel; List<String> _messages = []; @override void initState() { super.initState(); _connect(); } void _connect() { _channel = IOWebSocketChannel.connect('ws://localhost:3000'); _channel?.stream.listen((message) { setState(() { _messages.add(message); }); }); } void _sendMessage(String text) { if (text.isNotEmpty) { _channel?.sink.add(jsonEncode({'message': text})); _textController.clear(); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Flutter Chat'), ), body: Column( children: <Widget>[ Expanded( child: ListView.builder( itemCount: _messages.length, itemBuilder: (BuildContext context, int index) { return ListTile( title: Text(_messages[index]), ); }, ), ), Container( padding: const EdgeInsets.symmetric(horizontal: 8.0), child: Row( children: <Widget>[ Expanded( child: TextField( controller: _textController, decoration: const InputDecoration(hintText: 'Enter a message'), ), ), IconButton( icon: Icon(Icons.send), onPressed: () { _sendMessage(_textController.text); }, ) ], ), ) ], ), ); } @override void dispose() { _channel?.sink.close(); super.dispose(); } }
在这个示例中，我们通过 WebSocket 连接到本地服务器，并使用 JSON 编码消息。_connect() 方法连接到 WebSocket，_sendMessage() 方法将消息发送到服务器。Flutter 的 StreamBuilder 可以使 UI 响应数据流变得更简单。
