why the screen doesn't update?

Question

Hello i created a custom BottomNavigation bar with tow IconButton's and i want if I tap on some Icon, that the body of the Scaffold change but it dosen't work.

her is my Cod:

int index = 0;

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<Widget> page = [
      const HomeScreen(),
      const FolderScreen(),
    ];

    return Scaffold(
      body: page[index],
      bottomNavigationBar: const CustomBottomNavigationBar(),
    );
  }
}

enum Pages {
  home,
  folder,
}

class CustomBottomNavigationBar extends StatefulWidget {
  const CustomBottomNavigationBar({
    Key? key,
  }) : super(key: key);

  @override
  State<CustomBottomNavigationBar> createState() =>
      _CustomBottomNavigationBarState();
}

class _CustomBottomNavigationBarState extends State<CustomBottomNavigationBar> {
  Pages selectPage = Pages.home;

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return SizedBox(
      width: size.width,
      height: 80.0,
      child: Stack(
        children: [
          CustomPaint(
            size: Size(size.width, 80.0),
            painter: BNBCustomPainter(),
          ),
          Center(
            heightFactor: 0.71,
            child: Transform.scale(
              scale: 1.25,
              child: FloatingActionButton(
                onPressed: () {},
                backgroundColor: Colors.blueAccent,
                elevation: 0.1,
                child: const Icon(
                  Icons.add,
                  size: 40,
                ),
              ),
            ),
          ),
          SizedBox(
            width: size.width,
            height: 80.0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconButton(
                  onPressed: () {
                    setState(() {
                      selectPage = Pages.home;
                      index = 0;
                      print(index);
                    });
                  },
                  icon: Icon(
                    Icons.home,
                    color: selectPage == Pages.home
                        ? kActiveBottomNavigationButtonColor
                        : kInactiveBottomNavigationButtonColor,
                    size: 35.0,
                  ),
                ),
                SizedBox(width: size.width * 0.20),
                IconButton(
                  onPressed: () {
                    setState(() {
                      selectPage = Pages.folder;
                      index = 1;
                      print(index);
                    });
                  },
                  icon: Icon(
                    Icons.folder,
                    color: selectPage == Pages.folder
                        ? kActiveBottomNavigationButtonColor
                        : kInactiveBottomNavigationButtonColor,
                    size: 35.0,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
} 

her can you see if i tap on some of the tow buttons the index variable change the value to 0(if i tap the home IconButton) or 1(if i tap the folder IconButton)

the index number that i change is on the top from the code and i use them to change the number of the Array in the List what i use in the "body: page[index]".

anyone know why the body dosen't update ?

Answer 1

You are updating CustomBottomNavigationBar (updating because of StatefulWidget) but Home is StatelessWidget. So in order to update the Home page, you need to convert it to StatefulWidget(simple case). Also, it would be not to use global variable, use callback instead.

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int index = 0;
  @override
  Widget build(BuildContext context) {
    List<Widget> page = [
      const HomeScreen(),
      const Text("ss"),
    ];
    return Scaffold(
      body: page[index],
      bottomNavigationBar: CustomBottomNavigationBar(
        callback: (i) {
          setState(() {
            index = i;
          });
        },
      ),
    );
  }
}

class CustomBottomNavigationBar extends StatefulWidget {
  final Function(int index) callback;
  const CustomBottomNavigationBar({
    Key? key,
    required this.callback,
  }) : super(key: key);

  @override
  State<CustomBottomNavigationBar> createState() =>
      _CustomBottomNavigationBarState();
}

class _CustomBottomNavigationBarState extends State<CustomBottomNavigationBar> {
  Pages selectPage = Pages.home;

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return SizedBox(
      width: size.width,
      height: 80.0,
      child: Stack(
        children: [
          Center(
            heightFactor: 0.71,
            child: Transform.scale(
              scale: 1.25,
              child: FloatingActionButton(
                onPressed: () {},
                backgroundColor: Colors.blueAccent,
                elevation: 0.1,
                child: const Icon(
                  Icons.add,
                  size: 40,
                ),
              ),
            ),
          ),
          SizedBox(
            width: size.width,
            height: 80.0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconButton(
                  onPressed: () {
                    widget.callback(0);
                    setState(() {
                      selectPage = Pages.home;
                    });
                  },
                  icon: Icon(
                    Icons.home,
                    color: selectPage == Pages.home
                        ? kActiveBottomNavigationButtonColor
                        : kInactiveBottomNavigationButtonColor,
                    size: 35.0,
                  ),
                ),
                SizedBox(width: size.width * 0.20),
                IconButton(
                  onPressed: () {
                    widget.callback(1);
                    setState(() {
                      selectPage = Pages.folder;
                    });
                  },
                  icon: Icon(
                    Icons.folder,
                    color: selectPage == Pages.folder
                        ? kActiveBottomNavigationButtonColor
                        : kInactiveBottomNavigationButtonColor,
                    size: 35.0,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}