ConvexAppBar constructor

ConvexAppBar({
  1. Key? key,
  2. required List<TabItem> items,
  3. int? initialActiveIndex,
  4. bool? disableDefaultTabController,
  5. GestureTapIndexCallback? onTap,
  6. TapNotifier? onTabNotify,
  7. TabController? controller,
  8. Color? color,
  9. Color? activeColor,
  10. Color? backgroundColor,
  11. Color? shadowColor,
  12. Gradient? gradient,
  13. double? height,
  14. double? curveSize,
  15. double? top,
  16. double? elevation,
  17. double? cornerRadius,
  18. TabStyle? style,
  19. Curve? curve,
  20. ChipBuilder? chipBuilder,
})

Construct a new appbar with internal style.

ConvexAppBar(
  items: [
    TabItem(title: 'Tab A', icon: Icons.add),
    TabItem(title: 'Tab B', icon: Icons.near_me),
    TabItem(title: 'Tab C', icon: Icons.web),
  ],
)

You can also define a custom chipBuilder class.

class _ChipBuilder extends ChipBuilder {
 @override
 Widget build(BuildContext context, Widget child, int index, bool active) {
   return Stack(
     alignment: Alignment.center,
     children: <Widget>[
       child,
       Positioned.fill(
         child: Align(
           alignment: Alignment.topRight,
           child: Container(
             margin: EdgeInsets.only(top: 10, right: 10),
             padding: EdgeInsets.only(left: 4, right: 4),
             child: Icon(Icons.access_alarm, color: Colors.redAccent),
           ),
         ),
       )
     ],
   );
   ;
 }
}

See also:

Implementation

ConvexAppBar({
  Key? key,
  required List<TabItem> items,
  int? initialActiveIndex,
  bool? disableDefaultTabController,
  GestureTapIndexCallback? onTap,
  TapNotifier? onTabNotify,
  TabController? controller,
  Color? color,
  Color? activeColor,
  Color? backgroundColor,
  Color? shadowColor,
  Gradient? gradient,
  double? height,
  double? curveSize,
  double? top,
  double? elevation,
  double? cornerRadius,
  TabStyle? style,
  Curve? curve,
  ChipBuilder? chipBuilder,
}) : this.builder(
        key: key,
        itemBuilder: supportedStyle(
          style ?? TabStyle.reactCircle,
          items: items,
          color: color ?? Colors.white60,
          activeColor: activeColor ?? Colors.white,
          backgroundColor: backgroundColor ?? Colors.blue,
          curve: curve ?? Curves.easeInOut,
        ),
        onTap: onTap,
        onTapNotify: onTabNotify,
        controller: controller,
        backgroundColor: backgroundColor,
        shadowColor: shadowColor,
        count: items.length,
        initialActiveIndex: initialActiveIndex,
        disableDefaultTabController: disableDefaultTabController ?? false,
        gradient: gradient,
        height: height,
        curveSize: curveSize,
        top: top,
        elevation: elevation,
        cornerRadius: cornerRadius,
        curve: curve ?? Curves.easeInOut,
        chipBuilder: chipBuilder,
      );