[Flutter コンポーネント - Tabbar]#
使用法#
Tabbar を使用するには、indicatorのスタイル、長さ、タブの選択状態と非選択状態のスタイルを設定し、配列に基づいて Tabbar を作成します。
以下はコードです：
import 'package:flutter/material.dart';
class TabbarDemo extends StatefulWidget {
TabbarDemo({Key? key}) : super(key: key);
_TabbarDemoState createState() => _TabbarDemoState();
}
class _TabbarDemoState extends State<TabbarDemo>
with SingleTickerProviderStateMixin {
var tabTextList = <String>[];
var categoryTabs = <Tab>[
Tab(
text: "ホーム",
),
];
var tempCategoryTabs = <Tab>[];
@override
void initState() {
super.initState();
tabTextList = ["ホーム", "新着", "人気"];
tabTextList.forEach((text) {
tempCategoryTabs.add(
Tab(
text: text,
),
);
});
setState(() {
categoryTabs = tempCategoryTabs;
});
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return DefaultTabController(
initialIndex: 0,
length: categoryTabs.length,
child: Scaffold(
appBar: AppBar(title: Text("Tabbar")),
body: Column(
children: [
TabBar(
tabs: categoryTabs,
isScrollable: true,
labelStyle: TextStyle(
fontSize: 24.0,
),
labelColor: Colors.blueAccent,
unselectedLabelStyle: TextStyle(fontSize: 16.0),
unselectedLabelColor: Colors.grey,
indicator: UnderlineTabIndicator(
borderSide: BorderSide(color: Colors.orangeAccent, width: 3.0),
insets: EdgeInsets.fromLTRB(20, 0, 20, 0),
),
),
Expanded(
child: TabBarView(
children:
tabTextList.map((e) => Center(child: Text(e))).toList(),
),
)
],
),
),
);
}
}