TransWikia.com

Carousel Flutter

Stack Overflow em Português Asked by user198735 on December 30, 2021

Olá!

Desenvolvi um carousel no flutter. Gostaria de saber duas coisas – mesmo porque já tentei e não consegui. Primeiro, se é possível colocar sobre a imagem que é exibida no carousel uma mensagem que vem junto dentro do objeto, e essa mensagem ser dinâmica assim como a imagem? Segundo, é possível fazer com que a imagem seja "clicável" e ao clicar redirecione para um link específico?

Segue o código:


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


One Answer

Consegui resolver!

Segue o código:


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

Criei um widget para colocar a mensagem acima da imagem, e deixa-la clicável.

Obrigado a todos!

Answered by user198735 on December 30, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP