Flutter setState() not working inside List<Widget>

March 1, 2023

I have this code:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: App(),
    );
  }
}

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  int navBarIndex = 0;

  void navBarTap(int index) {
    setState(() {
      navBarIndex = index;
    });
  }

  double lengthSliderValue = 20;

  late List<Widget> pages = <Widget>[
    /* Page 1 */ Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.stretch,
  
      children: <Widget>[
        /* Slider */ Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(" Length", style: TextStyle(fontSize: 18)),
            Slider(
              value: lengthSliderValue,
              min: 1,
              max: 30,
              divisions: 29,
              label: lengthSliderValue.round().toString(),
              onChanged: (double value) {
                setState(() {
                  lengthSliderValue = value;
                });
              },
            ),
          ],
        ),
      ],
    ),
    /* Page 2 */ Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.stretch,

      children: const <Widget>[
        // Just some test widgets
        Icon(Icons.check_circle_outline_rounded, size: 80),
        Icon(Icons.check_circle_rounded, size: 80)
      ]
    )
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Test App",
      
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Test App"),
          centerTitle: true,
        ),

        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.get_app_rounded),
              label: "Page 1",
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.check_circle_outline_rounded),
              label: "Page 2",
            ),
          ],
          currentIndex: navBarIndex,
          onTap: navBarTap,
        ),

        body: pages[navBarIndex]
      ),
    );
  }
}

Obviously this isn’t all of the code. I have removed all of the unnessary stuff that doesn’t have anything to do with the problem.

I put print(lengthSliderValue); inside the slider setState and the value changes, the problem is the slider doesn’t visually change.

I am quite new to dart/flutter and I have come from C# and Python.
Maybe I’m going about this wrong and shouldn’t use late?
Maybe there is a better way to using pages with navbar altogether?

Thanks in advance.

>Solution :

You are creating pages variable, and while it assign only one first time and break current context chain. if you like to update item internally you can use stateful widget inside pages, or currently you can use method