Change AppBar title depending on page with BottomNavigationBar

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(),
    );
  }
}

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; 
      } 
     });
   }
}

Tags:

Appbar

Flutter