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

This article mainly introduces the flutter how to achieve the head tabTop scroll bar related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this flutter how to achieve the head tabTop scroll bar article will have a harvest, let's take a look.

The effect picture is as follows:

The main.dart code is as follows:

Import 'package:flutter/material.dart';// startup function void main () = > runApp (MyApp ()); / / Custom component class MyApp extends StatelessWidget {@ override Widget build (BuildContext context) {/ / MaterialApp is the page root component return MaterialApp of flutter (title:' main root page', debugShowCheckedModeBanner: false, / / clear debug / / home indicates page information home: AppbarTop ()) }} / / header tabTop scroll bar effect component import 'package:flutter/material.dart';class AppbarTop extends StatefulWidget {@ override _ AppbarTopState createState () = > _ AppbarTopState ();} / mixed SingleTickerProviderStateMixin class synchronization properties class _ AppbarTopState extends State with SingleTickerProviderStateMixin {/ / define a controller TabController _ tabController; @ override void initState () {super.initState () / / instantiate a tab controller function by instantiating this of SingleTickerProviderStateMixin: _ tabController = TabController (length: choices.length, vsync: this);} _ nextPage (index) {int currentIndex = _ tabController.index + index; if (currentIndex)

= _ tabController.length) currentIndex = 0; / / the controller is moved to currentIndex _ tabController.animateTo (currentIndex) } @ override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: Text), centerTitle: true, / / title centered display leading: IconButton (icon: Icon (Icons.arrow_back), onPressed: () {_ nextPage (- 1) }), iconTheme: IconThemeData (color: Colors.yellow), / / header icon style color / / right icon icon can have multiple actions: [IconButton (icon: Icon (Icons.arrow_forward), onPressed: () {_ nextPage (1)) ], actionsIconTheme: IconThemeData (color: Colors.white), / / Custom navigation bar bottom: PreferredSize (child: Theme (data: Theme.of (context) .copyWith (accentColor: Colors.white), child: Container (height: 40, alignment: Alignment.center) / / Center the dot / / set the dot controller for the custom navigation bar child: TabPageSelector (controller: _ tabController,), preferredSize: Size.fromHeight (48),) / / body content body: TabBarView (/ / subject content also changes with the controller controller: _ tabController, / / traverses the data into n sub-component arrays children: choices.map ((item) {return Padding (padding: EdgeInsets.all (20), child: ChoiceCard (choice: item,)) ) }). ToList (),);}} / / ChoiceCard renders the data to the Card card component class ChoiceCard extends StatelessWidget {final Choice choice; const ChoiceCard ({Key key, this.choice}): super (key: key) Override Widget build (BuildContext context) {/ / Card widget return Card when scrolling (color: Colors.blue, child: Column (mainAxisAlignment: MainAxisAlignment.center, children: [Icon (choice.icon, size: 120, color: Colors.white,), Text (choice.title),],) }} / / class Choice {const Choice ({this.title, this.icon}); final String title; final IconData icon } / / simulated data const List choices = const [const Choice (title: 'CAR', icon: Icons.directions_car), const Choice (title:' BICYCLE', icon: Icons.directions_bike), const Choice (title: 'BOAT', icon: Icons.directions_boat), const Choice (title:' BUS', icon: Icons.directions_bus), const Choice (title: 'TRAIN', icon: Icons.directions_railway), const Choice (title:' WALK') Icon: Icons.directions_walk),]

Effect figure 2:

The code is as follows:

/ / header tabTop scroll bar effect component class AppBarBottom extends StatefulWidget {AppBarBottom ({Key key}): super (key: key); @ override _ AppBarBottomState createState () = > _ AppBarBottomState () } class _ AppBarBottomState extends State {_ SelectView (icon, text, id) {return PopupMenuItem (child: Row (mainAxisAlignment: MainAxisAlignment.spaceAround, children: [Icon (icon, color: Colors.blue), Text (text, style: TextStyle (color: Colors.black),)],)) } @ override Widget build (BuildContext context) {/ / tab uses this component return DefaultTabController (length: choices.length, child: Scaffold (appBar: AppBar (title: Text ('AppBar and TabBar'), centerTitle: true) Actions: [PopupMenuButton (shape: BeveledRectangleBorder (borderRadius: BorderRadius.circular (10)), itemBuilder: (BuildContext context) {return [PopupMenuItem (child: _ SelectView (Icons.message, 'Home','A')) PopupMenuItem (child: _ SelectView (Icons.message, 'goods','B')), PopupMenuItem (child: _ SelectView (Icons.message, 'message','C')),] })], bottom: TabBar (isScrollable: true, indicatorSize: TabBarIndicatorSize.label, tabs: choices.map ((item) {return Tab (text: item.title, icon: Icon (item.icon),) }) .toList (), body: TabBarView (children: choices.map ((item) {return Container (width: double.infinity, color: Colors.white70, child: Padding (padding: EdgeInsets.all (16)) Child: ChoiceCard (choice: item,) }). ToList (),));}} / / ChoiceCard renders data to Card card components class ChoiceCard extends StatelessWidget {final Choice choice; const ChoiceCard ({Key key, this.choice}): super (key: key) @ override Widget build (BuildContext context) {/ / Card widget when scrolling return Card (color: Colors.blue, child: Column (mainAxisAlignment: MainAxisAlignment.center, children: [Icon (choice.icon, size: 120, color: Colors.white,), Text (choice.title)) ],) }} / / class Choice {const Choice ({this.title, this.icon}); final String title; final IconData icon } / / simulated data const List choices = const [const Choice (title: 'CAR', icon: Icons.directions_car), const Choice (title:' BICYCLE', icon: Icons.directions_bike), const Choice (title: 'BOAT', icon: Icons.directions_boat), const Choice (title:' BUS', icon: Icons.directions_bus), const Choice (title: 'TRAIN', icon: Icons.directions_railway), const Choice (title:' WALK') Icon: Icons.directions_walk),] This is the end of the article on "how to achieve the head tabTop scroll bar in flutter". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve the head tabTop scroll bar in flutter". If you want to learn more, 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.