Flutter 顶部的滑动导航栏

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    @override
  Widget build(BuildContext context) {
    return NavigationSelectBarWidget();
  }
}

class NavigationSelectBarWidget extends StatelessWidget
{
    @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: DefaultTabController(
            length: choices.length,
            child: Scaffold(
                appBar: AppBar(
                    title: Text("Tab AppBar"),
                    bottom: TabBar(
                        isScrollable: true,
                        tabs: choices.map((Choice choice) {
                            return Tab(
                                text: choice.title,
                                icon: Icon(choice.icon),
                            );
                        }).toList(),
                    ),
                ),
                body: TabBarView(
                    children: choices.map((Choice choice){
                        return Padding(
                            padding: EdgeInsets.all(20.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),)
                    ],
                ),
            ),
        ),
    );
  }
}