如何在Flutter中使用StreamBuilder侦听聊天应用程序的新数据

Question

我试图创建一个聊天应用程序。所有的消息都是从api作为列表抓取。这里的问题是，只有当我重新加载页面时才会显示新消息。我不想这样。我想它喜欢当新消息被添加到服务器，它应该显示在屏幕上，而无需重新加载页面(如聊天应用程序)。如何收听新消息并显示在屏幕上。这里我用的是listview。生成器显示所有消息。我想我想使用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:[e-mail],message:Hello},{user:[e-mail],message:How are you},{user:[e-mail],message:What u all doing},{user:[e-mail],message:Lets go for a trip}]

Answer 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中使用的所有消息创建一个watch变量。

请参考提供商文档。