我一直在玩一个扑动和飞镖的圆形，而你可能会在你可能会感到困惑的一点上有所作为 . 我的目标是从api构建一个列表视图，一旦api改变一个，如果它的字段说 . url字段，它会自动更新列表视图 .
这个alll可以通过使用firebase插件完成，但如果不使用fire base但是自托管的json api'couchdb / loopback.io' . 我在期货，流和redux之间迷失了 . 所以请给我一个例子并保持简单 .
edite：01;提供代码和用例;
下面是我的应用程序 . 它可以从自托管的api中获取图像，如上所述'couchdb / loopback.io'，每次点击按钮，点击部分都可以忽略，我的目标是让列表自动更新，如果新的'post'被解雇了他api由邮递员说 . 现在;我一直在阅读溪流redux我只是无法包围我的脑袋，可能是读者应该具备的假定知识的文档的语言，这就是为什么我要求一个例子，所以我可以很好地理解它 .
import 'package:flutter/material.dart';
import 'src/app.dart';
void main(){
runApp(App());
}
class ImageModel {
int id;
String name;
String url;
ImageModel.fromJson(parsedJson){
id = parsedJson['id'];
name = parsedJson['name'];
url = parsedJson['url'];
}
}
//import
import 'package:flutter/material.dart';
import 'package:http/http.dart' show get; //import for making http requests
import 'models/image_model.dart'; //import model
import 'dart:convert'; //convert json
import 'widgets/image_list.dart'; //import image widget
class App extends StatefulWidget{
createState() {
return AppState();
}
}
// create class
class AppState extends State<App> {
int counter = 0;
List<ImageModel> images = [];
void fetchImage() async{
counter++;
var response = await get('http://192.168.1.66:3000/api/images/$counter');
var imageModel = ImageModel.fromJson(json.decode(response.body));
setState(() {
images.add(imageModel);
});
}
Widget build(context) {
return MaterialApp(
home: Scaffold(
body: ImageList(images),
floatingActionButton: FloatingActionButton(
onPressed: fetchImage,
child: Icon(Icons.add),
),
appBar: AppBar(
title: Text('Title'),
),
),
);
}
}
import 'package:flutter/material.dart';
import '../models/image_model.dart';
class ImageList extends StatelessWidget {
final List<ImageModel> images;
ImageList(this.images);
Widget build(context) {
return ListView.builder(
itemCount: images.length,
itemBuilder: (context,int index){
return Container(
margin: EdgeInsets.all(20.0),
child: Image.network(images[index].url),
);
},
);
}
}
2 回答
你可以使用Dart WebSockets完成任务; Firebase原则上没有别的 - 自定义WSS-API甚至可以由实际的SQL服务器支持 . 一个广泛的问题总会得到广泛的答案 .
您可以使用firestore并使用StreamBuilder小部件引用数据 . 每当firestore集合中发生更改时，流都会监听更改并重建ui
You can watch it in action in this talk