feat (ui component): add alert, appbar, avatar, badge button badge and icon badge components

.packages

@@ -3,7 +3,7 @@
 # 
 # For more info see: https://dart.dev/go/dot-packages-deprecation
 # 
-# Generated by pub on 2021-06-03 17:24:23.151930.
+# Generated by pub on 2021-06-06 16:33:07.886596.
 async:file:///D:/flutter/2.0.4-stable/.pub-cache/hosted/pub.dartlang.org/async-2.5.0/lib/
 boolean_selector:file:///D:/flutter/2.0.4-stable/.pub-cache/hosted/pub.dartlang.org/boolean_selector-2.1.0/lib/
 characters:file:///D:/flutter/2.0.4-stable/.pub-cache/hosted/pub.dartlang.org/characters-1.1.0/lib/

lib/llswidget.dart

@@ -38,3 +38,17 @@ export 'package:llswidget/src/components/image/lls_image_overlay.dart';
 export 'package:llswidget/src/components/accordion/lls_accordion.dart';
 //exports alert
 export 'package:llswidget/src/components/alert/lls_alert.dart';
+//exports appbar
+export 'package:llswidget/src/components/appbar/lls_appbar.dart';
+//exports avatar
+export 'package:llswidget/src/components/avatar/lls_avatar.dart';
+//exports avatar shape
+export 'package:llswidget/src/components/avatar/shape/lls_avatar_shape.dart';
+//exports badge
+export 'package:llswidget/src/components/badge/lls_badge.dart';
+//exports badge shape
+export 'package:llswidget/src/components/badge/shape/lls_badge_shape.dart';
+//exports button badge
+export 'package:llswidget/src/components/badge/lls_button_badge.dart';
+//exports icon badge
+export 'package:llswidget/src/components/badge/lls_icon_badge.dart';

lib/src/components/alert/lls_alert.dart

@@ -4,7 +4,7 @@ import 'view/cancel.dart';
 import 'view/confirm.dart';
 import 'view/success.dart';
 
-import '../../../llswidget.dart';
+import 'package:llswidget/llswidget.dart';
 
 //Return false to keey dialog showing
 typedef bool LLSAlertOnPress(bool isConfirm);

lib/src/components/appbar/lls_appbar.dart

