Flutter Change TabItem background when selected

Question

I want to ask how to change tab item background color when the tab is selected?

sorry I'm a newbie in the flutter

is it better to use the bottom tab bar or tab bar ?

like this :

my code :

          bottomNavigationBar: new TabBar(
            tabs: [
              Tab(
                icon: new Icon(Icons.home),
              ),
              Tab(
                icon: new Icon(Icons.rss_feed),
              ),
              Tab(
                icon: new Icon(Icons.perm_identity),
              ),
              Tab(icon: new Icon(Icons.settings),)
            ],
            labelColor: Colors.yellow,
            indicatorWeight: 1.0,
            unselectedLabelColor: Colors.blue,
            indicatorSize: TabBarIndicatorSize.label,
            indicatorPadding: EdgeInsets.all(5.0),
            indicatorColor: Colors.red,
          ),
          backgroundColor: Colors.black,
        ),
      ),
    );
  }
}

Here is the simple answer. [link](https://stackoverflow.com/a/75385747/4435427) — Moiz Irshad, Feb 08 '23 at 12:45

score 12 · Answer 1 · answered Jan 08 '20 at 20:43

This is pretty simple and doesn't require implementing whole new custom tab bar. You only need to create a custom selection indicator, like this:

TabBar(
  ...
  indicator: SolidIndicator(),
)

And then SolidIndicator implementation:

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

/// Solid tab bar indicator.
class SolidIndicator extends Decoration {
  @override
  BoxPainter createBoxPainter([VoidCallback onChanged]) {
    return _SolidIndicatorPainter(this, onChanged);
  }
}

class _SolidIndicatorPainter extends BoxPainter {
  final SolidIndicator decoration;

  _SolidIndicatorPainter(this.decoration, VoidCallback onChanged)
      : assert(decoration != null),
        super(onChanged);

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    assert(configuration != null);
    assert(configuration.size != null);

    final Rect rect = offset & configuration.size;
    final Paint paint = Paint();
    paint.color = Colors.white;
    paint.style = PaintingStyle.fill;
    canvas.drawRect(rect, paint);
  }
}

score 9 · Answer 2 · answered Nov 02 '20 at 14:58

9

For an even easier solution use:

indicator: BoxDecoration(color: Colors.white),

answered Nov 02 '20 at 14:58

loreco

116
1
7

score 5 · Answer 3 · answered Nov 19 '20 at 06:43

bottom: TabBar(
          tabs: [
            Tab(
                // icon: Icon(Icons.contacts),
                text: "All Threads"),
            Tab(text: "Inbox"),
            Tab(text: "Sent"),
          ],
          indicator: BoxDecoration(
            color: Color(0xffff00a8),
            // color: _hasBeenPressed ? Color(0xffffffff) : Color(0xffff00a8),
          ),
          unselectedLabelColor: Color(0xffff00a8),
          indicatorColor: Color(0xffff00a8),
          labelColor: Color(0xffffffff),

          // unselectedLabelColor: Colors.grey,
        ),

diegoveloper · Accepted Answer · 2018-08-21T05:14:48.380

I was able to achieve that making some changes into the file tabs.dart .

This is the file that I created : https://gist.github.com/diegoveloper/2ac0f0c127423f03001badc5c98a45f4

You can use like this :

        import 'package:yourproject/custom_tabs.dart' as mycustomtab;



        class TabBarDemo extends StatefulWidget {
          @override
          TabBarDemoState createState() {
            return new TabBarDemoState();
          }
        }

        class TabBarDemoState extends State<TabBarDemo>
            with SingleTickerProviderStateMixin {
          TabController _controller;

          @override
          void initState() {
            _controller = new TabController(length: 4, vsync: this);
            _controller.addListener(() {
              setState(() {});
            });
            super.initState();
          }

          @override
          void dispose() {
            _controller.dispose();
            super.dispose();
          }

          @override
          Widget build(BuildContext context) {
            return MaterialApp(
              home: Scaffold(
                appBar: AppBar(
                  title: Text('Tabs Demo'),
                ),
                bottomNavigationBar: mycustomtab.TabBar(
                  indicatorColor: Colors.red,
                  controller: _controller,
                  activeBackgroundColor: Colors.red,
                  inactiveBackgroundColor: Colors.black,
                  indicatorWeight: 0.1,
                  tabs: [
                    mycustomtab.MyCustomTab(
                      icon: new Icon(Icons.home),
                    ),
                    mycustomtab.MyCustomTab(
                      icon: new Icon(Icons.rss_feed),
                    ),
                    mycustomtab.MyCustomTab(
                      icon: new Icon(Icons.perm_identity),
                    ),
                    mycustomtab.MyCustomTab(
                      icon: new Icon(Icons.settings),
                    )
                  ],
                ),
                body: TabBarView(
                  controller: _controller,
                  children: [
                    Icon(Icons.directions_car),
                    Icon(Icons.directions_transit),
                    Icon(Icons.directions_bike),
                    Icon(Icons.directions_boat),
                  ],
                ),
              ),
            );
          }
        }

Result

score 0 · Answer 5 · answered Jun 20 '23 at 14:29

0

Much easier solution : for -60 , you can add indicator padding that you want.

indicatorPadding: EdgeInsets.symmetric(horizontal: -60),
indicator: BoxDecoration(color: Colors.red),

answered Jun 20 '23 at 14:29

Buddhika

116
2
10

Flutter Change TabItem background when selected

5 Answers5

Linked