container_tab_indicator 0.1.0

Build your own Container-like Tab indicator.

ContainerTabIndicator

Add customized ContainerTabIndicator as an indicator for your TabBar. You can manipulate width, height, color, border radius at each corner, border color and border width.

class ContainerTabIndicator extends Decoration {
  final double width;
  final double height;
  final BorderRadius radius;
  final Color color;
  final double borderWidth;
  final Color borderColor;
  ...
}

Install

To use this package

• add container_tab_indicator as a dependency in your pubspec.yaml file:.

dependencies:
  flutter:
    sdk: flutter
  ...  
  container_tab_indicator: ^0.1.0

• get the package

flutter pub get

• import the package

import 'package:container_tab_indicator/container_tab_indicator.dart';

Example

Full example code can be found at example.

import 'package:container_tab_indicator/container_tab_indicator.dart';

...

TabBar(
  tabs: [
    Text('First', style: TextStyle(color: Colors.black)),
    Text('Second', style: TextStyle(color: Colors.black)),
  ],
  indicator: ContainerTabIndicator(
    width: 96,
    height: 32,
    color: Colors.blue,
    radius: BorderRadius.only(
      topLeft: Radius.circular(8.0),
      bottomRight: Radius.circular(8.0),
    ),
    borderWidth: 1.0,
    borderColor: Colors.black,
  ),
),