Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about how to achieve tab switching at the top of Flutter imitating headlines. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

Overview

Today, we mainly implement a tab switch at the top of the headlines, which is also often used in projects, and then we'll start from scratch.

Effect picture

The old rule is to start with the effect picture.

Implementation of tab switching at the top of the headline

To achieve this effect, you need to use TabBar to achieve it. Let's first talk about the basic properties of TabBar.

TabBar and TabBarView

TabBar is a component of AppBar and is usually used in conjunction with TabBarView.

Brief introduction of TabBar construction method and common properties const TabBar ({Key key, @ required this.tabs, this.controller, this.indicatorColor, this.labelColor, this.unselectedLabelColor) }) property name property value type description all tab subitems to be displayed in the control collection of tabsTab type controllerTabController type is mainly used to monitor the tab toggle indicatorColorColortab subitem indicator color labelColorColor subitem text color unselectedLabelColorColor unselected subitem text color TabBarView construction method and common property introduction const TabBarView ({Key key, @ required this.children, this.controller) }) the attribute name attribute value type indicates that the collection of childrenWidget corresponds to the specific content to be displayed for each subitem of TabBar. The controllerTabController type is mainly used to listen for the switching of tab. Simple use.

Next, we will implement basic usage in two ways, the first with DefaultTabController and the other with TabController. When we use TabBar, we must put it in the AppBar of the Scaffold control. If the Scaffold in our App cannot be modified, then we need to wrap a layer of Scaffold components on the page that wants to achieve the tab effect. To use the TabBar component, we must specify TabController for it, otherwise it will report an error. Let's first look at the first implementation, wrapping the DefaultTabController implementation outside the Scaffold component.

DefaultTabController implementation

First, we prepare the collection of tab subitems that need to be switched and the specific display of the corresponding tab subitems.

/ / the collection of tab subitems to be displayed final tabs = [Tab (text: "Hot",), Tab (text: "News",),] / / corresponding to the specific page content to be displayed after the above tab switch final tabBarViews = [Center (child: Text ("interface corresponding to popular Tab"), Center (child: Text ("interface corresponding to news Tab"),)]

Then define a TabBar implementation on the HomePage page.

Number of DefaultTabController (length: tabs.length, / / tab) child: Scaffold (appBar: AppBar (title: TabBar (tabs: tabs,),), body: TabBarView (children: tabBarViews,)

Normally, our TabBar should correspond to the bottom attribute in appBar, but here we uninstall the title attribute because we already have an appBar on the upper layer. If we write the corresponding TabBar on the bottom attribute of appBar, it will cause the appBar to leave a blank. The effect is as follows. So we defined it on the title attribute.

TabController implementation

The limitation of the above implementation is that when we click to switch tab, we often need to monitor and change the page state at the same time. So we implement it in TabController. First, take a look at the construction method and properties of TabController.

TabController ({int initialIndex = 0, @ required this.length, @ required TickerProvider vsync}); attribute name attribute value type description the number of tab subscript lengthinttab initially selected by initialIndexint vsyncTickerProvider provides animation and other behaviors

In order to achieve the tab switching effect that can change the state dynamically, we must first inherit StatefulWidget, because TabController requires TickerProvider, so we also let our state class Mixins SingleTickerProviderStateMixin this class. To make it easier to implement TabController, take a look at the specific code implementation.

Class ThirdPage extends StatefulWidget {@ override State createState () = > _ ThirdPageState ();} class _ ThirdPageState extends State with SingleTickerProviderStateMixin {TabController _ tabController; @ override void initState () {super.initState (); _ tabController = TabController (length: tabs.length, vsync: this); _ tabController.addListener () = > print ("the first ${_ tabController.index} tab currently clicked")) } @ override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: TabBar (controller: _ tabController, tabs: tabs,),), body: TabBarView (controller: _ tabController, children: tabBarViews,);}}

At this point, our imitation headline tab switching effect has been achieved.

The above is the editor for you to share how to carry out the Flutter imitation of the top of the headline tab switch to achieve, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.