Animation Class: AppBar and Tabbar

App Bar

https://flutter.io/docs/catalog/samples/basic-app-bar

https://material.io/design/components/app-bars-top.html#theming

https://docs.flutter.io/flutter/material/AppBar-class.html

The AppBar displays the toolbar widgets
leading
title
actions
bottom TabBar.

Declaring new method inside widget by (){};

void main(){
  runApp(new MaterialApp(home:new AppTest1()));
}

class AppTest1 extends StatefulWidget {
  @override  _AppTest1State createState() => _AppTest1State();
}

class _AppTest1State extends State<AppTest1> {

  String bodyText = " ";

  @override  Widget build(BuildContext context) {
    return new Scaffold(
      appBar:new AppBar(
      backgroundColor: Colors.red,
        leading: new Icon (Icons.laptop_chromebook),
        title: new Text("Appbar Title"),
        //centerTitle: true,        //titleSpacing: 80.0,        elevation: 10.00,
        actions: <Widget>[
          new IconButton(icon: new Icon(Icons.arrow_forward),onPressed: (){
            setState(() {
              bodyText= "Next Page";
          });}),
          new IconButton (icon: new Icon (Icons.plus_one), onPressed: (){
            setState(() {
              bodyText = "+1";
            });
          },),
          new IconButton (icon: new Icon (Icons.menu), onPressed:(){
            setState((){
              bodyText = "Back to Menu";
            });
          }),
        ],
        //toolbarOpacity: 0.4,      ),
      body: new Center(
           child: new Text(bodyText),
      ),
    );
  }
}

TabBar:

Either at the bottom of AppBar or at bottomNavigationBar of Body.
Tab and Content synchronised by DefaultTabController/TabController

Initial index
Length
Ticketprovider

Vend Ticker which notify there is a frame change
Usually used indirectly with AnimationController (refer Ticketprovider implementation for switching tab content)
"with" TickerProviderStateMixin (multiple)  and SingleTickerProviderStateMixin (single) classes to to provide ticker that is configured to tick only when tree is enabled.
pass vsync: this

void main(){
  runApp(new MaterialApp(home:new AppbarTest2()));
}

class AppbarTest2 extends StatefulWidget {
  @override  _AppbarTest2State createState() => _AppbarTest2State();
}

class _AppbarTest2State extends State<AppbarTest2> with SingleTickerProviderStateMixin {

  TabController _tabControl;

  void initState(){
    _tabControl = new TabController(length: 3, vsync: this);
  }

  @override  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("AppBar"),
        bottom: new TabBar(
          controller: _tabControl,
          tabs: <Widget>[
          new Tab(icon: new Icon(Icons.home),),
          new Tab(icon: new Icon(Icons.search),),
          new Tab(icon: new Icon(Icons.rss_feed),),
          ],
        ),
      ),
      body: new TabBarView(
        children: <Widget>[
          new Center(child: new Text("Home"),),
          new Center(child: new Text("Search"),),
          new Center(child: new Text("Feed"),),
        ],
        controller: _tabControl,
      ),

      bottomNavigationBar: new Material(
        color: Colors.lightGreen,
        child: new TabBar(
            controller: _tabControl,
            tabs:<Widget>[
              new Tab(icon: new Icon(Icons.home),),
              new Tab(icon: new Icon(Icons.search),),
              new Tab(icon: new Icon(Icons.rss_feed),),
            ]
        ),
      ),
    );
  }
}

Type of Error Message:

`vsync` property in TabController constructor

The argument type '_MyAppState' can't be assigned to the parameter type 'TickerProvider'. 
Solution: add with SingleTickerProviderStateMixin to extend State

Advance Reading:

https://sergiandreplace.com/flutter-animations-the-basics/

Abstract Animation class

consists of 2 values:
Status: dimissed,forward,reverse and completed
Value: Stored in animation, Type is generic


Extend by AnimationController Class