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,
        ),
      ),
    );
  }
}

Answer 1

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);
  }
}

Answer 2

For an even easier solution use:

indicator: BoxDecoration(color: Colors.white),

Answer 3

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,
        ),