简单实用Flutter实现聊天

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 响应数据流变得更简单。