Flutter setState not updating var - flutter

Question

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Widget build(BuildContext context) {
var width = MediaQuery.of(context).size.width;
var height = MediaQuery.of(context).size.height;
Color backgroundColor = Color(0xffF5F5F5);
Color buttonColor = Color(0xffF4FCFF);
Color iconColor = Colors.blueGrey.shade200;
Color fontColor = Colors.blueGrey.shade800;
int _currentIndex = 0;
List<Widget> _cardList = [
Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(8),
),
child: Text(_currentIndex.toString()),
),
Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(8)
),
child: Text(_currentIndex.toString()),
),
Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(8)
),
child: Text(_currentIndex.toString()),
),
];
void setIndex(int newIndex){
print("$_currentIndex $newIndex");
_currentIndex = newIndex;
this.setState((){
_currentIndex = newIndex;
});
}
void initState(){
this.setState(() {
_currentIndex = 0;
});
}
Map<int, double> _firstOpacityMap = {
0: 0,
1: 0.6,
2: 0.6
};
Map<int, double> _lastOpacityMap = {
0: 0.6,
1: 0.6,
2: 0
};
return Scaffold(
body: Container(
color: backgroundColor,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: height * 0.08,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: width * 0.04,
),
Container(
width: 50,
height: 50,
child: FloatingActionButton(
backgroundColor: buttonColor,
foregroundColor: iconColor,
elevation: 0,
child: Icon(Icons.menu_rounded),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
)
),
),
Container(
width: width * 0.45,
),
Container(
width: 50,
height: 50,
child: FloatingActionButton(
backgroundColor: buttonColor,
foregroundColor: iconColor,
elevation: 0,
child: Icon(Icons.home_outlined),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
)
),
),
Container(
width: width * 0.04,
),
],
),
Container(
height: height * 0.02,
),
Container(
margin: EdgeInsets.only(
left: width * 0.11
),
child: Column(
children: [
Text(
'Your Cards',
style: TextStyle(
fontFamily: 'Rubik Light',
fontWeight: FontWeight.w300,
fontSize: 30,
color: fontColor,
),
)
],
),
),
Container(
height: height * 0.02,
),
Container(
margin: EdgeInsets.only(
left: 0,
),
width: width,
height: 200,
child: Swiper(
itemCount: 3,
layout: SwiperLayout.CUSTOM,
customLayoutOption: CustomLayoutOption(
startIndex: -1,
stateCount: 3
).addTranslate([
new Offset(-330.0, 0),
new Offset(0.0, 0.0),
new Offset(330.0, 0)
// Error is below here
]).addOpacity([
_firstOpacityMap[_currentIndex],
1,
_lastOpacityMap[_currentIndex],
]),
itemWidth: 310,
itemHeight: 180,
curve: Curves.easeOut,
scrollDirection: Axis.horizontal,
onIndexChanged: (int newIndex) => setIndex(newIndex),
itemBuilder: (BuildContext context, int index){
return _cardList[index];
}
),
)
],
)
)
);
}
}
I am using flutter_swiper to show the cards in a custom SwiperLayout. Since I don't want them to be fully scrollable, I am trying to set the opacity based on the current index. I am getting the next Index in the onIndexChanged method from flutter_swiper, I wan't to set the variable currentIndex to the current index of the cards. But somehow the index isn't getting changed in the setState?

Answer 1

move int _currentIndex = 0; out of the build function.