Flutter / How to insert url into an image using a carousel package

Question

Hello im beginner in Flutter and I'm studying carousel package. I really need your advisement. Is there any way to call different url links if I press each of sliding images?

here is my code with carouselSlider:

import 'package:carousel_slider/carousel_controller.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:1/size_config.dart';

class know extends StatefulWidget {
  const know({
    super.key,
  });

  @override
  State<know> createState() => _know();
}

class _know extends State<know> {
  int _current = 0;
  final CarouselController _controller = CarouselController();
  List imageList = ['assets/images/1.png', 'assets/images/2.png'];

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        child: Container(
      margin: EdgeInsets.symmetric(horizontal: getProportionateScreenWidth(20)),
      width: double.infinity,
      height: 150,
      clipBehavior: Clip.hardEdge,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20)),
      child: Stack(
        children: [sliderWidget(), sliderIndicator()],
      ),
    ));
    /* onTap: () {
          launchUrl(Uri.parse(
              'httplink'));
        }); */
  }

 Widget sliderWidget() {
    return CarouselSlider(
      carouselController: _controller,
      items: imageList.map(
        (imgLink) {
          return Builder(
            builder: (context) {
              return SizedBox(
                width: MediaQuery.of(context).size.width,
                child: Image(
                  fit: BoxFit.fill,
                  image: AssetImage(
                    imgLink,
                  ),
                ),
              );
            },
          );
        },
      ).toList(),
      options: CarouselOptions(
        height: 300,
        viewportFraction: 1.0, 
        autoPlay: true, 
        autoPlayInterval: const Duration(seconds: 4),
        onPageChanged: (index, reason) {
          setState(() {
            _current = index;
          });
        },
      ),
    );
  }

  Widget sliderIndicator() {
    return Align(
      alignment: Alignment.bottomCenter,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: imageList.asMap().entries.map((entry) {
          return GestureDetector(
            onTap: () => _controller.animateToPage(entry.key),
            child: Container(
              width: 12,
              height: 12,
              margin:
                  const EdgeInsets.symmetric(vertical: 8.0, horizontal: 4.0),
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color:
                    Colors.white.withOpacity(_current == entry.key ? 0.9 : 0.4),
              ),
            ),
          );
        }).toList(),
      ),
    );
  }
}

I've looked up a lot of references, but I haven't figured out how to apply the link separately using url_launcher.

Answer 1

Are the url links point to pages inside your app or they are external to your app? Anyway, i have done something similar to this, and on the builder, i wraped it a InkWell. Each slider knows its index, so,if you have an object as value on the map, you can access those url dynamically, or you can do your own logic on the onTap method.