[] TabBar Flutter learning the basic components of the top navigation

I. Overview

　　The TabBar , is a material designed (Material design) are commonly used in the lateral tabs. In the Android native development, we used ViewPage or some commonly used tabs open source library to achieve horizontal slide show parallel interface in iOS native development, we can based on UICollectionView / UIButton to encapsulate this functionality in the world Flutter in , TabBar is defined in the Material Component in, so he needs to use in MaterialApp in. Usually, we will use TabBar combination TabBarView in the bottom portion of AppBar.
　　　　

Two, Tab key elements

TabController
This is the page controller Tab for defining Tab tags and content page coordinates, may also be configured to switch animation effects like tab.
TabController general state of control and put it into use, to accommodate the number of tabs and content have dynamic scenes, if the tab is static fixed pattern in APP, you can add a simple version of DefaultTabController in the absence of state control in order to improve the operation efficiency, after all, there is no state controls the state controls more than a provincial resource, faster operating efficiency.

The TabBar
Tab page Title controls the switching of the inlet Tab pages, typically into AppBar using the following controls, internal * Title property. Child elements arranged laterally in a horizontal layout, if required in the vertical arrangement, use Column or ListView control-packaged. Child elements Tab type of array .

TabBarView
Tab pages contents of a container, which is placed within Tab page body content. Sub-elements may be multiple types of controls.

Third, the constructor　　

TabController

DefalutTabController

 const DefaultTabController({
    Key key,
    @required this.length,
    this.initialIndex = 0,
    @required this.child,
  }) : assert(initialIndex != null),
       assert(length >= 0),
       assert(initialIndex >= 0 && initialIndex < length),
       super(key: key);

TabController

TabController({ int initialIndex = 0, @required this.length, @required TickerProvider vsync })
    : assert(length != null && length >= 0),
      assert(initialIndex != null && initialIndex >= 0 && (length == 0 || initialIndex < length)),
      _index = initialIndex,
      _previousIndex = initialIndex,
      _animationController = AnimationController.unbounded(
        value: initialIndex.toDouble(),
        vsync: vsync,
      );

TabBar

/ * * 
    Const the TabBar ({ 
    Key Key, 
    @required this.tabs, // display tag content, generally used Tab object may be another the Widget 
    this.controller, // tabController objects 
    this.isScrollable = false, // whether scrollable 
    this.indicatorColor, // color of the indicator 
    this.indicatorWeight = 2.0, // pointer height 
    this.indicatorPadding = EdgeInsets.zero, // bottom indicator of the Padding 
    this.indicator, // pointer decoration, e.g. border and other 
    this.indicatorSize, // pointer size calculations, TabBarIndicatorSize.label with monospaced text, TabBarIndicatorSize.tab with each tab-width 
    this.labelColor, // select the label color 
    this.labelStyle, // select the label of Style 
    the this .labelPadding, // padding value for each label of 
    this.unselectedLabelColor, // unchecked label color 
    this.unselectedLabelStyle, // Style label is not selected
    }) : assert(tabs != null),
    assert(isScrollable != null),
    assert(indicator != null || (indicatorWeight != null && indicatorWeight > 0.0)),
    assert(indicator != null || (indicatorPadding != null)),
    super(key: key);
 */

Tab

const Tab({
    Key key,
    this.text,
    this.icon,
    this.child,
  }) : assert(text != null || child != null || icon != null),
       assert(!(text != null && null != child)), // TODO(goderbauer): https://github.com/dart-lang/sdk/issues/34180
       super(key: key);

tabs View

  const TabBarView ({ 
    Key Key, 
    @required the this .children, the Tab pages // array collection page component
     the this .controller, objects // tabController
     the this .physics,
     the this .dragStartBehavior = DragStartBehavior.start, 
  }): Assert (Children ! = null ), 
       Assert (dragStartBehavior ! = null ), 
       Super (Key: Key);

Fourth, create a tab bar

1. Create TabController

Use the default DefaultController

 / * * Create a 2 Tabbar * / 
  @override 
  Widget Build (BuildContext context) { 
    // TODO: Implement Build 
    return  new new DefaultTabController ( 
        length: myTabs.length, 
        Child:   new new the Scaffold (
           // the AppBar 
          appbar: new new the AppBar ( 
            title: new new the Text ( ' top tab bar ' ), 
            bottom: new new the TabBar ( 
              tabs: myTabs, // tag array 
              indicatorColor: Colors.blue, // indicator color
              isScrollable: to true , // whether the slide 
            ), 
          ), 

  / * * 3 Tabbar binding and TabBarView. * / 
          // body 
          body: new new TabBarView ( 
            Children: myTabs.map ((the Tab Tab) { 
                return  new new Center (Child: new new the Text (tab.text)); 
            .}) toList (), 
          ), 
        ), 
    ); 
  }

