import 'package:flutter/material.dart';
class LearnTabBar extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return _LearnTabBar();
}
}
class _LearnTabBar extends State<LearnTabBar>{
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new DefaultTabController(
length: choices.length,
child: new Scaffold(
appBar: new AppBar(
primary: true,
title: new Text("title"),
bottom: new TabBar(
isScrollable: true,
indicatorColor: Colors.yellowAccent,
indicatorWeight: 10.0,
indicatorSize: TabBarIndicatorSize.tab,
tabs: choices.map((Choice c){
return new Tab(
text: c.title,
icon: new Icon(c.icon),
);
}).toList(),
),
),
body: new TabBarView(
children: choices.map((Choice c){
return new Padding(
padding: EdgeInsets.all(10.0),
child: new Card(
elevation:10.0,
child: new Center(
child:new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(
c.icon,
size: 100.0,
color: Colors.blue,
),
new Text(
c.title,
style:new TextStyle(
color: Colors.blue,
fontSize: 30.0
) ,
),
],
),
),
),
);
}).toList(),
),
),
),
);
}
}
class Choice{
const Choice({this.icon,this.title});
final String title;
final IconData icon;
}
const List<Choice> choices=const <Choice>[
const Choice(title: "CAR",icon: Icons.directions_car),
const Choice(title: "PRINT",icon: Icons.print),
const Choice(title: "ANDROID",icon: Icons.android),
const Choice(title: "MAP",icon: Icons.map),
const Choice(title: "PHONE",icon: Icons.phone),
const Choice(title: "ALARMS",icon: Icons.access_alarms),
const Choice(title: "BLUETOOTH",icon: Icons.bluetooth),
];
flutter控件之TabBar
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- GitHub:https://github.com/happy-python/flutter_demos/tree...