Route to specific page using Flutter Carousel Slider when image is selected

Question

I am trying to add "onTap" or something similar to navigate to the specified routes (routeName) for each item that is mapped. I keep getting errors because I am new to flutter and I do not know where this piece of code should be placed. Also, Is there a better way to structure my code?

Here is the code for my Flutter Carousel Slider

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:carousel_slider/carousel_options.dart';

final List<Map> robot = [
  {
    "name": "Image1",
    "image": 'assets/images/image1.png',
    "routeName": "/image1Dashboard"
  },
  {
    "name": "Image2",
    "image": 'assets/images/image2.png',
    "routeName": "/image2Dashboard"
  },
  {
    "name": "Simulation",
    "image": 'assets/images/sim.png',
    "routeName": "/simDashboard"
  },
];

final List<Widget> imageSliders = robot
    .map((item) => new Container(
          child: Container(
            margin: EdgeInsets.all(5.0),
            child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(5.0)),
                child: Stack(
                  alignment: Alignment.center,
                  children: <Widget>[
                    Image.asset(item["image"], fit: BoxFit.cover, width: 700.0),
                    Positioned(
                      bottom: 0.0,
                      // left: 0.0,
                      // right: 0.0,
                      child: Container(
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            colors: [
                              Color.fromARGB(0, 0, 0, 0),
                              Color.fromARGB(0, 0, 0, 0)
                            ],
                            begin: Alignment.bottomCenter,
                            end: Alignment.topCenter,
                          ),
                        ),
                        padding: EdgeInsets.symmetric(
                            vertical: 10.0, horizontal: 10.0),
                        child: Text(
                          '${item["name"]}',
                          // '${nameList[imgList.indexOf(item)]}',
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 20.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  ],
                )),
          ),
        ))
    .toList();

class MyCarousel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Select Robot')),
      body: Container(
          // margin: EdgeInsets.symmetric(horizontal: 5),
          alignment: Alignment.center,
          child: CarouselSlider(
            options: CarouselOptions(
              height: 400,
              // aspectRatio: 2,
              enlargeCenterPage: true,
              enableInfiniteScroll: false,
              viewportFraction: .5,
              initialPage: 0,
              autoPlay: true,
              autoPlayInterval: Duration(seconds: 4),
              autoPlayCurve: Curves.fastOutSlowIn,
              enlargeStrategy: CenterPageEnlargeStrategy.scale,
            ),
            items: imageSliders,
          )),
    );
  }
}

Answer 1

Wrap the outer container in the imageSliders list with a GesturDetector and add a Navigator. That should work.

final List<Widget> imageSliders = robot
    .map((item) => new Container(
          child:GestureDetector(
child: Container(
            margin: EdgeInsets.all(5.0),
            child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(5.0)),
                child: Stack(
                  alignment: Alignment.center,
                  children: <Widget>[
                    Image.asset(item["image"], fit: BoxFit.cover, width: 700.0),
                    Positioned(
                      bottom: 0.0,
                      // left: 0.0,
                      // right: 0.0,
                      child: Container(
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            colors: [
                              Color.fromARGB(0, 0, 0, 0),
                              Color.fromARGB(0, 0, 0, 0)
                            ],
                            begin: Alignment.bottomCenter,
                            end: Alignment.topCenter,
                          ),
                        ),
                        padding: EdgeInsets.symmetric(
                            vertical: 10.0, horizontal: 10.0),
                        child: Text(
                          '${item["name"]}',
                          // '${nameList[imgList.indexOf(item)]}',
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 20.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  ],
                )),
          ),
        )),
onTap:(){} // Your function to route.
    .toList();

```