Question 242856 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to make a custom tab in Tabbar to display different color when selected

I’ve been using this custom container to create the tab for the TabBar. I’d like the selected tab to display a different color than the unselected tabs. The ‘2nd’ tab is an example of how the selected tab should be, but i’ve hard coded it to show as example.

TabBar(
    padding: EdgeInsets.zero,
    labelPadding: EdgeInsets.zero,
    indicatorPadding: EdgeInsets.zero,
    tabs: [
      Container(
        height: 50,
        width: 120,
        decoration: BoxDecoration(
          color: const Color(0xFFF4F1F1),
          border: Border.all(color: const Color(0xFFFAC5C5), width: 2),
          borderRadius: const BorderRadius.all(Radius.circular(25)),
        ),
        child: OutlinedButton(
          onPressed: () {},
          child: const Text('1st'),
        ),
      ),
      Container(
        height: 50,
        width: 120,
        decoration: BoxDecoration(
          color: const Color(0xfffacdc9),
          border: Border.all(color: const Color(0xFFFAC5C5), width: 2),
          borderRadius: const BorderRadius.all(Radius.circular(25)),
        ),
        child: OutlinedButton(
          onPressed: () {},
          child: const Text('2nd'),
        ),
      ),
      Container(
        height: 50,
        width: 120,
        decoration: BoxDecoration(
          color: const Color(0xFFF4F1F1),
          border: Border.all(color: const Color(0xfffccccc), width: 2),
          borderRadius: const BorderRadius.all(Radius.circular(25)),
        ),
        child: OutlinedButton(
          onPressed: () {},
          child: const Text('3rd'),
        ),
      ),
    ],
  ),
),

I have tried to improvise using some indicator properties of Tabbar, but didn’t work because it only shows as a shadow for the container instead of being the foreground color.

TabBar(indicator: 
   BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(15)),'''
Tags:

2

Answers


  1. 0

    try the following
    use Tabbar with tab as children

    TabBar(
          tabs: [
            Tab(icon: Icon(Icons.directions_car)),
            Tab(icon: Icon(Icons.directions_transit)),
            Tab(icon: Icon(Icons.directions_bike)),
          ],
        ),

    additional the tabs can be customized to suit your design

    Login or Signup to reply.
  2. 0

    You need to use TabController for catching TabBar‘s current index, and changing that index.

    class TabBarExample extends StatefulWidget {
  const TabBarExample({super.key});

  @override
  State<TabBarExample> createState() => _TabBarExampleState();
}

class _TabBarExampleState extends State<TabBarExample>
    with TickerProviderStateMixin {
  // TODO: use this tabController for TabBar and TabBarView
  late final TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        ...,
        bottom: TabBar(
          controller: _tabController,
          ...,
          tabs: [
            Container(
              ...,
              decoration: BoxDecoration(
                // catch if current tab index is 0
                color: _tabController.index == 0
                    ? const Color(0xFFFACDC9)
                    : const Color(0xFFF4F1F1),
                ...,
              ),
              child: OutlinedButton(
                onPressed: () {
                  // change current tab index to 0
                  setState(() {
                    _tabController.animateTo(0);
                  });
                },
                child: const Text('1st'),
              ),
            ),
            Container(
              ...,
              decoration: BoxDecoration(
                color: _tabController.index == 1
                    ? const Color(0xFFFACDC9)
                    : const Color(0xFFF4F1F1),
                ...,
              ),
              child: OutlinedButton(
                onPressed: () {
                  setState(() {
                    _tabController.animateTo(1);
                  });
                },
                child: const Text('2nd'),
              ),
            ),
            Container(
              ...,
              decoration: BoxDecoration(
                color: _tabController.index == 2
                    ? const Color(0xFFFACDC9)
                    : const Color(0xFFF4F1F1),
                ...,
              ),
              child: OutlinedButton(
                onPressed: () {
                  setState(() {
                    _tabController.animateTo(2);
                  });
                },
                child: const Text('3rd'),
              ),
            ),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [...],
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search