container_tab_indicator 0.2.0
container_tab_indicator: ^0.2.0

Flutter Android iOS web

Build your own Tab indicator using familiar Container-like properties.

ContainerTabIndicator #

Add customized ContainerTabIndicator as an indicator for your TabBar. You can manipulate width, height, color, radius, border and positioning within Tab.

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

Install #

To use this package

dependencies:
  flutter:
    sdk: flutter
  ...  
  container_tab_indicator: ^0.2.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: 16,
    height: 16,
    radius: BorderRadius.circular(8.0),
    padding: const EdgeInsets.only(left: 36),
    borderWidth: 2.0,
    borderColor: Colors.black,
  ),
),

example 1

Contributing #

This package is still in early stages. To see the upcoming features, check the Issue board. If you notice any bugs not present in issues, please file a new issue. If you are willing to fix or enhance things yourself, you are very welcome to make a pull request.

0
likes
100
pub points
60%
popularity

Build your own Tab indicator using familiar Container-like properties.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

lovnicki.sandro@gmail.com

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on container_tab_indicator