The BottomNavigationBar doesn't work on click

Question

I have a BottomNavigationBar widget but it doesn't work at all on clicks. It is not updating pages. Here is my file containing the BottomNavigationBar widget:

    import 'package:flutter/material.dart';
import 'package:todo/screens/demo.dart';
import 'package:todo/screens/demo2.dart';

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final pages = [DemoScreen(), Demo2()];

  @override
  Widget build(BuildContext context) {
    var currentPageIndex = 0;

    return Scaffold(
      appBar: AppBar(
        title: Text('Tabs'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.add), label: 'Add'),
          BottomNavigationBarItem(icon: Icon(Icons.remove), label: 'Remove')
        ],
        onTap: (index) {
          setState(() {
            currentPageIndex = index;
          });
        },
        currentIndex: currentPageIndex,
        selectedItemColor: Colors.white,
        backgroundColor: Colors.blue,
      ),
      body: pages[currentPageIndex],
    );
  }
}

These are my screens: demo.dart

import 'package:flutter/material.dart';

class DemoScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello');
  }
}

... demo2.dart

import 'package:flutter/material.dart';

class Demo2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      color: Colors.red,
      child: Align(
        alignment: Alignment.center,
        child: Text('Screen 2'),
      ),
    );
  }
}

Can someone please let me know why is it not updating the screens? Any help would be greatly appreciated.

Answer 1

You need to move 'currentPageIndex' variable to outside of Build function.

Because 'build()' is called when you call 'setState()',
the 'currentPageIndex' value is redefined and intialized to 0.

Because of this reason, although 'currentPageIndex' value is changed by 'currentPageIndex = index' code, 'currentPageIndex' value is recovered to 0 and 0 index page is built again.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final pages = [DemoScreen(), Demo2()];
  var currentPageIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tabs'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.add), label: 'Add'),
          BottomNavigationBarItem(icon: Icon(Icons.remove), label: 'Remove')
        ],
        onTap: (index) {
          setState(() {
            currentPageIndex = index;
          });
        },
        currentIndex: currentPageIndex,
        selectedItemColor: Colors.white,
        backgroundColor: Colors.blue,
      ),
      body: pages[currentPageIndex],
    );
  }
}

class DemoScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello');
  }
}

class Demo2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      color: Colors.red,
      child: Align(
        alignment: Alignment.center,
        child: Text('Screen 2'),
      ),
    );
  }
}