Блог

Я пытаюсь отобразить эти изображения в carousel pro, но безуспешно.
Есть несколько фотографий из хранилища firestore, которые я хочу отобразить в своем мобильном приложении, и они работают, но я просто хочу быть на слайде карусели.

 class ImagesScreen extends StatelessWidget {
  Widget makeImagesGrid() {
    return GridView.builder(
      itemCount: 7,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2),
        itemBuilder: (context, index) {
          return ImageGridItem(index 1);
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Test Image"),
      ),
      body: Container(
        child: makeImagesGrid(),
      ),
    );
  }
}

class ImageGridItem extends StatefulWidget {

  int _index;

  ImageGridItem(int index){
    this._index = index;
  }
  @override
  _ImageGridItemState createState() => _ImageGridItemState();
}

class _ImageGridItemState extends State<ImageGridItem> {
  
  Uint8List imageFile;
  StorageReference photosReference = FirebaseStorage.instance.ref().child("images/reklama");
  
  getImage() {
    int MAX_SIZE = 7*1024*1024;
    
    photosReference.child("reklama_${widget._index}.jpg").getData(MAX_SIZE).then((data) {
      this.setState(() {
        imageFile = data;
      });
    }).catchError((error){
      debugPrint(error.toString());
    });
  }
  
  Widget decideGridTileWidget() {
    if(imageFile == null) {
      return Center(child: Image.asset("images/reklama.jpg"));
    }else {
      return Image.memory(imageFile,fit: BoxFit.cover);
    }
  }

  @override
  void initState() {
    super.initState();
    getImage();
  }
  
  @override
  Widget build(BuildContext context) {
    return GridTile(child: decideGridTileWidget());
  }
}
  

cached_network_image и carousel_slider должны помочь вам делать то, что вы хотите, вам действительно не нужно обрабатывать изображение из firestore и виджет carousel sliding самостоятельно. Пример использования cached_network_image для отображения изображения из firestore приведен ниже:

 FutureBuilder(
  future: FirebaseStorage.instance
         .ref()
         .child('images/kartelaime.jpg')  // Your image path in firestore
         .getDownloadURL(),
  builder: (context, snapshot) {
      if(snapshot.data != null)
        return CachedNetworkImage(imageUrl: snapshot.data);
      else return Container();  
  }
)
  

Пожалуйста, если это возможно, пример кода

я пытаюсь что-то подобное, но изображения здесь должны быть из хранилища firebase, и, как в первом примере, не каждое изображение должно указывать путь, а все изображения в этой папке

 Widget build(BuildContext context) {
    Widget imageCarousel = new Container(
      height: 200.0,
      child: new Carousel(
        boxFit: BoxFit.cover,
        images: [
          AssetImage('images/kartelaime.jpg'),
          AssetImage('images/shperblime.png'),
          AssetImage('images/7vitemeridian.png'),
          AssetImage('images/ndertshpis.jpg'),
          AssetImage('images/ofertatjavore.png'),
          AssetImage('images/zgjerimi.jpeg'),
        ],
        autoplay: false,
        animationCurve: Curves.fastOutSlowIn,
        animationDuration: Duration(milliseconds: 1000),
        dotSize: 4.0,
        indicatorBgPadding: 4.0,
        dotBgColor: Colors.transparent,
      ),
    );