How to change tabs background color ?

[Destinea]

Hello,

I'm currently using your scrollable_tab_view Flutter package which helps me a lot ! However, I've encountered a challenge with customizing the background color of the tabs themselves, separate from the tab labels or the content area. I couldn't find explicit properties or methods in the documentation to achieve this. I have considered changing the children's content color instead of the tab color, but the background color only takes the height of the children's content, which is problematic.

Could you please guide me on how to change the tabs' background color without affecting the children's color inside the TabBarView?

Here is a picture of what I currently have:

And what I am aiming to do :

[shyamexe]

@Destinea

Thank you for reaching out and for using our scrollable_tab_view package. I'm glad to hear it's been helpful for you! I understand the challenge you're facing with customizing the background color of the tabs themselves.

At the moment, our package doesn't have explicit properties or methods for customizing the background color of the tabs separately from the tab labels or content area. However, I appreciate your feedback on this feature request.

In the meantime, as a workaround, you can consider using the native tabbar with our tabbar view.

Column(
  children: [

    TabBar(
         controller: controller,
         .....
     )
    ScrollableTabViewWithController(
      controller: controller,
      children: List.generate(
          5,
          (index) => ListTile(
                title: Center(
                  child: Text(
                    'tab Number $index',
                    style: Theme.of(context)
                        .textTheme
                        .labelLarge!
                        .copyWith(fontSize: 20.0 + (30 * index)),
                  ),
                ),
              )),
    )
  ],
),

Alternatively, I'll prioritize adding this feature to our package as soon as possible to address your needs.

Thank you for bringing this to our attention, and please feel free to reach out if you have any further questions or suggestions.

[shyamexe]

Great news! We've just rolled out an update to our Scrollable Tab View package, and now you can customize the background color of tabs. 🎨🚀

Thanks to your feedback, we're able to continuously improve our package and make it even more versatile for your needs.

To take advantage of this new feature, simply update to the latest version of the package, and you'll have full control over the appearance of your tabs.

 ScrollableTab(
                tabViewDecoration: const BoxDecoration(
                  color: Colors.amberAccent
                ),
                onTap: (value) {
                  if (kDebugMode) {
                    print('index $value');
                  }
                },
                tabs: List.generate(
                    5,
                    (index) => Tab(
                          text: 'index $index',
                        )),
                children: List.generate(
                    5,
                    (index) => ListTile(
                          title: Center(
                            child: Text(
                              'tab Number $index',
                              style: Theme.of(context)
                                  .textTheme
                                  .labelLarge!
                                  .copyWith(fontSize: 20.0 + (30 * index)),
                            ),
                          ),
                        )),
              ),

Keep the suggestions coming, and happy coding!

8

[Destinea]

Hello,

Wow, thanks a lot for adding this feature so quickly! 😍 I'm really grateful for your efforts to make the package more versatile.

I've actually managed to achieve a somewhat similar effect using a container, but it seems the new feature behaves in the same way. This means the color doesn't fill the entire screen if the content doesn't stretch that far. So, I find myself a bit stuck in the same spot. 😅

I was wondering if there's a possibility to introduce an option to change the tab titles' background color directly, which concerns this part of the code :

tabs: [
          Tab(text: "Tab1"),
          Tab(text: "Tab2"),
          Tab(text: "Tab3"),
        ]

That way I could simply change the tabs title color and the tabs would take the original background color I set in my ThemeData. Or maybe find a way to make the tab color take all the left space even though there is nothing in it. Not sure how complex that would be to implement, but it could offer a great solution!

Thanks again for your incredible work and for considering this feedback. Looking forward to any future updates!

[Destinea]

I just realized that you also added tabBarDecoration which totally solve my problem 💯 I don't delete my message because the problem about tabBarView color that do not take all the screen size might be interesting for you. Thank you so much !