0

在 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: () {}
    );
  }
}
4

0 回答 0