title: FadeInImage in BoxDecoration
body: <p>I love the FadeInImage</p>
  
  <p>I can do this</p>
  
  <pre><code>child: FadeInImage.assetNetwork(
      image: 'https://placeimg.com/640/480/any',
      placeholder: 'assets/images/loading.gif',
    ),
  </code></pre>
  
  <p>I want to use the <code>FadeInImage</code> in a <code>BoxDecoration</code> as below.</p>
  
  <pre><code>decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(8.0),
    image: DecorationImage(
      image: FadeInImage.assetNetwork(
          '${document['image']}'),
      fit: BoxFit.cover,
    ),
  ),
  </code></pre>
  
  <p>I get this error:</p>
  
  <p><code>The argument type 'FadeInImage' can't be assigned to the parameter type 'ImageProvider'</code></p>
  
  <p>How would I go about it?</p>
  
  <p>Use Case</p>
  
  <p>In a carousel, put in placeholder, before network loaded image comes in</p>
  
  <p>Here's my carousel Widget (I'm using the <code>carousel_slider</code> package for Flutter)</p>
  
  <pre><code>  Widget _carouselSlider(BuildContext context) {
      return StreamBuilder&lt;QuerySnapshot&gt;(
        stream: Firestore.instance.collection('events').snapshots(),
        builder: (BuildContext context, AsyncSnapshot&lt;QuerySnapshot&gt; 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(),
              );
          }
        },
      );
    }
  </code></pre>
  
  <p>So, for the part</p>
  
  <pre><code>image: DecorationImage(
                          image: NetworkImage('${document['image']}'),
                          fit: BoxFit.cover,
                        ),
  </code></pre>
  
  <p>I wish to have a placeholder approach, instead of only the text until network loaded image arrives.</p>