BoxDecoration中的FadeInImage [英] FadeInImage in BoxDecoration

问题描述

我喜欢FadeInImage

I love the FadeInImage

我可以做到

child: FadeInImage.assetNetwork(
    image: 'https://placeimg.com/640/480/any',
    placeholder: 'assets/images/loading.gif',
  ),

我想在BoxDecoration中使用FadeInImage，如下所示.

I want to use the FadeInImage in a BoxDecoration as below.

decoration: BoxDecoration(
  borderRadius: BorderRadius.circular(8.0),
  image: DecorationImage(
    image: FadeInImage.assetNetwork(
        '${document['image']}'),
    fit: BoxFit.cover,
  ),
),

我收到此错误:

The argument type 'FadeInImage' can't be assigned to the parameter type 'ImageProvider'

我该怎么办?

用例

在轮播中，在放入网络加载的图片之前放入占位符

In a carousel, put in placeholder, before network loaded image comes in

这是我的轮播小部件(我在Flutter上使用carousel_slider软件包)

Here's my carousel Widget (I'm using the carousel_slider package for Flutter)

  Widget _carouselSlider(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: Firestore.instance.collection('events').snapshots(),
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) return new Text('Error: ${snapshot.error}');
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
            return new Text('Loading...');
          default:
            return CarouselSlider(
              height: 150.0,
              enlargeCenterPage: true,
              enableInfiniteScroll: false,
              items: snapshot.data.documents.map((DocumentSnapshot document) {
                print('Listing the documents: $document');
                return Builder(
                  builder: (BuildContext context) {
                    return GestureDetector(
                      onTap: () {
                        print('I am clicked');
                        Navigator.pushNamed(context, '/detail');
                      },
                      child: Container(
                        width: MediaQuery.of(context).size.width,
                        margin: EdgeInsets.only(
                            left: 5.0, right: 5.0, bottom: 20.0),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(8.0),
                          image: DecorationImage(
                            image: NetworkImage('${document['image']}'),
                            fit: BoxFit.cover,
                          ),
                        ),
                        child: Center(
                          child: Text(
                            '${document['name']}',
                            style: TextStyle(fontSize: 16.0),
                          ),
                        ),
                      ),
                    );
                  },
                );
              }).toList(),
            );
        }
      },
    );
  }

所以，对于这个部分

image: DecorationImage(
                        image: NetworkImage('${document['image']}'),
                        fit: BoxFit.cover,
                      ),

我希望有一个占位符方法，而不仅仅是文本，直到网络加载的图像到达为止.

I wish to have a placeholder approach, instead of only the text until network loaded image arrives.

推荐答案

我实现了类似的目标.此图像是页面顶部的英雄图像，因此是高度. width和BoxFit.cover的组合使图像覆盖视口. 加载图像时，加载器(在视觉上)是隐藏的.

I achieved something similar. This image is a a hero image at the top of the page, hence the height. The combination of width and BoxFit.cover make the image cover the viewport. The loader is (visually) hidden when the image loads.

final imageWithLoader = Container(
    height: MediaQuery.of(context).size.height * 0.5,
    child: Stack(children: <Widget>[
      Center(child: CircularProgressIndicator()),
      Center(
        child: FadeInImage.memoryNetwork(
            placeholder: kTransparentImage,
            image: library.url,
            width: MediaQuery.of(context).size.width,
            fit: BoxFit.cover),
      ),
    ]));

这篇关于BoxDecoration中的FadeInImage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！