Why is the screen being showed not changing on update of the screen's index?-CodePudding

I have a mainPage.dart file with a bottomNavigationBar that onTap of a button changes a global variable called currentIndex. The body of the mainPage file is set to show the screen from a list of screens at the currentIndex. The problem is that the screen doesn't change when the bottomNavigationBar updates the currentIndex. I'm sorry if this is unclear, but it makes more sense in the code sample:

mainPage.dart

import 'package:flutter/material.dart';
import 'package:taskapp/screens/home/addTask.dart';
import 'package:taskapp/screens/home/home.dart';
import 'package:taskapp/taskGlobals.dart';                         // <= currentIndex is in here
import 'home/widgets/appBars.dart' as buildNavigationBars;

class mainPage extends StatefulWidget {
  @override
  State<mainPage> createState() => _mainPageState();
}

class _mainPageState extends State<mainPage> {
  final screens = [
    HomePage(),
    addTask(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
          preferredSize: const Size.fromHeight(60),
          child: buildNavigationBars.topNavBar()),
      body: screens[currentIndex],
      bottomNavigationBar: buildNavigationBars.BottomNavBar(),
    );
  }
}

The bottomNavigationBar (aka buildNavigationBars.BottomNavBar():

Widget _buildBottomNavigationBar() {
  return Container(
    decoration: BoxDecoration(
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(30),
          topRight: Radius.circular(30),
        ),
        boxShadow: [
          BoxShadow(
              color: Colors.grey.withOpacity(0.2),
              spreadRadius: 5,
              blurRadius: 10)
        ]),
    child: ClipRRect(
      borderRadius: const BorderRadius.only(
        topLeft: Radius.circular(30),
        topRight: Radius.circular(30),
      ),
      child: BottomNavigationBar(
        currentIndex: currentIndex,
        backgroundColor: Colors.white,
        showSelectedLabels: false,
        showUnselectedLabels: false,
        selectedItemColor: Colors.blueAccent,
        unselectedItemColor: Colors.grey.withOpacity(0.5),
        onTap: (index) => currentIndex = index,                    // <= Where currentIndex is updated
        items: const [
          BottomNavigationBarItem(
            label: 'Home',
            icon: Icon(Icons.home_rounded, size: 30),
          ),
          BottomNavigationBarItem(
            label: 'Tasks',
            icon: Icon(Icons.add_task_rounded, size: 30),
          )
        ],
      ),
    ),
  );
}

Task Globals:

library myprj.taskGlobals;

import 'package:cloud_firestore/cloud_firestore.dart';

int currentIndex = 0;                                             // currentIndex

DocumentSnapshot snapshot = FirebaseFirestore.instance
    .collection('name I would not like to share for privacy')
    .doc('another name')
    .get() as DocumentSnapshot;

CodePudding user response：

Whenever updating a variable inside a StatefulWidget you need to call setState((){}); to make the Widget rebuild with the new values.

onTap: (index) => setState(() { currentIndex = index;}),

CodePudding user response：

First define your currentIndex here:

class _mainPageState extends State<mainPage> {
  int currentIndex = 0; 
  final screens = [
    HomePage(),
    addTask(),
  ];

...
}

then change _buildBottomNavigationBar() to this:

Widget _buildBottomNavigationBar(Function(int) onTap) {
  return Container(
    decoration: BoxDecoration(
  ...
    )
  );
}

and use that onTap you pass inside _buildBottomNavigationBar like this:

onTap: onTap,

then in your mainPage class do this:

bottomNavigationBar: buildNavigationBars.BottomNavBar(
  (index){
    setState(() {
         currentIndex = index;  
    });
  }
),