Change AppBar color and text based on the page currently viewed

I modified this code to add support for text and color changes. I think,

https://flutter.io/catalog/samples/tabbed-app-bar/

Sorry for the ugliness for the code. All I did was change all classes to a stateful widget, add a setstate icon selector, change the widget so the onPressed callback appears

  import 'package:flutter/material.dart';

  class MainApp extends StatefulWidget {
    MainApp({Key key, this.title}) : super(key: key);

    // This widget is the home page of your application. It is stateful,
    // meaning that it has a State object (defined below) that contains
    // fields that affect how it looks.

    // This class is the configuration for the state. It holds the
    // values (in this case the title) provided by the parent (in this
    // case the App widget) and used by the build method of the State.
    // Fields in a Widget subclass are always marked "final".

    final String title;
    @override
    TabbedAppBarSample createState() => new TabbedAppBarSample();
  }
  class TabbedAppBarSample extends State<MainApp> {
    Choice _choice;
    initState(){
      super.initState();
      _choice = choices[0];
    }
    void _select(var c){
      setState((){
        _choice = c;
      });

    }

    @override
    Widget build(BuildContext context) {
      return new MaterialApp(
        home: new DefaultTabController(

          length: choices.length,
          child: new Scaffold(
            appBar: new AppBar(
              //dynamically create appbar colors
              backgroundColor: new Color(_choice.color),
              title: new Text(_choice.title),
              bottom: new TabBar(
                isScrollable: true,
                tabs: choices.map((Choice choice) {
                   //change to iconbutton
                  return new IconButton(
                    icon: new Icon(choice.icon),
                    onPressed: (){_select(choice);},
                  );
                }).toList(),
              ),
            ),
            body:
            new TabBarView(
              children: choices.map((Choice choice) {
                return new Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: new ChoiceCard(choice: choice),
                );
              }).toList(),
            ),
          ),
        ),
      );
    }
  }

  class Choice {
    const Choice({ this.title, this.icon, this.color});
    final String title;
    final IconData icon;
    final num color;
  }

  const List<Choice> choices = const <Choice>[
    const Choice(title: 'CAR', icon: Icons.directions_car, color:  0xFFE0F7FA),
    const Choice(title: 'BICYCLE', icon: Icons.directions_bike, color: 0x00ff0000),
    const Choice(title: 'BOAT', icon: Icons.directions_boat, color: 0xFF42A5F5),
    const Choice(title: 'BUS', icon: Icons.directions_bus, color: 0x0),
    const Choice(title: 'TRAIN', icon: Icons.directions_railway, color: 0xFFEFFFFF),
    const Choice(title: 'WALK', icon: Icons.directions_walk, color: 0x0000ff00),
  ];
  class ChoiceCard extends StatefulWidget {
    ChoiceCard({Key key, this.choice}) : super(key: key);
    final Choice choice;
    @override
    _ChoiceCard createState() => new _ChoiceCard();
  }
  class _ChoiceCard extends State<ChoiceCard> {


    @override
    Widget build(BuildContext context) {
      final TextStyle textStyle = Theme.of(context).textTheme.display1;

      return new Card(
        color: Colors.white,
        child: new Center(
          child: new Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              new Icon(widget.choice.icon, size: 128.0, color: textStyle.color),
              new Text(widget.choice.title, style: textStyle),
            ],
          ),
        ),
      );
    }
  }

  void main() {
    runApp(new MainApp());
  }

      

        
        
        
      

    

I'm a little annoyed because my code above is similar to the actual answer to the need. The only difference between my code above and what the operator needs is that I added the changes to the tabcontroller instead of the button itself

Here is the code

 import 'package:flutter/material.dart';
 void main() {
   runApp(new MyApp());
 }
 class MyApp extends StatelessWidget{
   Widget build(BuildContext context) {
     return new MaterialApp(
       title: 'Nothing',
       theme: new ThemeData(
         primarySwatch: Colors.blue,
       ),
       home: new Tabs(),
     );
   }

 }
 class Tabs extends StatefulWidget {
   @override
   TabsState createState() => new TabsState();
 }
 class TabsState extends State<Tabs> with SingleTickerProviderStateMixin {
   TabController controller;
   //create internal state
   Choice _choice;
   @override
   void initState() {
     super.initState();
     //try to make the length to
     controller = new TabController(length: 5, vsync: this);
     //add listener to add change index callback
     //https://docs.flutter.io/flutter/material/TabController-class.html
     controller.addListener(_select);
     _choice = choices[0];

   }
   @override
   void dispose() {
     controller.dispose();
     super.dispose();
   }

   void _select(){
     setState((){
       _choice = choices[controller.index];
     });

   }
   @override
   Widget build(BuildContext context) {
     return new Scaffold(
         appBar: new AppBar(
           centerTitle: true,
           title: new Text(_choice.title), backgroundColor: new Color(_choice.color),
           bottom: new TabBar(
               controller: controller,
               tabs: <Tab>[
                 new Tab( icon: new Icon(choices[0].icon), text: 'Home',),
                 new Tab (icon: new Icon(choices[1].icon), text:'Support'),
               ]),
         ),
         body: new TabBarView(
           controller: controller,
           children: <Widget>[
             //dummy page
             new MyHomePage(),
             new  Center( child: new Text('dummy page 2')),

           ],
         ),
     );
   }
 }
 class Choice {
   const Choice({ this.title, this.icon, this.color});
   final String title;
   final IconData icon;
   final num color;
 }
 //create a list
 const List<Choice> choices = const <Choice>[
   const Choice(title: 'Home', icon: Icons.home, color:  0x0),
   const Choice(title: 'Support', icon: Icons.mail, color: 0xFF42A5F5),

 ];


 class MyHomePage extends StatefulWidget {
   @override
   _MyHomePageState createState() => new _MyHomePageState();
 }
 class _MyHomePageState extends State<MyHomePage> {
   @override
   Widget build(BuildContext context) {
     return new Center(
       child: new Text('dummy page'),
     );
   }
 }