Use custom of TabController

class TabBarDemoState extends State<TabBarDemo>
    with SingleTickerProviderStateMixin {
  TabController _tabController; //定义tabcontroller变量

  @override
  void dispose() {
    _tabController.dispose(); //销毁
    super.dispose();
  }

  void initState() {
    super.initState();
    _tabController = new TabController(vsync: this, length: 3); //创建
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('顶部tab切换'),
        bottom: new TabBar(
          tabs: <Widget>[
            new Tab(
              icon: new Icon(Icons.directions_bike),
            ),
            new Tab(
              icon: new Icon(Icons.directions_boat),
            ),
            new Tab(
              icon: new Icon(Icons.directions_bus),
            ),
          ],
          controller: _tabController, //tabbar与自定义的tabcontroller绑定
        ), 
      ), 
      Body: new new TabBarView ( 
        Controller: _tabController, and tabController tabbarView // custom binding 
        Children: <the Widget> [
           new new Center (Child: new new the Text ( ' bicycle ' )),
           new new Center (Child: new new the Text ( ' boat ' )),
           new new Center (Child: new new the Text ( ' bus ' )), 
        ], 
      ), 
    ); 
  }

2. Tab Construction Data / TabBarView data

/ * . * 1 Tab Create Data * / 
  Final List <Tab> myTabs = <Tab> [
       new new Tab (icon: new new Icon (Icons.home), 
      text: ' Home ' , 
      ), 
      new new Tab ( 
        icon: new new Icon ( Icons.message), 
         text: ' personal information ' , 
      ), 
      
      new new the Tab ( 
        icon: new new icon (Icons.camera), 
        text: ' circle of friends ' , 
      ), 
      new new the Tab ( 
        icon: new newIcon (Icons.access_alarm), 
        text: ' alarm ' , 
      ) 
  ];

3. Create Tabbar

appbar: new new the AppBar ( 
            title: new new the Text ( ' top tab bar ' ), 
            bottom: new new the TabBar ( 
              tabs: myTabs, // tag array 
              indicatorColor: Colors.blue, // indicator color 
              isScrollable: to true , // whether the slide 
            ), 
)

4. Binding TabBar and TabBarView

/**3.绑定Tabbar 和 TabBarView */
          //body
          body: new TabBarView(
            children: myTabs.map((Tab tab){
                return new Center( child: new Text(tab.text));
            }).toList(),
          ),

5. All the code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: '顶部标签栏',
      theme: new ThemeData(
        primaryColor: Colors.red
      ),
      home: new App(),
    );
  }
}

class App extends StatelessWidget {

  /** 1 Tab Create Data * / 
  Final List <Tab> myTabs = <Tab> [
       new new Tab (icon: new new Icon (Icons.home), 
      text: ' Home ' , 
      ), 
      new new Tab ( 
        icon: new new Icon (Icons. the message), 
         text: ' personal information ' , 
      ), 
      
      new new the Tab ( 
        icon: new new icon (Icons.camera), 
        text: ' circle of friends ' , 
      ), 
      new new the Tab ( 
        icon: new new Icon(Icons.access_alarm),
        text: '闹钟',
      )
  ];
   
  /**2.创建Tabbar */
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new DefaultTabController(
        length: myTabs.length,
        child:  new Scaffold(
          //AppBar
          appBar:new AppBar(
            title: new Text('顶部标签栏'),
            bottom: new TabBar(
              tabs: myTabs, // binding tag array 
              indicatorColor: Colors.blue, // indicator color 
              isScrollable: to true , // whether the slide 
            ), 
          ), 

  / * * 3 Tabbar binding and TabBarView. * / 
          // body 
          body : new new TabBarView ( 
            Children: myTabs.map ((the Tab Tab) { 
                return  new new Center (Child: new new the Text (tab.text)); 
            }.) toList (), 
          ), 
        ), 
    ); 
  } 
}

V. Summary

TabBarView and TabBar has a TabController parameters, TabbarView and TabBar is controlled by TabController synchronization, after clicking on a Tab, to simultaneously display the corresponding TabBarView, create TabController in two ways:

The first is: use the system comes DefaultTabController, Scaffold sets in a layer DefaultTabController, this way TabBarView will automatically find the tabController.
```
@override
Widget build(BuildContext context) {
   return new DefaultTabController();
}
```
The second is their definition of a TabController, achieve SingleTickerProviderStateMixin
```
Referring to the above, "Using Custom Code tabcontroller"
```