Flutter carousel_slider modification on change image

Question

I am trying to achieve something like this in the video https://youtu.be/tpfP7wlHCxw , when the slider image will change the below text will also change like fat in the video example, and also one container box on the front image only

I tried the carousel_slider and use the stack for box frame that is in the video but frame size and image sizes not adjustable

and the important thing is how can I change the below text on change image and slider should not rotate it will stop if the last image comes

here is my code

    import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:trainer_app/color.dart';
class FatGet extends StatefulWidget {
  @override
  _GetAgeState createState() => _GetAgeState();
}
final List<String> imgList = [
  'https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80',
  'https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1523205771623-e0faa4d2813d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=89719a0d55dd05e2deae4120227e6efc&auto=format&fit=crop&w=1953&q=80',
  'https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80',
  'https://images.unsplash.com/photo-1519985176271-adb1088fa94c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a0c8d632e977f94e5d312d9893258f59&auto=format&fit=crop&w=1355&q=80'
];
class _GetAgeState extends State<FatGet> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: background,
      body: SafeArea(
        child: Column(
          children: [
            SizedBox(height: 50,),
            Center(
              child: Stack(
                children: [
                  Container(
                    height: 5,
                    width: MediaQuery.of(context).size.height/2,
                    color: backcolor,
                  ),
                  Container(
                    height: 5,
                    width: MediaQuery.of(context).size.height/2.5,
                    color: textcolor,
                  ),
                ],
              ),
            ),
            SizedBox(height: 50,),
            Text('Estimated your current',style: TextStyle(fontFamily: font1,fontSize: 30,fontWeight: FontWeight.w300),),
            Text('body Fat Percentage?',style: TextStyle(fontFamily: font1,fontSize: 30,fontWeight: FontWeight.w300),),
            SizedBox(height: 100,),
           // Image.asset('assets/fat2.png'),
            Stack(
              children: [
                Center(
                  child: Container(
                    margin: EdgeInsets.only(bottom: 15),
                    width: 350,
                      height: 260,
                    decoration: BoxDecoration(

                        border: Border.all(color: textcolor,width: 3, )

                    ),
                  ),
                ),
                Column(
                  children: [
                    SizedBox(height: 7,),
                    CarouselSlider(
                      options: CarouselOptions(),
                      items: imgList.map((item) => Container(
                        child: Padding(
                          padding: const EdgeInsets.only(left: 5,right: 5),
                          child: Image.network(item, fit: BoxFit.cover,height: 20,),
                        ),
                      )).toList(),
                    ),
                  ],
                ),

              ],
            ),
            Spacer(),
            Container(
              margin: EdgeInsets.only(bottom: 30),
              width: MediaQuery.of(context).size.width/1.2,
              height: 50,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(50),
                child: RaisedButton(
                  child: Text('Next',style: TextStyle(color: Colors.white,fontFamily: font1,fontWeight: FontWeight.w400,fontSize: 20),),
                  onPressed: (){
                    Navigator.pushNamed(context, "Exercise");
                  },
                  color: textcolor,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

for slider should not rotate.. see comment 1 in the code

for change the below text on change.. see comment 2

CarouselSlider(
   items: items,
   options: CarouselOptions(
      height: 400,
      aspectRatio: 16/9,
      viewportFraction: 0.8,
      initialPage: 0,
      enableInfiniteScroll: false, // (1) Set to false
      reverse: false,
      autoPlay: true,
      autoPlayInterval: Duration(seconds: 3),
      autoPlayAnimationDuration: Duration(milliseconds: 800),
      autoPlayCurve: Curves.fastOutSlowIn,
      enlargeCenterPage: true,
      onPageChanged: changeActiveImageText(), // (2) Set up your function here 
      scrollDirection: Axis.horizontal,
   )
 )

Function will look something like this

changeActiveImageText(){
 // your method of changing the text
 setState((){})
}

Answer 2

With onPageChange, you can take the value of a variable and return it from a function you send. I think it will work.

1. Define each text as companent.
2. Check the index of images with a variable
3. Write the function that returns value according to the parameter sent.
4. Call the function and give the control variable