滑动选项卡例子

import 'package:flutter/material.dart';
import 'package:flutter_widget_demo/app.dart';

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

class MyApp extends StatelessWidget {
    @override
  Widget build(BuildContext context) {
    // TODO: implement build
//    return App();
    return AppBarBottomWidget();
  }
}

class AppBarBottomWidget extends StatefulWidget {
    @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return AppBarBottomState();
  }
}

class AppBarBottomState extends State<AppBarBottomWidget> with SingleTickerProviderStateMixin {
    TabController tabController;

    @override
  void initState() {
    super.initState();
    tabController =  new TabController(length: choices.length, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    tabController.dispose();
  }

  void _nextPage(int delta) {
        final int nextIndex = tabController.index + delta;
        if (nextIndex < 0 || nextIndex >= tabController.length) return;
        tabController.animateTo(nextIndex);
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
                title: Text("滑动选项卡"),
                leading: IconButton(
                    icon: Icon(Icons.arrow_back),
                    onPressed: () {_nextPage(-1);},
                ),
                actions: <Widget>[
                    IconButton(
                        icon: Icon(Icons.arrow_forward),
                        onPressed: (){_nextPage(1);},
                    ),
                ],
                bottom: PreferredSize(
                    preferredSize: Size.fromHeight(48.0),
                    child: Theme(
                        data: ThemeData(accentColor: Colors.white),
                        child: Container(
                            height: 48.0,
                            alignment: Alignment.center,
                            child: TabPageSelector(controller: tabController,),
                        ),
                    ),
                ),
            ),
            body: TabBarView(
                controller: tabController,
                children: choices.map((Choice choice) {
                    return new Padding(
                        padding: const EdgeInsets.all(16.0),
                        child:  ChoiceCardWidget(choice: choice,),
                    );
                }).toList(),
            ),
        ),
    );
  }
}

class Choice {
    final String title;
    final IconData icon;
    const Choice({this.title,this.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_railway),
    const Choice(title: 'Walk', icon: Icons.directions_walk),
    const Choice(title: 'Run', icon: Icons.directions_run),
    const Choice(title: 'Eta', icon: Icons.drive_eta),

];

class ChoiceCardWidget extends StatelessWidget {
    final Choice choice;
    ChoiceCardWidget({Key key,this.choice}) : super(key : key);

    @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Padding(
        padding: EdgeInsets.all(20.0),
        child: Card(
            color: Colors.white,
            child: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        Icon(choice.icon,size: 200.0,color: Colors.blue,),
                        Padding(padding: EdgeInsets.only(bottom: 50.0),),
                        Text(choice.title,style: TextStyle(fontSize: 50.0),)
                    ],
                ),
            ),
        ),
    );
  }
}