This is the 10th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Tab key elements

  • TabController

    This is the Tab page controller, used to define the Tab Tab and content page coordinates, also can configure the Tab page switching animation effect.

TabController is generally used in stateful controls to adapt to scenarios where the number and content of tabs change dynamically. If tabs are static and fixed in the APP, you can add a simple version of DefaultTabController to stateless controls to improve the operation efficiency. After all, stateless controls use less resources and run more efficiently than stateful controls.

  • TabBar

    Tab page of the Title control, switch Tab page entry, generally put under the AppBar control to use, internal Title property. The children are arranged horizontally, or if you want to arrange them vertically, wrap them with a Column or ListView control. An array with Tab children.

  • TabBarView

    The content container for a Tab page, which holds the body content of the Tab page. A child element can be multiple controls of various types.

Take a look at the Tab constructor:

TabBar({ Key key, @required this.tabs, this.controller, this.isScrollable: False, this. IndicatorColor, this. IndicatorWeight: 2.0, this. EdgeInsets.zero, this.indicator, this.indicatorSize, this.labelColor, this.labelStyle, this.unselectedLabelColor, this.unselectedLabelStyle, })Copy the code
attribute meaning
tabs Tab objects are usually used, but other widgets can also be used
controller TabController object
isScrollable Scrollable
indicatorColor Indicator color
indicatorWeight Indicator thickness
indicatorPadding Padding of the bottom indicator
indicator Indicator decoration, e.g. border, etc
indicatorSize Indicator size calculation method
labelColor Select Tab text color
labelStyle Select the Tab text Style
unselectedLabelColor Unselected Tab text color
unselectedLabelStyle The Tab text style is not selected

Tab Usage

import 'package:flutter/material.dart'; class MyHomePage extends StatefulWidget { @override createState() => new MyHomePageState(); } class MyHomePageState extends State<MyHomePage> {final List<Tab> myTabs = <Tab> 'bully knife), the Tab (text:' day policy '), the Tab (text: 'pure Yang), the Tab (the text: "shaolin"), the Tab (text:' hidden sword '), the Tab (text: 'seven show'), the Tab (text: 'ruling),]; @override Widget build(BuildContext context) { return DefaultTabController( length: myTabs.length, child: Scaffold( appBar: AppBar( backgroundColor: Colors.blue, title: TabBar( tabs: myTabs, isScrollable: true, indicatorColor: Colors.red, labelColor: Colors.white, ), ), body: TabBarView( children: myTabs .map((Tab tab) => Center(child: Text(tab.text))) .toList()), ), ); }}Copy the code

​

The Flutter remains in TAB state after switching to TAB

The state of widgets is not saved in the Flutter to save memory. Widgets are temporary variables. When we use TabBar, TabBarView, we see that when we switch tabs and then go back to the previous page, the TAB will reload and re-create, which is a very unfriendly experience. The design of Flutter is not intended to continue with android’s ViewPager cached page design. After all, the controls have to be developed on both sides. The design is still in beta and a lot is still lacking, but the design is extensible and Flutter provides a solution. You can force the state to be preserved when the widget is not displayed, so you don’t have to recreate it the next time you load it.

AutomaticKeepAliveClientMixin

AutomaticKeepAliveClientMixin state is an abstract, it’s also simple to use, we only need to use our own inherit this abstract state, and can realize wantKeepAlive method.

After inheriting this state, the widget will not be destroyed and will remain in memory even after it is not displayed, so use this method with caution.

The detailed official documentation is available here.

Here’s a more detailed demo.

/ * * Created by Eunice li original on 2018/9/13. * email: [email protected] * * / import 'package: flutter/material. The dart'; class TweetsListPage extends StatefulWidget { @override State<StatefulWidget> createState() => TweetListState(); } class TweetListState extends State<TweetsListPage> with AutomaticKeepAliveClientMixin { @override Widget build(BuildContext context) { return Center( child: Text('TweetsListPage'), ); } @override void dispose() { print('TweetsListPage dispose'); super.dispose(); } @override bool get wantKeepAlive => true; }Copy the code

Dynamically changing TAB

Sometimes you need to manually change the current TAB, and you need to create your own controller,

TabController tabController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    tabController = TabController(length: myTabs.length, vsync: this);
  }
Copy the code

In this case, we can get rid of our external DefaultTabController, which we use when we don’t have a controller, because tabbar and tabbarView must have a controller.

perform

tabController.animateTo(index)
Copy the code

It’s going to jump to the corresponding TAB, and of course set the controller in both the tabBar and the tabbarView.

Cool version:

​

Code: making