时间戳

首页 > 解决方案 > 我如何切换此代码以显示在 carousel pro flutter 上

android - 我如何切换此代码以显示在 carousel pro flutter 上

问题描述

我正在尝试将这些图像显示到 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());
  }
}

标签： androidfirebaseflutterdartfirebase-storage

解决方案

如果可能，请提供代码示例

我正在尝试类似的方法，但此处的图像来自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,
      ),
    );

推荐阅读