どうも、ちょげ(@chogetarou)です。
CupertinoTabBarで選択されているタブの色を設定する方法を紹介します。
方法

CupertinoTabBarの選択中のタブの色を設定するには、引数「activeColor」を使います。
具体的には、CupertinoTabBarの引数「activeColor」に選択しているタブの色を指定します。
CupertinoTabBar(
activeColor: /*選択中のタブの色*/,
・・・
),
引数「activeColor」を使うことで、CupertinoTabBarの選択中のタブの色を設定することが出来ます。
使用例
以下は、使用例です。

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return CupertinoTabScaffold(
tabBar: CupertinoTabBar(
activeColor: Colors.pink,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.circle),
label: 'Tab 1',
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.add),
label: 'Tab 2',
),
],
),
tabBuilder: (BuildContext context, int index) {
return CupertinoTabView(
builder: (BuildContext context) {
return Center(
child: Text('Content of tab $index'),
);
},
);
},
);
}
}
コメント