滑動(dòng)選項(xiàng)卡例子

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("滑動(dòng)選項(xiàng)卡"),
                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),)
                    ],
                ),
            ),
        ),
    );
  }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市初厚,隨后出現(xiàn)的幾起案子莲组,更是在濱河造成了極大的恐慌躲撰,老刑警劉巖颈将,帶你破解...
    沈念sama閱讀 219,589評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件段直,死亡現(xiàn)場(chǎng)離奇詭異溜徙,居然都是意外死亡市怎,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,615評(píng)論 3 396
  • 文/潘曉璐 我一進(jìn)店門傍衡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來深员,“玉大人,你說我怎么就攤上這事蛙埂【氤” “怎么了?”我有些...
    開封第一講書人閱讀 165,933評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵绣的,是天一觀的道長(zhǎng)叠赐。 經(jīng)常有香客問我欲账,道長(zhǎng),這世上最難降的妖魔是什么燎悍? 我笑而不...
    開封第一講書人閱讀 58,976評(píng)論 1 295
  • 正文 為了忘掉前任敬惦,我火速辦了婚禮盼理,結(jié)果婚禮上谈山,老公的妹妹穿的比我還像新娘。我一直安慰自己宏怔,他們只是感情好奏路,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,999評(píng)論 6 393
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著臊诊,像睡著了一般鸽粉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上抓艳,一...
    開封第一講書人閱讀 51,775評(píng)論 1 307
  • 那天触机,我揣著相機(jī)與錄音,去河邊找鬼玷或。 笑死儡首,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的偏友。 我是一名探鬼主播蔬胯,決...
    沈念sama閱讀 40,474評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼位他!你這毒婦竟也來了氛濒?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,359評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤鹅髓,失蹤者是張志新(化名)和其女友劉穎舞竿,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體窿冯,經(jīng)...
    沈念sama閱讀 45,854評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡炬灭,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,007評(píng)論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了靡菇。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片重归。...
    茶點(diǎn)故事閱讀 40,146評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖厦凤,靈堂內(nèi)的尸體忽然破棺而出鼻吮,到底是詐尸還是另有隱情,我是刑警寧澤较鼓,帶...
    沈念sama閱讀 35,826評(píng)論 5 346
  • 正文 年R本政府宣布椎木,位于F島的核電站违柏,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏香椎。R本人自食惡果不足惜漱竖,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,484評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望畜伐。 院中可真熱鬧馍惹,春花似錦、人聲如沸玛界。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,029評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽慎框。三九已至良狈,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間笨枯,已是汗流浹背薪丁。 一陣腳步聲響...
    開封第一講書人閱讀 33,153評(píng)論 1 272
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留馅精,地道東北人严嗜。 一個(gè)月前我還...
    沈念sama閱讀 48,420評(píng)論 3 373
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像硫嘶,于是被迫代替她去往敵國(guó)和親阻问。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,107評(píng)論 2 356

推薦閱讀更多精彩內(nèi)容