Flutter TabBarのアイコンの色を変えるサンプル

環境
Windows11 pro 64bit
Flutter 3.3.7

構文

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
TabBar(
labelColor: /*選択時の色*/,
unselectedLabelColor: /*通常時の色*/,
tabs: [/*タブ*/],
),
TabBar( labelColor: /*選択時の色*/, unselectedLabelColor: /*通常時の色*/, tabs: [/*タブ*/], ),
TabBar(
  labelColor: /*選択時の色*/,
  unselectedLabelColor: /*通常時の色*/,
  tabs: [/*タブ*/],
),

通常時と選択時の色を指定し、アイコンの色を変えます。

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@override
Widget build(BuildContext context) {
return SafeArea(
child: DefaultTabController(
length: 2,
child: Scaffold(
body: TabBar(
labelColor: Colors.pink,
unselectedLabelColor: Colors.greeb,
indicatorColor: Colors.pink,
tabs: [
Tab(
icon: Icon(Icons.student),
),
Tab(
icon: Icon(Icons.settings),
)
],
),
),
),
);
}
@override Widget build(BuildContext context) { return SafeArea( child: DefaultTabController( length: 2, child: Scaffold( body: TabBar( labelColor: Colors.pink, unselectedLabelColor: Colors.greeb, indicatorColor: Colors.pink, tabs: [ Tab( icon: Icon(Icons.student), ), Tab( icon: Icon(Icons.settings), ) ], ), ), ), ); }
@override
 Widget build(BuildContext context) {
   return SafeArea(
     child: DefaultTabController(
       length: 2,
       child: Scaffold(
         body: TabBar(
           labelColor: Colors.pink,
           unselectedLabelColor: Colors.greeb,
           indicatorColor: Colors.pink,
           tabs: [
             Tab(
               icon: Icon(Icons.student),
             ),
             Tab(
               icon: Icon(Icons.settings),
             )
           ],
         ),
       ),
     ),
   );
 }

 

Flutter

Posted by arkgame