+import 'package:flutter/foundation.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
+
+import 'package:llswidget/llswidget.dart';
+
+class LLSAppBar extends StatefulWidget implements PreferredSizeWidget {
+  
+  LLSAppBar({
+    Key? key,
+    this.leading,
+    this.automaticallyImplyLeading = true,
+    this.title,
+    this.actions,
+    this.flexibleSpace,
+    this.bottom,
+    this.elevation,
+    this.shape,
+    this.backgroundColor,
+    this.brightness,
+    this.iconTheme,
+    this.actionsIconTheme,
+    this.textTheme,
+    this.primary = true,
+    this.centerTitle,
+    this.titleSpacing = NavigationToolbar.kMiddleSpacing,
+    this.toolbarOpacity = 1.0,
+    this.bottomOpacity = 1.0,
+    this.searchBar = false,
+    this.searchHintText = 'Search...',
+    this.searchHintStyle = const TextStyle(
+      color: Colors.white,
+      fontSize: 14,
+    ),
+    this.searchTextStyle = const TextStyle(
+      color: Colors.white,
+    ),
+    this.searchBarColorTheme = Colors.white,
+    this.searchController,
+    this.onTap,
+    this.onChanged,
+    this.onSubmitted,
+  })  : assert(elevation == null || elevation >= 0.0),
+        preferredSize = Size.fromHeight(
+          kToolbarHeight + (bottom?.preferredSize.height ?? 0),
+        ),
+        super(key: key);
+
+  final Widget? leading;
+
+  final bool automaticallyImplyLeading;
+
+  final Widget? title;
+
+  final List<Widget>? actions;
+
+  final Widget? flexibleSpace;
+
+  final PreferredSizeWidget? bottom;
+
+  final double? elevation;
+
+  final ShapeBorder? shape;
+
+  final Color? backgroundColor;
+
+  final Brightness? brightness;
+
+  final IconThemeData? iconTheme;
+
+  final IconThemeData? actionsIconTheme;
+
+  final TextTheme? textTheme;
+
+  final bool primary;
+
+  final bool? centerTitle;
+
+  final double titleSpacing;
+
+  final double toolbarOpacity;
+
+  final double bottomOpacity;
+
+  @override
+  final Size preferredSize;
+
+  final bool searchBar;
+
+  final String searchHintText;
+
+  final TextStyle searchHintStyle;
+
+  final TextStyle searchTextStyle;
+
+  final Color searchBarColorTheme;
+
+  final ValueChanged<String>? onChanged;
+
+  final ValueChanged<String>? onSubmitted;
+
+  final TextEditingController? searchController;
+
+  final GestureTapCallback? onTap;
+
+  bool _getEffectiveCenterTitle(ThemeData theme) {
+    if (centerTitle != null) {
+      return centerTitle!;
+    }
+    switch (theme.platform) {
+      case TargetPlatform.android:
+      case TargetPlatform.fuchsia:
+        return false;
+      case TargetPlatform.iOS:
+        return actions == null || actions!.length < 2;
+      default:
+        return false;
+    }
+  }
+
+  @override
+  _LLSAppBarState createState() => _LLSAppBarState();
+}
+
+class _LLSAppBarState extends State<LLSAppBar> {
+  static const double _defaultElevation = 4;
+  Widget? searchBar;
+  bool showSearchBar = false;
+  final TextEditingController _searchController = TextEditingController();
+
+  void _handleDrawerButton() {
+    Scaffold.of(context).openDrawer();
+  }
+
+  void _handleDrawerButtonEnd() {
+    Scaffold.of(context).openEndDrawer();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    assert(!widget.primary || debugCheckHasMediaQuery(context));
+    assert(debugCheckHasMaterialLocalizations(context));
+    final ThemeData theme = Theme.of(context);
+    final AppBarTheme appBarTheme = AppBarTheme.of(context);
+    final ScaffoldState scaffold = Scaffold.of(context);
+    final ModalRoute<dynamic>? parentRoute = ModalRoute.of(context);
+    final bool hasDrawer = scaffold.hasDrawer;
+    final bool hasEndDrawer = scaffold.hasEndDrawer;
+    final bool canPop = parentRoute?.canPop ?? false;
+    final bool useCloseButton =
+        parentRoute is PageRoute<dynamic> && parentRoute.fullscreenDialog;
+
+    IconThemeData overallIconTheme =
+        widget.iconTheme ?? appBarTheme.iconTheme ?? theme.primaryIconTheme;
+    IconThemeData actionsIconTheme = widget.actionsIconTheme ??
+        appBarTheme.actionsIconTheme ??
+        overallIconTheme;
+    TextStyle? centerStyle = widget.textTheme?.headline5 ??
+        appBarTheme.textTheme?.headline5 ??
+        theme.primaryTextTheme.headline5;
+    TextStyle? sideStyle = widget.textTheme?.bodyText1 ??
+        appBarTheme.textTheme?.bodyText1 ??
+        theme.primaryTextTheme.bodyText1;
+
+    if (widget.toolbarOpacity != 1.0) {
+      final double opacity = const Interval(
+        0.25,
+        1,
+        curve: Curves.fastOutSlowIn,
+      ).transform(widget.toolbarOpacity);
+      if (centerStyle?.color != null) {
+        centerStyle = centerStyle!.copyWith(
+          color: centerStyle.color!.withOpacity(opacity),
+        );
+      }
+      if (sideStyle?.color != null) {
+        sideStyle = sideStyle!.copyWith(
+          color: sideStyle.color!.withOpacity(opacity),
+        );
+      }
+      overallIconTheme = overallIconTheme.copyWith(
+        opacity: opacity * (overallIconTheme.opacity ?? 1.0),
+      );
+      actionsIconTheme = actionsIconTheme.copyWith(
+        opacity: opacity * (actionsIconTheme.opacity ?? 1.0),
+      );
+    }
+
+    Widget? leading = widget.leading;
+    if (leading == null && widget.automaticallyImplyLeading) {
+      if (hasDrawer) {
+        leading = IconButton(
+          icon: const Icon(Icons.menu),
+          onPressed: _handleDrawerButton,
+          tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
+        );
+      } else {
+        if (canPop) {
+          leading = useCloseButton ? const CloseButton() : const BackButton();
+        }
+      }
+    }
+    if (leading != null) {
+      leading = ConstrainedBox(
+        constraints: const BoxConstraints.tightFor(width: _kLeadingWidth),
+        child: leading,
+      );
+    }
+
+    Widget? title = widget.title;
+    if (title != null && centerStyle != null) {
+      bool? namesRoute;
+      switch (theme.platform) {
+        case TargetPlatform.android:
+        case TargetPlatform.fuchsia:
+          namesRoute = true;
+          break;
+        case TargetPlatform.iOS:
+          break;
+        default:
+          break;
+      }
+      title = DefaultTextStyle(
+        style: centerStyle,
+        softWrap: false,
+        overflow: TextOverflow.ellipsis,
+        child: Semantics(
+          namesRoute: namesRoute,
+          child: LLSAppBarTitleBar(child: title),
+          header: true,
+        ),
+      );
+    }
+
+    Widget? actions;
+    if (widget.actions != null && widget.actions!.isNotEmpty) {
+      actions = Row(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: widget.actions!,
+      );
+    } else if (hasEndDrawer) {
+      actions = IconButton(
+        icon: const Icon(Icons.menu),
+        onPressed: _handleDrawerButtonEnd,
+        tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
+      );
+    }
+
+    // Allow the actions actions to have their own theme if necessary.
+    if (actions != null) {
+      actions = IconTheme.merge(
+        data: actionsIconTheme,
+        child: actions,
+      );
+    }
+
+    if (showSearchBar) {
+      searchBar = TextField(
+        cursorColor: widget.searchBarColorTheme,
+        style: widget.searchTextStyle,
+        decoration: InputDecoration(
+          prefixIcon: Icon(
+            Icons.search,
+            color: widget.searchBarColorTheme,
+            size: 18,
+          ),
+          suffixIcon: LLSIconButton(
+            icon: Icon(
+              Icons.close,
+              color: widget.searchBarColorTheme,
+              size: 20,
+            ),
+            type: LLSButtonType.transparent,
+            onPressed: () {
+              setState(() {
+                showSearchBar = !showSearchBar;
+              });
+            },
+          ),
+          hintText: widget.searchHintText,
+          hintStyle: widget.searchHintStyle,
+          focusedBorder: UnderlineInputBorder(
+            borderSide: BorderSide(
+              width: 1,
+              color: widget.searchBarColorTheme,
+            ),
+          ),
+        ),
+        onTap: widget.onTap,
+        onChanged: widget.onChanged,
+        controller: widget.searchController ?? _searchController,
+        onSubmitted: widget.onSubmitted,
+      );
+    }
+
+    if (!showSearchBar) {
+      searchBar = ListTile(
+        contentPadding: EdgeInsets.zero,
+        title: title,
+        trailing: LLSIconButton(
+          icon: Icon(
+            Icons.search,
+            color: widget.searchBarColorTheme,
+            size: 20,
+          ),
+          type: LLSButtonType.transparent,
+          onPressed: () {
+            setState(() {
+              showSearchBar = true;
+            });
+          },
+        ),
+      );
+    }
+
+    final Widget toolbar = NavigationToolbar(
+      leading: leading,
+      middle: widget.searchBar ? searchBar : title,
+      trailing: actions,
+      centerMiddle: widget._getEffectiveCenterTitle(theme),
+      middleSpacing: widget.titleSpacing,
+    );
+
+    Widget appBar = ClipRect(
+      child: CustomSingleChildLayout(
+        delegate: const _ToolbarContainerLayout(),
+        child: IconTheme.merge(
+          data: overallIconTheme,
+          child: DefaultTextStyle(
+            style: sideStyle!,
+            child: toolbar,
+          ),
+        ),
+      ),
+    );
+    if (widget.bottom != null) {
+      appBar = Column(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: <Widget>[
+          Flexible(
+            child: ConstrainedBox(
+              constraints: const BoxConstraints(maxHeight: kToolbarHeight),
+              child: appBar,
+            ),
+          ),
+          Opacity(
+            opacity: const Interval(
+              0.25,
+              1,
+              curve: Curves.fastOutSlowIn,
+            ).transform(widget.bottomOpacity),
+            child: widget.bottom,
+          ),
+        ],
+      );
+    }
+
+    // The padding applies to the toolbar and tabBar, not the flexible space.
+    if (widget.primary) {
+      appBar = SafeArea(
+        top: true,
+        child: appBar,
+      );
+    }
+
+    appBar = Align(
+      alignment: Alignment.topCenter,
+      child: appBar,
+    );
+
+    if (widget.flexibleSpace != null) {
+      appBar = Stack(
+        fit: StackFit.passthrough,
+        children: <Widget>[
+          widget.flexibleSpace!,
+          appBar,
+        ],
+      );
+    }
+
+    final Brightness brightness = widget.brightness ??
+        appBarTheme.brightness ??
+        theme.primaryColorBrightness;
+    final SystemUiOverlayStyle overlayStyle = brightness == Brightness.dark
+        ? SystemUiOverlayStyle.light
+        : SystemUiOverlayStyle.dark;
+
+    return Semantics(
+      container: true,
+      child: AnnotatedRegion<SystemUiOverlayStyle>(
+        value: overlayStyle,
+        child: Material(
+          color:
+              widget.backgroundColor ?? appBarTheme.color ?? theme.primaryColor,
+          elevation:
+              widget.elevation ?? appBarTheme.elevation ?? _defaultElevation,
+          shape: widget.shape,
+          child: Semantics(
+            explicitChildNodes: true,
+            child: appBar,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+const double _kLeadingWidth = kToolbarHeight;
+
+class _ToolbarContainerLayout extends SingleChildLayoutDelegate {
+  const _ToolbarContainerLayout();
+
+  @override
+  BoxConstraints getConstraintsForChild(BoxConstraints constraints) =>
+      constraints.tighten(
+        height: kToolbarHeight,
+      );
+
+  @override
+  Size getSize(BoxConstraints constraints) => Size(
+        constraints.maxWidth,
+        kToolbarHeight,
+      );
+
+  @override
+  Offset getPositionForChild(Size size, Size childSize) =>
+      Offset(0, size.height - childSize.height);
+
+  @override
+  bool shouldRelayout(_ToolbarContainerLayout oldDelegate) => false;
+}
+
+class LLSAppBarTitleBar extends SingleChildRenderObjectWidget {
+  const LLSAppBarTitleBar({Key? key, required Widget child})
+      : super(key: key, child: child);
+
+  @override
+  RenderLLSAppBarTitleBar createRenderObject(BuildContext context) =>
+      RenderLLSAppBarTitleBar(
+        textDirection: Directionality.of(context),
+      );
+
+  @override
+  void updateRenderObject(
+      BuildContext context, RenderLLSAppBarTitleBar renderObject) {
+    renderObject.textDirection = Directionality.of(context);
+  }
+}
+
+class RenderLLSAppBarTitleBar extends RenderAligningShiftedBox {
+  RenderLLSAppBarTitleBar({
+    RenderBox? child,
+    TextDirection? textDirection,
+  }) : super(
+          child: child,
+          alignment: Alignment.center,
+          textDirection: textDirection,
+        );
+
+  @override
+  void performLayout() {
+    final BoxConstraints innerConstraints =
+        constraints.copyWith(maxHeight: double.infinity);
+    child?.layout(
+      innerConstraints,
+      parentUsesSize: true,
+    );
+    if (child != null) {
+      size = constraints.constrain(child!.size);
+    }
+    alignChild();
+  }
+}
\ No newline at end of file

lib/src/components/avatar/lls_avatar.dart

+import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
+import 'package:llswidget/llswidget.dart';
+
+class LLSAvatar extends StatelessWidget {
+  const LLSAvatar(
+      {Key? key,
+      this.child,
+      this.backgroundColor,
+      this.backgroundImage,
+      this.foregroundColor,
+      this.radius,
+      this.minRadius,
+      this.maxRadius,
+      this.borderRadius,
+      this.shape = LLSAvatarShape.circle,
+      this.size = LLSSize.MEDIUM})
+      : assert(radius == null || (minRadius == null && maxRadius == null)),
+        super(key: key);
+
+  final Widget? child;
+
+  final Color? backgroundColor;
+
+  final Color? foregroundColor;
+
+  final ImageProvider? backgroundImage;
+
+  final double? radius;
+
+  final double? minRadius;
+
+  final double? maxRadius;
+
+  final double size;
+
+  final LLSAvatarShape shape;
+
+  final BorderRadius? borderRadius;
+
+  double get _minDiameter {
+    if (radius == null && minRadius == null && maxRadius == null) {
+      return 1.5 * size;
+    } else {
+      return 2.0 * (radius ?? minRadius ?? 0);
+    }
+  }
+
+  double get _maxDiameter {
+    if (radius == null && minRadius == null && maxRadius == null) {
+      return 1.5 * size;
+    } else {
+      return 2.0 * (radius ?? maxRadius ?? 0);
+    }
+  }
+
+  BoxShape get _avatarShape {
+    if (shape == LLSAvatarShape.circle) {
+      return BoxShape.circle;
+    } else if (shape == LLSAvatarShape.square) {
+      return BoxShape.rectangle;
+    } else if (shape == LLSAvatarShape.rounded) {
+      return BoxShape.rectangle;
+    } else {
+      return BoxShape.rectangle;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final Color? backgroundColor = this.backgroundColor;
+    final Color? foregroundColor = this.foregroundColor;
+    assert(debugCheckHasMediaQuery(context));
+    final ThemeData theme = Theme.of(context);
+    TextStyle? textStyle = theme.primaryTextTheme.subtitle1?.copyWith(
+      color: foregroundColor,
+    );
+    Color? effectiveBackgroundColor = backgroundColor;
+
+    if (effectiveBackgroundColor == null && textStyle?.color != null) {
+      switch (ThemeData.estimateBrightnessForColor(textStyle!.color!)) {
+        case Brightness.dark:
+          effectiveBackgroundColor = theme.primaryColorLight;
+          break;
+        case Brightness.light:
+          effectiveBackgroundColor = theme.primaryColorDark;
+          break;
+      }
+    } else if (foregroundColor == null && textStyle != null) {
+      switch (ThemeData.estimateBrightnessForColor(backgroundColor!)) {
+        case Brightness.dark:
+          textStyle = textStyle.copyWith(color: theme.primaryColorLight);
+          break;
+        case Brightness.light:
+          textStyle = textStyle.copyWith(color: theme.primaryColorDark);
+          break;
+      }
+    }
+    final double minDiameter = _minDiameter;
+    final double maxDiameter = _maxDiameter;
+    return AnimatedContainer(
+      constraints: BoxConstraints(
+        minHeight: minDiameter,
+        minWidth: minDiameter,
+        maxWidth: maxDiameter,
+        maxHeight: maxDiameter,
+      ),
+      duration: kThemeChangeDuration,
+      decoration: BoxDecoration(
+        color: effectiveBackgroundColor,
+        image: backgroundImage != null
+          ? DecorationImage(
+              image: backgroundImage!,
+              fit: BoxFit.cover,
+            )
+          : null,
+        shape: _avatarShape,
+        borderRadius: shape == LLSAvatarShape.rounded && borderRadius == null
+          ? BorderRadius.circular(10)
+          : borderRadius,
+      ),
+      child: child == null && textStyle != null
+        ? null
+        : Center(
+            child: MediaQuery(
+              data: MediaQuery.of(context).copyWith(textScaleFactor: 1),
+              child: IconTheme(
+                data: theme.iconTheme.copyWith(color: textStyle?.color),
+                child: DefaultTextStyle(
+                  style: textStyle!,
+                  child: child!,
+                ),
+              ),
+            ),
+          ),
+    );
+  }
+}
\ No newline at end of file

lib/src/shape/lls_avatar_shape.dart → lib/src/components/avatar/shape/lls_avatar_shape.dart

 enum LLSAvatarShape {
   circle,
-  standard,
+  rounded,
   square,
 }
\ No newline at end of file

lib/src/components/badge/lls_badge.dart

+import 'package:flutter/material.dart';
+import 'package:llswidget/llswidget.dart';
+
+class LLSBadge extends StatefulWidget {
+  /// Create badges of all types, check out [LLSButtonBadge] for button badges and [LLSIconBadge] for icon type badges
+  const LLSBadge({
+    Key? key,
+    this.textStyle,
+    this.borderShape,
+    this.shape = LLSBadgeShape.standard,
+    this.color = LLSColors.DANGER,
+    this.textColor = LLSColors.WHITE,
+    this.size = LLSSize.SMALL,
+    this.border,
+    this.text,
+    this.child,
+  }) : super(key: key);
+
+  final BorderSide? border;
+  
+  final ShapeBorder? borderShape;
+
+  final LLSBadgeShape shape;
+
+  final Color color;
+
+  final double size;
+
+  final Widget? child;
+
+  final String? text;
+
+  final TextStyle? textStyle;
+
+  final Color textColor;
+
+  @override
+  _LLSBadgeState createState() => _LLSBadgeState();
+}
+
+class _LLSBadgeState extends State<LLSBadge> {
+  late Color color;
+  late Color textColor;
+  Widget? child;
+  LLSBadgeShape? counterShape;
+  late double size;
+  double? height;
+  double? width;
+  double? fontSize;
+
+  @override
+  void initState() {
+    color = widget.color;
+    textColor = widget.textColor;
+    child = widget.text != null ? Text(widget.text ?? '') : widget.child;
+    counterShape = widget.shape;
+    size = widget.size;
+    super.initState();
+  }
+
+  @override
+  void didUpdateWidget(LLSBadge oldWidget) {
+    color = widget.color;
+    textColor = widget.textColor;
+    child = widget.text != null ? Text(widget.text ?? '') : widget.child;
+    counterShape = widget.shape;
+    size = widget.size;
+    super.didUpdateWidget(oldWidget);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final BorderSide shapeBorder = widget.border != null
+        ? widget.border!
+        : BorderSide(
+            color: color,
+            width: 0,
+          );
+
+    ShapeBorder shape;
+
+    if (counterShape == LLSBadgeShape.pills) {
+      shape = RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(50),
+        side: shapeBorder,
+      );
+    } else if (counterShape == LLSBadgeShape.square) {
+      shape = RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(0),
+        side: shapeBorder,
+      );
+    } else if (counterShape == LLSBadgeShape.standard) {
+      shape = RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(5),
+        side: shapeBorder,
+      );
+    } else if (counterShape == LLSBadgeShape.circle) {
+      shape = RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(100),
+        side: shapeBorder,
+      );
+    } else {
+      shape = RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(5),
+        side: shapeBorder,
+      );
+    }
+
+    if (widget.size == LLSSize.SMALL) {
+      height = size * 0.56;
+      width = size * 0.73;
+      fontSize = size * 0.31;
+    } else if (widget.size == LLSSize.MEDIUM) {
+      height = size * 0.58;
+      width = size * 0.76;
+      fontSize = size * 0.34;
+    } else if (widget.size == LLSSize.LARGE) {
+      height = size * 0.6;
+      width = size * 0.79;
+      fontSize = size * 0.37;
+    } else {
+      height = size * 0.58;
+      width = size * 0.76;
+      fontSize = size * 0.34;
+    }
+
+    return Container(
+      height: height,
+      width: counterShape == LLSBadgeShape.circle ? height : width,
+      child: Material(
+        textStyle: TextStyle(
+          color: textColor,
+          fontSize: fontSize,
+        ),
+        shape: widget.borderShape ?? shape,
+        color: color,
+        type: MaterialType.button,
+        child: Container(
+          child: Center(
+            widthFactor: 1,
+            heightFactor: 1,
+            child: child,
+          ),
+        ),
+      ),
+    );
+  }
+}
\ No newline at end of file

lib/src/components/badge/lls_button_badge.dart

+import 'package:flutter/foundation.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
+import 'package:llswidget/llswidget.dart';
+
+class LLSButtonBadge extends StatefulWidget {
+  
+  const LLSButtonBadge({
+    Key? key,
+    required this.onPressed,
+    this.onHighlightChanged,
+    this.textStyle,
+    this.boxShadow,
+    this.badgeBoxShadow,
+    this.focusColor,
+    this.hoverColor,
+    this.highlightColor,
+    this.splashColor,
+    this.elevation = 0.0,
+    this.focusElevation = 4.0,
+    this.hoverElevation = 4.0,
+    this.highlightElevation = 1.0,
+    this.disabledElevation = 0.0,
+    this.padding = const EdgeInsets.symmetric(horizontal: 8),
+    this.constraints,
+    this.borderShape,
+    this.animationDuration = kThemeChangeDuration,
+    this.clipBehavior = Clip.none,
+    this.focusNode,
+    this.autofocus = false,
+    MaterialTapTargetSize? materialTapTargetSize,
+    this.type = LLSButtonType.solid,
+    this.shape = LLSButtonShape.standard,
+    this.color = LLSColors.PRIMARY,
+    this.textColor,
+    this.position = LLSPosition.end,
+    this.size = LLSSize.MEDIUM,
+    this.borderSide,
+    this.text,
+    this.blockButton,
+    this.fullWidthButton,
+    this.colorScheme,
+    this.enableFeedback,
+    this.onLongPress,
+    this.disabledColor,
+    this.disabledTextColor,
+    this.icon,
+  })  : materialTapTargetSize =
+            materialTapTargetSize ?? MaterialTapTargetSize.padded,
+        assert(focusElevation >= 0.0),
+        assert(hoverElevation >= 0.0),
+        assert(highlightElevation >= 0.0),
+        assert(disabledElevation >= 0.0),
+        super(
+          key: key,
+        );
+
+  final VoidCallback? onPressed;
+
+  final ValueChanged<bool>? onHighlightChanged;
+
+  final TextStyle? textStyle;
+
+  final BorderSide? borderSide;
+
+  final BoxShadow? boxShadow;
+
+  final Color? focusColor;
+
+  final Color? hoverColor;
+
+  final Color? highlightColor;
+
+  final Color? splashColor;
+
+  final double elevation;
+
+  final double hoverElevation;
+
+  final double focusElevation;
+
+  final double highlightElevation;
+
+  final double disabledElevation;
+
+  final EdgeInsetsGeometry padding;
+
+  final BoxConstraints? constraints;
+
+  final ShapeBorder? borderShape;
+
+  final Duration animationDuration;
+
+  bool get enabled => onPressed != null;
+
+  final MaterialTapTargetSize materialTapTargetSize;
+
+  final FocusNode? focusNode;
+
+  final bool autofocus;
+
+  final Clip clipBehavior;
+
+  final LLSButtonType type;
+
+  final LLSButtonShape shape;
+
+  final Color color;
+
+  final Color? disabledColor;
+
+  final Color? textColor;
+
+  final Color? disabledTextColor;
+
+  final double size;
+
+  final String? text;
+
+  final LLSPosition position;
+
+  final bool? blockButton;
+
+  final bool? fullWidthButton;
+
+  final bool? badgeBoxShadow;
+
+  final ColorScheme? colorScheme;
+
+  final bool? enableFeedback;
+
+  final VoidCallback? onLongPress;
+
+  final Widget? icon;
+
+  @override
+  _LLSButtonBadgeState createState() => _LLSButtonBadgeState();
+}
+
+class _LLSButtonBadgeState extends State<LLSButtonBadge> {
+  @override
+  Widget build(BuildContext context) => ConstrainedBox(
+      constraints: const BoxConstraints(
+        minHeight: 26,
+        minWidth: 98,
+      ),
+      child: Container(
+        height: widget.size,
+        child: LLSButton(
+          onPressed: widget.onPressed,
+          onHighlightChanged: widget.onHighlightChanged,
+          textStyle: widget.textStyle,
+          boxShadow: widget.boxShadow,
+          buttonBoxShadow: widget.badgeBoxShadow,
+          focusColor: widget.focusColor,
+          hoverColor: widget.hoverColor,
+          highlightColor: widget.highlightColor,
+          splashColor: widget.splashColor,
+          elevation: widget.elevation,
+          focusElevation: widget.focusElevation,
+          hoverElevation: widget.hoverElevation,
+          highlightElevation: widget.highlightElevation,
+          disabledElevation: widget.disabledElevation,
+          constraints: widget.constraints,
+          borderShape: widget.borderShape,
+          animationDuration: widget.animationDuration,
+          clipBehavior: widget.clipBehavior,
+          focusNode: widget.focusNode,
+          autofocus: widget.autofocus,
+          type: widget.type,
+          shape: widget.shape,
+          color: widget.color,
+          textColor: widget.textColor,
+          position: widget.position,
+          size: widget.size,
+          borderSide: widget.borderSide,
+          text: widget.text,
+          icon: widget.icon,
+          blockButton: widget.blockButton,
+          fullWidthButton: widget.fullWidthButton,
+          disabledColor: widget.disabledTextColor,
+          disabledTextColor: widget.disabledColor,
+        ),
+      ),
+    );
+}
\ No newline at end of file

lib/src/components/badge/lls_icon_badge.dart

+import 'package:flutter/material.dart';
+
+class LLSIconBadge extends StatefulWidget {
+  const LLSIconBadge({
+    Key? key,
+    this.padding = const EdgeInsets.symmetric(horizontal: 8),
+    required this.child,
+    required this.counterChild,
+    this.right = 0
+  }) : super(key: key);
+
+  final Widget child;
+
+  final Widget counterChild;
+
+  final EdgeInsetsGeometry padding;
+
+  final double right;
+
+  @override
+  _LLSIconBadgeState createState() => _LLSIconBadgeState();
+}
+
+class _LLSIconBadgeState extends State<LLSIconBadge> {
+  @override
+  Widget build(BuildContext context) => Container(
+      padding: widget.padding,
+      child: Stack(
+        children: <Widget>[
+          widget.child,
+          Positioned(
+            right: widget.right,
+            child: widget.counterChild,
+          ),
+        ],
+      ),
+    );
+}
\ No newline at end of file

lib/src/types/lls_alert_type.dart

-enum LLSAlertType {
-  basic,
-  rounded,
-  fullWidth,
-}
\ No newline at end of file

pubspec.yaml

 name: llswidget
 description: A Flutter UI Components package.
-version: 0.0.1
+version: 0.0.2
 author: Rizal Hermawan
 homepage: https://locatorlogic.com