title: Changing the color and text of AppBar based on the currently viewed page
body: <p>I have a TabBarView that navigates between the pages in my app. Is there a way to change/override the text and the color of the main AppBar based on the currently viewed page, instead of creating an AppBar for each page separately?</p>
  
  <p>This is how my pages are setup </p>
  
  <p>My routes are defined in the main function as follows:</p>
  
  <pre><code>routes: &lt;String, WidgetBuilder&gt;{
              "/Home": (BuildContext context) =&gt; new first.Home(),
              "/Support": (BuildContext context) =&gt; new second.Support(),
  
            }
  </code></pre>
  
  <p>Tabs class</p>
  
  <pre><code>        class Tabs extends StatefulWidget {
  
            @override
            TabsState createState() =&gt; new TabsState();
          }
  
      class TabsState extends State&lt;Tabs&gt; with SingleTickerProviderStateMixin {
        TabController controller;
  
        @override
        void initState() {
          super.initState();
  
          controller = new TabController(length: 5, vsync: this);
  
        }
  
        @override
        void dispose() {
          controller.dispose();
          super.dispose();
  
        }
        @override
        Widget build(BuildContext context) {
  
        return new Scaffold(
          appBar: new AppBar(
            centerTitle: true,
            title: new Text('App'), backgroundColor: Colors.blue,
            bottom: new TabBar(
                controller: controller,
                tabs: &lt;Tab&gt;[
                  new Tab (icon: new Icon(Icons.home), text: 'Home',),
                              new Tab (icon: new Icon(Icons.mail), text:'Support'),
                ]),
          ),
          body: new TabBarView(
            controller: controller,
            children: &lt;Widget&gt;[
              new first.Home(),
              new second.Support(),
  
            ],
          ),
        );
      }      
  </code></pre>