Как добавить fadeinImage в виде карусели - PullRequest
Новая
       27

Как добавить fadeinImage в виде карусели

0 голосов
/ 16 февраля 2019

У меня есть следующий код, который отображает сетевые образы в карусели.Когда я запускаю свое приложение, я вижу пустой белый экран в моей карусели.Я хотел бы показать изображение заполнителя вместо этого.Я попытался поместить изображение заполнителя в предложение if, но в предложении if заполнитель отображается только тогда, когда я перехожу на другой экран и возвращаюсь к экрану карусели.Я хочу, чтобы заполнитель отображался при запуске приложения.Как мне этого добиться?

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

1 Ответ

0 голосов
/ 16 февраля 2019

вы можете использовать библиотеку cached network image, которая обеспечивает delay, placeholder и анимацию затухания, например: 

  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),
  )
...