Question

我喜欢FadeInImage

我可以做到

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

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

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'

我该怎么办？

用例

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

这是我的轮播小部件（我正在将carousel_slider软件包用于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,
                      ),

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

Answer 1

这是代码。

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
          child: FutureBuilder<bool>(
        future: _myFuture(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (snapshot.hasData) return _yourWidget();
          return CircularProgressIndicator();
        },
      )),
    );
  }

  Widget _yourWidget() {
    return Stack(
      children: <Widget>[
        Center(
          child: FadeInImage(
            width: 300,
            height: 300,
            placeholder: AssetImage(chocolateImage),
            image: NetworkImage(poolImageUrl),
            fit: BoxFit.cover,
          ),
        ),
        Center(child: Text('Pool', style: TextStyle(fontSize: 36.0, color: Colors.white, fontWeight: FontWeight.bold))),
      ],
    );
  }

  Future<bool> _myFuture() async {
    await Future.delayed(Duration(milliseconds: 10500));
    return true;
  }
}

Answer 2

这是因为FadeInImage不是ImageProvider小部件的一种，您需要在AssetImage内使用NetworkImage，DecorationImage...。

在DecorationImage之外，就像在容器的子代中一样，您也可以使用它。

例如

       Container(
          child: FadeInImage.memoryNetwork(
            placeholder: kTransparentImage,
            image: product.thumbnail,
            fit: BoxFit.contain,
          ),
        ),

要了解有关此小部件的更多信息，请对此进行检查：

Flutter Widget of The Week - FadeIn Image

Answer 3

我取得了类似的成绩。此图像是页面顶部的英雄图像，因此是高度。 width和BoxFit.cover的组合使图像覆盖视口。加载图像时，加载器（在视觉上）是隐藏的。

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

3 个答案: