Flutter carousel_slider modification on change image - flutter

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

With onPageChange, you can take the value of a variable and return it from a function you send. I think it will work.
Define each text as companent.
Check the index of images with a variable
Write the function that returns value according to the parameter sent.
Call the function and give the control variable

Answer 2

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((){})
}