Carousel Flutter

Asked

Viewed 574 times

-1

Hello!

I developed a Carousel in flutter. I would like to know two things - even because I have tried and failed. First, if it is possible to place on the image that is displayed in the Carousel a message that comes together within the object, and this message be dynamic as well as the image? Second, it is possible to make the image "clickable" and when clicking redirect to a specific link?

Follows the code:


final carousel = Carousel(
      images: listBannerNews
          .map((bannerNews) =>
              Image.memory(base64Decode(bannerNews.imagem), fit: BoxFit.fill))
          .toList(),
      dotSize: 4.0,
      dotSpacing: 15.0,
      dotColor: Colors.white,
      borderRadius: true,
      autoplayDuration: Duration(seconds: 5),
    );

    final bannerTitle = Padding(
      padding: EdgeInsets.only(top: 200.0, left: 20.0),
      child: Container(
        child: Text('Teste', style:  TextStyle(color: Colors.white)),
      ),
    );

    return SizedBox(
      height: 322,
      width: MediaQuery
          .of(context)
          .size
          .width,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(4),
        child: Stack(
          children: [
            carousel,
            bannerTitle,
          ],
        ),
      ),
    );
  }
flutter dart

  • What the class code looks like Carousel? Was it developed by you? Is it from a package? Also, it would help by including a photo of the layout you want and one of how you are now with what you have tried to do to solve your problem.

  • Hi. I did that. Carousel is actually a widget of the own flutter and in this case it is being set in the variable "Carousel", as in the example I had sent

  • In addition to the points quoted by @Naslausky, you need to see if Carousel.images accepts List<Widget>. If accept, yes you can do everything you asked, just create a Customwidget and within it put a Stack with the image and text you want.

  • @user198735 As far as I know Flutter does not have its own Carousel Widget... According to your example, you are using this one carousel_pro.

  • is that same @Matheusribeiro widget I’m using

  • From what I looked at (kind of on top) it is possible you do what you want, doing as I mentioned in the comment above. Obs.: don’t put your Carousel in a FINAL property, place it directly in the Widgets tree of the BUILD method.

Show 1 more comment

1 answer

1

I managed to solve!

Follows the code:


_buildCarousel(List<BannerNews> listBannerNews) {

    Carousel carousel = Carousel(
      dotSize: 4.0,
      dotSpacing: 15.0,
      dotColor: Colors.white,
      borderRadius: true,
      autoplayDuration: Duration(seconds: 5),
      images: listBannerNews
          .map((bannerNews) => _buildBannerBody(bannerNews))
          .toList(),
    );


    return SizedBox(
      height: 322,
      width: MediaQuery.of(context).size.width,
      child: carousel,
    );
  }

  _buildBannerBody(BannerNews bannerNews) {
    return Stack(children: [
      GestureDetector(
        onTap: () => launch(banner.path),
        child: Image.memory(
          base64Decode(bannerNews.imagem),
          fit: BoxFit.cover,
          width: double.infinity,
          height: double.infinity,
        ),
      ),
      Positioned(
        bottom: 60.0,
        left: 30.0,
        child: Text(
          bannerNews.tooltip,
          style: TextStyle(color: Colors.white, fontSize: 18),
        ),
      )
    ]);
  }

I created a widget to put the message above the image, and leave it clickable.

Thank you all!

Browser other questions tagged flutter dart

You are not signed in. Login or sign up in order to post.