setState() not updating the colors of a button-CodePudding

So, I am trying to make a multipage flutter app, and the best way I could find to make a way to move between screens was to display an element in a list, where each element was a Container() containing a page.

I then noticed that my buttons stopped updating the variables that they have setState() hooked up to, I tried to remove blocks of code and even after shedding 270 lines of code, it still won't update.

If anyone knows how to either, make the buttons update in this fashion, or have a separate method of changing pages that will make the buttons work, please help.

import 'package:flutter/material.dart';

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

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

  @override
  State<MyFirstApp> createState() => _MyFirstAppState();
}

class _MyFirstAppState extends State<MyFirstApp> {
  int _selectedIndex = 0;
  bool _flag = false;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  late List<Widget> pages = <Widget>[
    ElevatedButton(
      onPressed: () => setState(() => _flag = !_flag),
      style: ElevatedButton.styleFrom(
        backgroundColor: _flag ? Colors.red : Colors.teal,
      ),
      child: Text(_flag ? 'Red' : 'Green'),
    ),
    ElevatedButton(
      onPressed: () => setState(() => _flag = !_flag),
      style: ElevatedButton.styleFrom(
        backgroundColor: _flag ? Colors.black : Colors.blue,
      ),
      child: Text(_flag ? 'Black' : 'Blue'),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: pages.elementAt(_selectedIndex),
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              label: "",
              icon: Text('D'),
            ),
            BottomNavigationBarItem(
              label: "",
              icon: Text('O'),
            ),
          ],
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
        ),
      ),
    );
  }
}

CodePudding user response：

You're looking for an IndexedStack:

Fixed code sample:

import 'package:flutter/material.dart';

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

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

  @override
  State<MyFirstApp> createState() => _MyFirstAppState();
}

class _MyFirstAppState extends State<MyFirstApp> {
  int _selectedIndex = 0;
  bool _flag = false;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: IndexedStack(
          index: _selectedIndex,
        children: [
          ElevatedButton(
      onPressed: () => setState(() => _flag = !_flag),
      style: ElevatedButton.styleFrom(
        backgroundColor: _flag ? Colors.red : Colors.teal,
      ),
      child: Text(_flag ? 'Red' : 'Green'),
    ),
    ElevatedButton(
      onPressed: () => setState(() => _flag = !_flag),
      style: ElevatedButton.styleFrom(
        backgroundColor: _flag ? Colors.black : Colors.blue,
      ),
      child: Text(_flag ? 'Black' : 'Blue'),
    ),
        ]),
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              label: "",
              icon: Text('D'),
            ),
            BottomNavigationBarItem(
              label: "",
              icon: Text('O'),
            ),
          ],
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
        ),
      ),
    );
  }
}