CODEWITHSUNDEEP
dartfluttercarouselflutter-layout
mcfred
mcfred

Reputation: 1391

How to add fadeinImage in carousel view

I have the following code which displays network images in a carousel. When I start my app, I see a blank white screen in my carousel. I would like to show a placeholder image instead. I tried to put the placeholder image under the if clause but the if clause displays the placeholder only when I navigate to another screen and come back to the carousel screen. I want the placeholder to be displayed when I start my app. How can I achieve this ? 

return Container(
  child: FutureBuilder(
      future: getCarouselWidget(),
      builder: (context, AsyncSnapshot snapshot) {
        List<NetworkImage> list = new List<NetworkImage>();
        if (snapshot.connectionState == ConnectionState.waiting || snapshot.connectionState == ConnectionState.active
        ) {
          debugPrint("connection state is " + snapshot.connectionState.toString() );
          return new FadeInImage(
            height: 200.0, // Change it to your need
            width: 300.0, // Change it to your need
            fit: BoxFit.cover,
            placeholder: new AssetImage("assets/placeholder.jpg"),
            image: new AssetImage("assets/placeholder.jpg"),
          );
        } else if(snapshot.connectionState == ConnectionState.done) {
          debugPrint("connection state is inside else" + snapshot.connectionState.toString() );
          if (snapshot.hasError) {
            return new Text("fetch error");
          } else {
            for (int i = 0; i < snapshot.data.length; i++) {
              //debugPrint("Index is " + idx.toString());
              list.add(NetworkImage(snapshot.data[i].data["image"]));
              //idx++;
            }
            return new Container(
                height: 250.0,
                child: InkWell(
                    child: new Carousel(
                      boxFit: BoxFit.cover,
                      images: list,
                      onImageTap: (imageIndex) {
                        Navigator.of(context).push(
                          new MaterialPageRoute(
                            builder: (context) => new CustomClass(
                                name:
                                    snapshot.data[imageIndex].data["title"],
                                pic: snapshot
                                    .data[imageIndex].data["image"]),
                          ),
                        );
                      },
                      autoplay: false,
                      dotSize: 4.0,
                      indicatorBgPadding: 4.0,
                      animationCurve: Curves.fastOutSlowIn,
                      animationDuration: Duration(milliseconds: 1000),
                    )));
          }
        }
      }),
);

Upvotes: 0

Views: 1125

Answers (1)

Mazin Ibrahim
Mazin Ibrahim

Reputation: 7869

you can use cached network image library which provides delay, placeholder and fade animations, an example :

  child: new CachedNetworkImage(
             imageUrl: "http://via.placeholder.com/350x150",
             placeholder: new Image.asset('assets/placeholder.jpg'),
             errorWidget: new Icon(Icons.error),
             fit: BoxFit.fill,
             fadeInCurve: Curves.easeIn ,
             fadeInDuration: Duration(seconds: 2),
             fadeOutCurve: Curves.easeOut,
             fadeOutDuration: Duration(seconds: 2),
  )

Upvotes: 2

Related Questions