Description:

flutter tab indicator styler

flutter_tab_indicator_styler #







Add beautiful and trending tab indicators directly to your default Flutter TabBar.
Features 💚 #

Supports Android, iOS, Web
Can be directly added to the default TabBar
3 different styles of TabIndicator
Highly customizable

Demo #



Styles #
DotIndicator
/// Radius of the dot
final double radius;

/// Color of the dot
final Color color;

/// Distance from the center, if you the value is positive, the dot will be positioned below the tab's center
/// if the value is negative, then dot will be positioned above the tab's center
final double distanceFromCenter;

/// [PagingStyle] determines if the indicator should be fill or stroke
final PaintingStyle paintingStyle;

/// StrokeWidth, used for [PaintingStyle.stroke]
final double strokeWidth;

copied to clipboard
MaterialIndicator #
/// Height of the indicator. Defaults to 4
final double height;

/// Determines to location of the tab, [TabPosition.bottom] set to default.
final TabPosition tabPosition;

/// topRight radius of the indicator, default to 5.
final double topRightRadius;

/// topLeft radius of the indicator, default to 5.
final double topLeftRadius;

/// bottomRight radius of the indicator, default to 0.
final double bottomRightRadius;

/// bottomLeft radius of the indicator, default to 0
final double bottomLeftRadius;

/// Color of the indicator, default set to [Colors.black]
final Color color;

/// Horizontal padding of the indicator, default set 0
final double horizontalPadding;

/// [PagingStyle] determines if the indicator should be fill or stroke, default to fill
final PaintingStyle paintingStyle;

/// StrokeWidth, used for [PaintingStyle.stroke], default set to 2
final double strokeWidth;
copied to clipboard
RectangularIndicator
/// topRight radius of the indicator, default to 5.
final double topRightRadius;

/// topLeft radius of the indicator, default to 5.
final double topLeftRadius;

/// bottomRight radius of the indicator, default to 0.
final double bottomRightRadius;

/// bottomLeft radius of the indicator, default to 0
final double bottomLeftRadius;

/// Color of the indicator, default set to [Colors.black]
final Color color;

/// Horizontal padding of the indicator, default set to 0
final double horizontalPadding;

/// Vertical padding of the indicator, default set to 0
final double verticalPadding;

/// [PagingStyle] determines if the indicator should be fill or stroke, default to fill
final PaintingStyle paintingStyle;

/// StrokeWidth, used for [PaintingStyle.stroke], default set to 0
final double strokeWidth;

copied to clipboard
How to use #
// Directly use inside yoru [TabBar]
TabBar(
indicatorColor: Colors.green,
tabs: [
Tab(
text: "Home",
),
Tab(
text: "Work",
),
Tab(
text: "Play",
),
],
labelColor: Colors.black,
// add it here
indicator: DotIndicator(
color: Colors.black,
distanceFromCenter: 16,
radius: 3,
paintingStyle: PaintingStyle.fill,
),
),
copied to clipboard

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter