如何解决在将新图像上载到Firebase存储中时,如何制作一个填充项目的图像网格视图?
在GridView.builder中,我们必须为itemCount属性提供一个固定值。那么,当我们通过将新图像上传到Firebase存储中来向网格视图添加新图像时,更新此属性的最佳方法是什么?在这里,我只是使用映像名称从Firebase存储中获取映像。但是我需要更改它以获取图像URL并显示图像。这是我的代码,
class ImagesScreen extends StatelessWidget {
// building grid view
Widget makeImagesGrid(){
return GridView.builder(
itemCount: 12,//number of grid items
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,),itemBuilder: (context,index){
return ImageGridItem(index + 1); //populating with grid items
},);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Image Grid'),drawer: NavDrawer(),body: Container(
child: makeImagesGrid(),);
}
}
class ImageGridItem extends StatefulWidget {
int _index; //each grid item index
ImageGridItem(int index) {
this._index = index;
}
@override
_ImageGridItemState createState() => _ImageGridItemState();
}
class _ImageGridItemState extends State<ImageGridItem> {
Uint8List imageFile; //to store image file
//firebase storage reference
StorageReference photosReference =
FirebaseStorage.instance.ref().child("photos");
//getting image from the firestore
getImage() {
if (!requestedIndex.contains(widget._index)) {
//when requested index does not cotain in the list
int MAX_SIZE = 7 * 1024 * 1024; //maximum file size for an image
//accessing firebase storage to get the photo
photosReference
.child('${widget._index}.jpg')
.getData(MAX_SIZE)
.then((value) {
//value is image reference
this.setState(() {
imageFile = value; //updating imageFile
});
//insert image file to the imageData map
imageData.putIfAbsent(widget._index,() {
return value;
});
}).catchError((error) {});
//insert image file index to the requestedIndex list in the data_holder.dart
requestedIndex.add(widget._index);
}
}
//to decide whether to show the default text or actual image
Widget decideGrideTileWidget() {
if (imageFile == null) {
//showing default text until it show the image
return Center(child: Text('No Data'));
} else {
return Hero(
tag: imageFile.toString(),child: Image.memory(
//showing the actual image
imageFile,fit: BoxFit.cover),);
}
}
@override
void initState() {
super.initState();
if (!imageData.containsKey(widget._index)) {
//when imageData map does't cotains the key
getImage();
} else {
//if its already contains get the image from the imageData map
imageFile = imageData[widget._index];
}
}
@override
Widget build(BuildContext context) {
return InkWell(
child: Padding(
padding: const EdgeInsets.all(3.0),child: GridTile(
child: decideGrideTileWidget(),onTap: () {}
);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。