如何在 Flutter 中使用 StreamBuilder 为类似聊天的应用程序监听新数据答案

【问题标题】：How to listen for new data for chat like app using StreamBuilder in Flutter如何在 Flutter 中使用 StreamBuilder 为类似聊天的应用程序监听新数据
【发布时间】：2021-12-15 00:11:27
【问题描述】：

我正在尝试创建一个聊天应用。所有消息都从 api 作为列表获取。这里的问题是只有当我重新加载页面时它才会显示新消息。我不想这样。我希望它就像将新消息添加到服务器时一样，它应该显示在屏幕上而不重新加载页面（如聊天应用程序）。如何收听新消息并在屏幕上显示。在这里，我使用 listview.builder 来显示所有消息。我想我想使用 StreamBuilder 来实现这个功能。我如何将下面的代码更改为此功能。下面添加完整的代码。

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class MessageScreen extends StatefulWidget {
  const MessageScreen({Key? key}) : super(key: key);

  @override
  _MessageScreenState createState() => _MessageScreenState();
}

class _MessageScreenState extends State<MessageScreen> {

  List allMessages = [];

  TextEditingController message = TextEditingController();

  void getAllMessages() async {
    var url = '$baseurl/getMessages.php';
    var response = await http.get(Uri.parse(url));
    if (response.statusCode == 200) {
      var jsonData = json.decode(response.body);
      setState(() {
        allMessages = jsonData;
      });
    }
  }

  @override
  void initState() {
    super.initState();
    getAllMessages();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Chat'),
      ),
      body: Column(
        children: [
          Container(
            height: 500,
            child: ListView.builder(
              itemCount: allMessages.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(
                    allMessages[index]['user'],
                  ),
                  subtitle: Text(
                    allMessages[index]['message'],
                  ),
                );
              },
            ),
          ),
          Container(
            child: Column(
              children: [
                TextField(
                  controller: message,
                ),
                MaterialButton(
                  onPressed: (){
                     //Code to send message
                  },
                  child: const Text('SEND'),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

来自api的响应是

[{user:john@gmail.com,message:Hello},{user:rose@gmail.com,message:How are you},{user:rahul@gmail.com,message:What u all doing},{user:rose@gmail.com,message:Lets go for a trip}]

【问题讨论】：

标签： flutter dart flutter-dependencies flutter-web stream-builder

【解决方案1】：

您可以使用提供者状态管理并移动您的功能

void getAllMessages() async {
var url = '$baseurl/getMessages.php';
var response = await http.get(Uri.parse(url));
if (response.statusCode == 200) {
  var jsonData = json.decode(response.body);
  setState(() {
    allMessages = jsonData;
  });
}

}

到提供者类并为 listview.builder 中使用的所有消息创建一个监视变量。

请参阅提供者文档。

【讨论】：