Change appBar in for each button clicked in flutter

Question

Is there any way that I can change AppBar's 'title:' that will be based to my BottomNavigationBar's button label? I am building an app where the navigation bar will call each classes' on button click,

Like this maybe?

appbar: AppBar(
title: SelectedIndex(label/tile),
),

Here's the source code:

import 'package:flutter/material.dart';

import 'BoosterCommunity_Page.dart';
import 'Diary_Page.dart';
import 'GradeTracker_Page.dart';
import 'CalendarView_Page.dart';
import 'QuotesPage.dart';
import 'ListView_Page.dart';

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

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  PageController _pageController = PageController();
  List<Widget> _screens = [
    QuotesPage(), ListViewPage(), CalendarViewPage(), GradeTrackerPage(), DiaryPage(), BoosterCommunityPage(),
  ];

  void _onPageChanged(int index) {}
  void _onItemsTapped(int selectedIndex) {
    _pageController.jumpToPage(selectedIndex);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,

        //I want it to be implemented in this line

        title: (BottomNavBar selected index title or label),
      ),
      body: PageView(
        controller: _pageController,
        children: _screens,
        onPageChanged: _onPageChanged,
        physics: NeverScrollableScrollPhysics(),
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: _onItemsTapped,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home, color: Colors.grey,),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.list, color: Colors.grey,),
            label: 'Task List',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.calendar_view_month, color: Colors.grey,),
            label: 'Calendar View',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.grade, color: Colors.grey,),
            label: 'Grade Tracker',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.book, color: Colors.grey,),
            label: 'Diary Page',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business, color: Colors.grey,),
            label: 'Booster Community',
          ),                                                
        ],
      ),
            drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            Container(
              height: 100.0,
              child: const DrawerHeader(
              decoration: BoxDecoration(
              color: Colors.orange,
              ),
              child: Text('Sign in first'),
            ),
            ),
            ListTile(
              title: const Text('Account'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('Settings'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('Help and Support'),
              onTap: (){
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),  
    );
  }
}

Is it possible or is there an easy way? please let me know, thank you in advance.

Answer 1

Try this one, here I use currentPage to hold the index of the selected bottom navigation item and pageTitle to show the title on the app bar. Now whenever the user tap on the item in the bottom bar all you have to do is to update currentIndex and pageTitle by fetching the specific key at the index in the map bottomNavigateData.

    import 'package:flutter/material.dart';

    void main() =>
        runApp(MaterialApp(debugShowCheckedModeBanner: false, home: 
    HomePage()));
    
    class HomePage extends StatefulWidget {
      @override
      _HomePageState createState() => _HomePageState();
    }

class _HomePageState extends State<HomePage> {
  static int currentPage = 0;
  static Map<String, Icon> bottomNavigateData = {
    'Home': const Icon(
      Icons.home,
      color: Colors.grey,
    ),
    'Task List': const Icon(
      Icons.list,
      color: Colors.grey,
    ),
  };
  String pageTitle = bottomNavigateData.keys.first;

  final PageController _pageController = PageController();
  final List<Widget> _screens = [
    QuotesPage(),
    ListViewPage(),
  ];

      void _onPageChanged(int index) {}
      void _onItemsTapped(int selectedIndex) {
        setState(() {
          currentPage = selectedIndex;
          pageTitle = bottomNavigateData.keys.elementAt(selectedIndex);
    });
    _pageController.jumpToPage(selectedIndex);
  }

  @override
  Widget build(BuildContext context) {
    List<BottomNavigationBarItem> navigations = [];
    bottomNavigateData
        .forEach((k, v) => navigations.add(BottomNavigationBarItem(
              icon: v,
              label: k,
            )));
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(pageTitle),
      ),
      body: PageView(
        controller: _pageController,
        children: _screens,
        onPageChanged: _onPageChanged,
        physics: const NeverScrollableScrollPhysics(),
      ),
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: currentPage, onTap: _onItemsTapped, items: navigations),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            Container(
              height: 100.0,
              child: const DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.orange,
                ),
                child: Text('Sign in first'),
              ),
            ),
            ListTile(
              title: const Text('Account'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('Settings'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('Help and Support'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

Widget QuotesPage() {
  return Container(color: Colors.white, child: const Text("Page1"));
}

Widget ListViewPage() {
  return Container(color: Colors.white, child: const Text("Page2"));
}