Flutter setState not updating var

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.