Is it possible to change the size of the selected tab bar icon in Flutter?

Question

I'm working on a Flutter project, and got a problem with my TabBar. I would like to increase the size of the selected icon tabBar. Is it just possible ? I see that we can increase text size, but it doesn't work, of course, with an Icon.

Here is the code I am using :

return DefaultTabController(
      length: 5,
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Theme.of(context).primaryColor,
                const Color.fromRGBO(0, 60, 99, 1.0)
              ]),
        ),
        child: Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            shadowColor: Colors.transparent,
            flexibleSpace: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: const [
                TabBar(
                  tabs: [
                    Tab(
                      icon: Icon(
                        CupertinoIcons.add,
                      ),
                    ),
                    Tab(
                      icon: Icon(CupertinoIcons.add),
                    ),
                    Tab(
                      icon: Icon(CupertinoIcons.add),
                    ),
                    Tab(
                      icon: Icon(CupertinoIcons.add),
                    ),
                    Tab(
                      icon: Icon(CupertinoIcons.add), 
                    )
                  ],
                  unselectedLabelColor: Color.fromRGBO(142, 142, 147, 1),
                  labelColor: Color.fromRGBO(0, 60, 255, 1),
                  unselectedLabelStyle: TextStyle(fontSize: 15), // Test with text
                  labelStyle: TextStyle(
                    fontSize: 20,
                  ),
                ),
              ],
            ),
          ),
          body: TabBarView(
            physics: NeverScrollableScrollPhysics(),
            children: [
              FirstScreen(),
              SecondScreen(),
              ThirdScreen(),
              FourthScreen(),
              FifthScreen()
            ],
          ),
        ),
      ),
    );

I'm really stuck, I hope there is a solution!

Answer 1

try this:

int _selectedTab = 0;

return DefaultTabController(
      length: 5,
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Theme.of(context).primaryColor,
                const Color.fromRGBO(0, 60, 99, 1.0)
              ]),
        ),
        child: Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            shadowColor: Colors.transparent,
            flexibleSpace: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: const [
                TabBar(
                  onTap: (index) {
                    _selectedTab = index;
                    setState((){});
                  },
                  tabs: [
                    Tab(
                      icon: Icon(
                        CupertinoIcons.add,
                        size: _selectedTab == 0 ? 30 : 18
                      ),
                    ),
                    Tab(
                      icon: Icon(
                        CupertinoIcons.add,
                        size: _selectedTab == 1 ? 30 : 18
                      ),
                    ),
                    Tab(
                      icon: Icon(
                        CupertinoIcons.add,
                        size: _selectedTab == 2 ? 30 : 18
                      ),
                    ),
                    Tab(
                      icon: Icon(
                        CupertinoIcons.add,
                        size: _selectedTab == 3 ? 30 : 18
                      ),
                    ),
                    Tab(
                      icon: Icon(
                        CupertinoIcons.add,
                        size: _selectedTab == 4 ? 30 : 18
                      ),
                    )
                  ],
                  unselectedLabelColor: Color.fromRGBO(142, 142, 147, 1),
                  labelColor: Color.fromRGBO(0, 60, 255, 1),
                  unselectedLabelStyle: TextStyle(fontSize: 15), // Test with text
                  labelStyle: TextStyle(
                    fontSize: 20,
                  ),
                ),
              ],
            ),
          ),
          body: TabBarView(
            physics: NeverScrollableScrollPhysics(),
            children: [
              FirstScreen(),
              SecondScreen(),
              ThirdScreen(),
              FourthScreen(),
              FifthScreen()
            ],
          ),
        ),
      ),
    );