How to add text below the image in carousal slider and pass the text pagination

[mahantappa b k]

I have used carousal slider to slide the images and written text below that but I want the text to be as list and changed along the image when swiped and need to pass that text to the new page when image is tapped.

Below is my code

import 'package:Categories/Herbs.dart';
import 'package:about.dart';
import 'package:how_to_contribute.dart';
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:url_launcher/url_launcher.dart';

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    Widget image_carousel = new Container(
        height: 300.0,
        child: CarouselSlider(
          height: 230.0,
          items: [
            'images/herbs.png',
            'images/traditions.png',
            'images/drugs.png',
            'images/drug_manufacturers.png',
            'images/practices_.png',
            'images/physiology.png',
            'images/yoga.png',
            'images/concepts.png'
          ].map((i) {
            return Builder(
              builder: (BuildContext context) {
                return Column(
                  children: <Widget>[
                    Flexible(
                      child: Container(
                        margin: EdgeInsets.symmetric(horizontal: 5.0),
                        child: GestureDetector(
                            child: Image.asset(i, fit: BoxFit.fill),
                            onTap: () {
                              Navigator.push<Widget>(
                                context,
                                MaterialPageRoute(
                                  builder: (context) => ImageScreen(),
                                ),
                              );
                            }),
                      ),
                    ),
                    SizedBox(height: 20),
                    Text(
                      'Title',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 20.0,
                      ),
                    ),
                  ],
                );
              },
            );
          }).toList(),
        ));
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text('App')),
      body: ListView(
        children: <Widget>[
          image_carousel,       
),
          Padding(padding: EdgeInsets.all(8.0)),
          Divider(),
          GestureDetector(
            child: Center(
              child: ListTile(
                title: Text(
                  'About App',
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                ),
                trailing: Icon(Icons.keyboard_arrow_right,
                    size: 30.0, color: Colors.black),
              ),
            ),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => AboutPage()),
              );
            },
          ),
          Divider(),
          GestureDetector(
            child: Center(
              child: ListTile(
                title: Text(
                  'How to contribute',
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                ),
                trailing: Icon(Icons.keyboard_arrow_right,
                    size: 30.0, color: Colors.black),
              ),
            ),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => Contribute()),
              );
              debugPrint('Contribute tapped');
            },
          ),
          Divider(),
          GestureDetector(
            child: Center(
              child: ListTile(
                title: Text(
                  'Search',
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                ),
                trailing: Icon(Icons.keyboard_arrow_right,
                    size: 30.0, color: Colors.black),
              ),
            ),
            onTap: () {
//              Navigator.push(
//                context,
//                MaterialPageRoute(builder: (context) => AboutPage()),
//              );
              debugPrint('Search tapped');
            },
          ),
          Divider(),
          GestureDetector(
            child: Center(
              child: ListTile(
                title: Text(
                  'Recntly viewed items',
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                ),
                trailing: Icon(Icons.keyboard_arrow_right,
                    size: 30.0, color: Colors.black),
              ),
            ),
            onTap: () {
//              Navigator.push(
//                context,
//                MaterialPageRoute(builder: (context) => AboutPage()),
//              );
              debugPrint('Recently viewed items tapped');
            },
          ),
        ],
      ),
    );
  }



class ImageScreen extends StatefulWidget {
  final String url;
  ImageScreen(this.url);

  @override
  _MyImageScreen createState() => _MyImageScreen(url);
}

class _MyImageScreen extends State<ImageScreen> {
  final String url;
  _MyImageScreen(this.url);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('ImageScreen'),
        ),
        body: Image.asset(url, width: double.infinity));
  }
}