Flutter Firebase 存储图像检索流

Question

是否可以将.getDownloadURL((字符串放在流中，以便小部件树中的多个位置可以访问它，并在更改时不断更新？

目前我正在尝试设置流构建器：

return Scaffold(
body: ListView.builder(
itemCount: products.length,
itemBuilder: (context, index) {
return StreamBuilder<String>(
stream: ImageDatabaseService().getImageLocation(products[index]),
builder: (context, snapshot) {
return ProductTile(product: products[index]);
});
},

该流来自 ImageDataseService 类：

class ImageDatabaseService {
String _imageLocation;
StorageReference ref;
void init() {}
Stream<String> getImageLocation(Product product) {
ref = FirebaseStorage.instance
.ref()
.child('images/' + product.kaizenID + '.png');
return getURL();
}
Future<String> getURL() async {
await ref.getDownloadURL().then((location) {
return location;
});
}
}

问题是 ImageDatabaseService 在需要返回流字符串时返回一个未来字符串，但在小部件端我只需要一个字符串

我一直在搜索这些论坛和网络，但没有遇到任何有用的东西。

Answer 1

将 ImageDatabaseService 类更改为;

class ImageDatabaseService {
StorageReference ref;
void init() {}
Stream<String> get imageLocation(Product product) {
ref = FirebaseStorage.instance
.ref()
.child('images/' + product.kaizenID + '.png');
return ref.getDownloadURL()
.asStream().map((downloadUrl) 
=> downloadUrl;
}
}

它将在流构建器中返回一个snapshot.data字符串。

不要忘记将您的流更改为;

stream: ImageDatabaseService().imageLocation(products[index]),

不要忘记添加一个条件来检查构建器中的连接状态。

if(snapshot.ConnectionState == ConnectionState.active){
return ProductTile(product: products[index]);
} else{
return Center(child: CircularProgressIndicator(),);
}

Answer 2

有趣的是，提供者不会将小部件构建方法中的 void 方法中的 showModalSheet 计为子项。我不得不在其中放置另一个流提供程序，以便 EditProduct 树来获取它

Widget build(BuildContext context) {
var _imageLocation = Provider.of<String>(context);
void _showEditProductPanel() {
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (context) {
return Container(
padding: EdgeInsets.symmetric(vertical: 50.0, horizontal: 60.0),
child: StreamProvider<String>.value(
initialData: '',
value: ImageDatabaseService().imageLocation(widget.product),
child: EditProductForm(product: widget.product),
));
});
}
return Padding(
padding: EdgeInsets.only(top: 8.0),
child: Card(
margin: EdgeInsets.fromLTRB(20, 6, 20, 0),
child: ListTile(
leading: Image.network(_imageLocation),
title: Text(widget.product.name ?? ''),
subtitle: Text('KaizenID: ${widget.product.kaizenID}'),
trailing: FlatButton(
child: Icon(Icons.edit),
onPressed: () => _showEditProductPanel(),
),
),
),
);
}