Change AppBar title depending on page with BottomNavigationBar

Question

I'm trying to change the AppBar title depending on which page the user is on - the pages are controlled by a BottomNavigationBar which loads the different classes(pages)

The only way i've managed to change this is by including a appbar for each page, which i believe is not the way to go ahead.

class HomePage extends StatefulWidget {
  final String title;

  HomePage({Key key, this.auth, this.userId, this.onSignedOut, this.title})
      : super(key: key);

  final BaseAuth auth;
  final VoidCallback onSignedOut;
  final String userId;

  @override
  State<StatefulWidget> createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;
  final List<Widget> _children = [
    Projects(),
    TimedProject(),
    Overview(),
    Clients(),
  ];

  GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text('TITLE I NEED TO CHANGE DEPENDING ON PAGE',
          style: TextStyle(color: Colors.black),
        ),

        backgroundColor: Colors.white,
      ),
      endDrawer: AppDrawer(),
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        selectedItemColor: Theme.of(context).primaryColor,
        type: BottomNavigationBarType.fixed,
        items: [
          new BottomNavigationBarItem(
            icon: Icon(Icons.storage),
            title: Text('Jobs'),
          ),
          new BottomNavigationBarItem(
            icon: Icon(Icons.timer),
            title: Text('Timer'),
          ),
          new BottomNavigationBarItem(
            icon: Icon(Icons.pie_chart_outlined),
            title: Text('Overview'),
          ),
          new BottomNavigationBarItem(
              icon: Icon(Icons.supervisor_account), title: Text('Clients'))
        ],
      ),
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

Answer 1

Create a variable that holds the appbar title or you can use the same title variable that is passed in your HomePage class but you have to remove the final.

If you are using the title variable in HomePage class, make sure to use "widget.title"

class HomePage extends StatefulWidget {
  final String title;

  HomePage({Key key, this.auth, this.userId, this.onSignedOut, this.title})
      : super(key: key);

  final BaseAuth auth;
  final VoidCallback onSignedOut;
  final String userId;

  @override
  State<StatefulWidget> createState() => new _HomePageState();
 }

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;
  String _title;

  final List<Widget> _children = [
     Projects(),
     TimedProject(),
     Overview(),
     Clients(),
  ];

  GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey();

 @override
  initState(){
    _title = 'Some default value';
  }


  @override
  Widget build(BuildContext context) {
     return new Scaffold(
       key: _scaffoldKey,
       appBar: AppBar(
       title: Text(_title,
          style: TextStyle(color: Colors.black),
       ),

       backgroundColor: Colors.white,
      ),
  endDrawer: AppDrawer(),
  body: _children[_currentIndex],
  bottomNavigationBar: BottomNavigationBar(
    onTap: onTabTapped,
    currentIndex: _currentIndex,
    selectedItemColor: Theme.of(context).primaryColor,
    type: BottomNavigationBarType.fixed,
    items: [
      new BottomNavigationBarItem(
        icon: Icon(Icons.storage),
        title: Text('Jobs'),
      ),
      new BottomNavigationBarItem(
        icon: Icon(Icons.timer),
        title: Text('Timer'),
      ),
      new BottomNavigationBarItem(
        icon: Icon(Icons.pie_chart_outlined),
        title: Text('Overview'),
      ),
      new BottomNavigationBarItem(
          icon: Icon(Icons.supervisor_account), title: Text('Clients'))
    ],
  ),
);
}

   void onTabTapped(int index) {
     setState(() {
     _currentIndex = index;
      switch(index) { 
       case 0: { _title = 'Jobs'; } 
       break; 
       case 1: { _title = 'Timer'; } 
       break;
       case 2: { _title = 'Overview'; } 
       break;
       case 3: { _title = 'Clients'; } 
       break; 
      } 
     });
   }
}

Answer 2

Thanks for the solution, is there away to take the bottom nav and out it in its own .dart file like

bottomNavigationBar: BottomNavBar(),

and get the selected tab index

class _HomeScreen2State extends State<HomeScreen2> {
  //Hold current Tab Index
  int _selectTab = 0;
  final _pageOptions = [
    HomeScreen(),
    NewOrderScreen(),
    OrderHistoryScreen(),
    ContactScreen(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Gift Shop Dashboard'),
      ),
      body: _pageOptions[_selectTab],
      bottomNavigationBar: BottomNavBar(),
    );
  }
}