flutter选项卡式的AppBar-官网的实例

import 'package:flutter/material.dart';


class NextPage extends StatefulWidget {
  @override
  _NextPageState createState() => _NextPageState();
}


class Choice {
   const Choice({this.title,this.icon});
    final String title;
    final IconData icon;

}

const List<Choice> choices = const <Choice>[
  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_train),
  const Choice(title: 'WALK',icon: Icons.directions_walk),
];


class ChoiceCard extends StatelessWidget {

  const ChoiceCard({Key key ,this.choice}) :super(key: key);

  final Choice choice;


  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.headline1;

    return Card(
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Icon(choice.icon,size: 128.0,color: textStyle.color,),
            Text(choice.title,style: textStyle),
          ],
        ),
      ),
    );
  }
}




class _NextPageState extends State<NextPage> with SingleTickerProviderStateMixin {

   TabController _tabController;


   // 初始化方法
   @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: choices.length, vsync: this);
  }


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



  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text('NextPage'),
            leading: IconButton(
             tooltip: 'Previous choice',  // 提示语
             icon: const Icon(Icons.arrow_back),
               onPressed: (){
                 _nextPage(-1);
                },
              ),
          actions: [
             IconButton(icon: const Icon(Icons.arrow_forward),
                tooltip: 'Next choice',
                 onPressed: (){
                    _nextPage(1);
                  }),
              ],
           bottom: PreferredSize(
              preferredSize: const Size.fromHeight(48),
              child: Theme(
                data: Theme.of(context).copyWith(accentColor: Colors.white),
                child: Container(
                  color: Colors.red,
                  height: 48.0,
                  alignment: Alignment.center,
                  child: TabPageSelector(controller: _tabController,),
                ),
              ),
            ),
          ),
      body: TabBarView(
        controller: _tabController,
        children: choices.map((Choice choice) {
          return Padding(padding: const EdgeInsets.all(16.0),
          child: ChoiceCard(choice: choice),
          );
        }).toList(),
      ),
    );
  }

      // 点击事件....
        void _nextPage(int delta){
             final int newIndex = _tabController.index + delta;
               if (newIndex < 0 || newIndex >= _tabController.length) {
                // return;
               _tabController.animateTo(newIndex);
           }

  }


}