flutter - BoxDecoration 中的 FadeInImage

Question

我喜欢 FadeInImage

我能做到

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

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

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

我收到这个错误:

不能将参数类型“FadeInImage”分配给参数类型“ImageProvider”

我该怎么做？

用例

在轮播中，在网络加载图像进入之前放置占位符

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

  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;
  }
}