Icon Button component reviewed

Author: Sandip Kakadiya

lib/components/avatar/gf_avatar.dart

@@ -2,16 +2,17 @@ import 'package:flutter/widgets.dart';
 import 'package:flutter/material.dart';
 import 'package:ui_kit/shape/gf_avatar_shape.dart';
 import 'package:ui_kit/size/gf_size.dart';
+import 'package:ui_kit/colors/gf_color.dart';
 
 class GFAvatar extends StatelessWidget {
   /// Typically a [Text] widget. If the [CircleAvatar] is to have an image, use [backgroundImage] instead.
   final Widget child;
 
-  /// The color with which to fill the circle.
-  final Color backgroundColor;
+  /// use [Color] or [GFColor]. The color with which to fill the circle.
+  final dynamic backgroundColor;
 
-  /// The default text color for text in the circle.
-  final Color foregroundColor;
+  /// use [Color] or [GFColor]. The default text color for text in the circle.
+  final dynamic foregroundColor;
 
   /// The background image of the circle.
   final ImageProvider backgroundImage;
@@ -26,29 +27,19 @@ class GFAvatar extends StatelessWidget {
   final double maxRadius;
 
   /// size of avatar like [double] or [GFSize] i.e, 1.2, small, medium, large etc.
-  final GFSize size;
+  final dynamic size;
 
-  /// shape of avatar [GFAvatarShape] i.e, standard, pills, square
+  /// shape of avatar [GFAvatarShape] i.e, standard, circle, square
   final GFAvatarShape shape;
 
   /// border radius to give extra radius for avatar square or standard shape
+  /// Not applicable to circleshape
   final BorderRadius borderRadius;
 
-  // The default radius if nothing is specified.
-  static const double _defaultRadius = 20.0;
-
-  // The default radius if avater size GFSize.small selected.
-  static const double _smallRadius = 16.0;
-
-  // The default radius if avater size GFSize.large selected.
-  static const double _largeRadius = 28.0;
-
-  // The default min if only the max is specified.
-  static const double _defaultMinRadius = 0.0;
-
-  // The default max if only the min is specified.
-  static const double _defaultMaxRadius = double.infinity;
+  // /// The default max if only the min is specified.
+  // static const double _defaultMaxRadius = double.infinity;
 
+  /// Create Avatar of all types i,e, square, circle, standard with different sizes.
   const GFAvatar(
       {Key key,
       this.child,
@@ -66,33 +57,17 @@ class GFAvatar extends StatelessWidget {
 
   double get _minDiameter {
     if (radius == null && minRadius == null && maxRadius == null) {
-      if (size == GFSize.medium) {
-        return _defaultRadius * 2.0;
-      } else if (size == GFSize.small) {
-        return _smallRadius * 2.0;
-      } else if (size == GFSize.large) {
-        return _largeRadius * 2.0;
-      } else {
-        return _defaultRadius * 2.0;
-      }
+      return getGFSize(size);
     } else {
-      return 2.0 * (radius ?? minRadius ?? _defaultMinRadius);
+      return 2.0 * (radius ?? minRadius ?? 0);
     }
   }
 
   double get _maxDiameter {
     if (radius == null && minRadius == null && maxRadius == null) {
-      if (size == GFSize.medium) {
-        return _defaultRadius * 2.0;
-      } else if (size == GFSize.small) {
-        return _smallRadius * 2.0;
-      } else if (size == GFSize.large) {
-        return _largeRadius * 2.0;
-      } else {
-        return _defaultRadius * 2.0;
-      }
+      return getGFSize(size);
     } else {
-      return 2.0 * (radius ?? maxRadius ?? _defaultMaxRadius);
+      return 2.0 * (radius ?? maxRadius ?? 0);
     }
   }
 
@@ -110,6 +85,8 @@ class GFAvatar extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    Color backgroundColor = getGFColor(this.backgroundColor);
+    Color foregroundColor = getGFColor(this.foregroundColor);
     assert(debugCheckHasMediaQuery(context));
     final ThemeData theme = Theme.of(context);
     TextStyle textStyle =

lib/components/badge/gf_badge.dart

@@ -19,26 +19,26 @@ class GFBadge extends StatefulWidget {
   /// size of [double] or [GFSize] i.e, 1.2, small, medium, large etc.
   final GFSize size;
 
-  /// text of type [String] is alternative to child. text will get priority over child
+  /// child of type [Widget] is alternative to child. text will get priority over child
   final Widget child;
 
   /// text of type [String] is alternative to child. text will get priority over child
   final String text;
 
-  /// text style of counter text
+  /// text style of counter text.
   final TextStyle textStyle;
 
   /// Pass [GFColor] or [Color]
   final dynamic textColor;
 
-  /// Create badges of all types, check out [GFButtonBadge] for button badges and [GFIconBadge] for icon badges
+  /// Create badges of all types, check out [GFButtonBadge] for button badges and [GFIconBadge] for icon type badges
   const GFBadge({
     Key key,
     this.textStyle,
     this.borderShape,
     this.shape = GFBadgeShape.standard,
-    this.color = GFColor.secondary,
-    this.textColor = GFColor.dark,
+    this.color = GFColor.danger,
+    this.textColor = GFColor.white,
     this.size = GFSize.medium,
     this.border,
     this.text,
@@ -64,7 +64,7 @@ class _GFBadgeState extends State<GFBadge> {
   void initState() {
     this.color = getGFColor(widget.color);
     this.textColor = getGFColor(widget.textColor);
-    this.child = widget.child == null ? Text(widget.text) : widget.child;
+    this.child = widget.text != null ? Text(widget.text ?? '') : widget.child;
     this.counterShape = widget.shape;
     this.size = widget.size;
     super.initState();
@@ -99,26 +99,28 @@ class _GFBadgeState extends State<GFBadge> {
     }
 
     if (this.size == GFSize.small) {
-      this.height = 18.0;
-      this.width = 24.0;
-      this.fontSize = 10.0;
+      this.height = getGFSize(this.size) * 0.56;
+      this.width = getGFSize(this.size) * 0.75;
+      this.fontSize = getGFSize(this.size) * 0.31;
     } else if (this.size == GFSize.medium) {
-      this.height = 20.0;
-      this.width = 26.0;
+      this.height = getGFSize(this.size) * 0.5;
+      this.width = getGFSize(this.size) * 0.65;
+      this.fontSize = getGFSize(this.size) * 0.3;
       this.fontSize = 12.0;
     } else if (this.size == GFSize.large) {
-      this.height = 24.0;
-      this.width = 30.0;
-      this.fontSize = 12.0;
+      this.height = getGFSize(this.size) * 0.428;
+      this.width = getGFSize(this.size) * 0.535;
+      this.fontSize = getGFSize(this.size) * 0.214;
     } else {
-      this.height = 20.0;
-      this.width = 26.0;
-      this.fontSize = 12.0;
+      this.height = getGFSize(this.size) * 0.56;
+      this.width = getGFSize(this.size) * 0.75;
+      this.fontSize = getGFSize(this.size) * 0.31;
     }
 
     return Container(
       height: this.height,
-      width: this.counterShape == GFBadgeShape.circle ? this.height : this.width,
+      width:
+          this.counterShape == GFBadgeShape.circle ? this.height : this.width,
       child: Material(
         textStyle: this.textColor != null
             ? TextStyle(color: this.textColor, fontSize: this.fontSize)

lib/components/badge/gf_button_badge.dart

@@ -1,8 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:ui_kit/shape/gf_badge_shape.dart';
-import 'package:ui_kit/shape/gf_badge_shape.dart';
-import 'package:ui_kit/shape/gf_badge_shape.dart';
-import 'package:ui_kit/shape/gf_badge_shape.dart';
 import 'package:ui_kit/shape/gf_button_shape.dart';
 import 'package:ui_kit/size/gf_size.dart';
 import 'package:ui_kit/types/gf_type.dart';
@@ -29,7 +26,7 @@ class GFButtonBadge extends StatefulWidget {
   /// Badge type of [GFType] i.e, solid, outline, transparent
   final GFType type;
 
-  /// Badge type of [GFBadgeShape] i.e, standard, pills, square
+  /// Badge type of [GFBadgeShape] i.e, standard, pills, square, circle
   final GFButtonShape shape;
 
   /// Pass [GFColor] or [Color]
@@ -41,10 +38,11 @@ class GFButtonBadge extends StatefulWidget {
   /// size of [double] or [GFSize] i.e, 1.2, small, medium, large etc.
   final dynamic size;
 
-  /// text of type [String] is alternative to child. text will get priority over child
+  /// text of type [String] is used to display text on the button.
   final String text;
 
-  /// text of type [String] is alternative to child. text will get priority over child
+  /// child of type [Widget] is alternative to child. text will get priority over child.
+  /// You can use [GFBadge] for compatibility.
   final Widget counterChild;
 
   /// icon type of [GFPosition] i.e, start, end
@@ -88,7 +86,11 @@ class _GFButtonBadgeState extends State<GFButtonBadge> {
   @override
   void initState() {
     this.color = getGFColor(widget.color);
-    this.textColor =  widget.type == GFType.outline && widget.textColor == null ? this.color : widget.textColor == null ? getGFColor(GFColor.dark) : getGFColor(widget.textColor);
+    this.textColor = (widget.type == GFType.outline && widget.textColor == null)
+        ? this.color
+        : widget.textColor == null
+            ? getGFColor(GFColor.dark)
+            : getGFColor(widget.textColor);
     this.onPressed = widget.onPressed;
     this.type = widget.type;
     this.shape = widget.shape;
@@ -104,19 +106,19 @@ class _GFButtonBadgeState extends State<GFButtonBadge> {
       child: Container(
         height: this.size,
         child: GFButton(
-            textStyle: widget.textStyle,
-            borderSide: widget.borderSide,
-            color: this.color,
-            textColor: this.textColor,
-            text: widget.text,
-            onPressed: this.onPressed,
-            type: this.type,
-            shape: this.shape,
-            position: this.position,
-            size: this.size,
-            borderShape: widget.borderShape,
-            icon: widget.counterChild
-            ),
+          textStyle: widget.textStyle,
+          borderSide: widget.borderSide,
+          color: this.color,
+          textColor: this.textColor,
+          text: widget.text,
+          onPressed: this.onPressed,
+          type: this.type,
+          shape: this.shape,
+          position: this.position,
+          size: this.size,
+          borderShape: widget.borderShape,
+          icon: widget.counterChild,
+        ),
       ),
     );
   }

lib/components/badge/gf_icon_badge.dart

@@ -1,23 +1,23 @@
 import 'package:flutter/material.dart';
-import 'package:ui_kit/shape/gf_badge_shape.dart';
-import 'package:ui_kit/types/gf_type.dart';
-import 'package:ui_kit/position/gf_position.dart';
+import 'package:ui_kit/components/button/gf_icon_button.dart';
 
-class GFIconBadges extends StatefulWidget {
+class GFIconBadge extends StatefulWidget {
   /// Called when the badge is tapped or otherwise activated.
   final VoidCallback onPressed;
 
-  /// text of type [String] is alternative to child. text will get priority over child
-  final Widget child;
+  /// child of type [GFIconButton] is used to show icon.
+  /// Use [Icon] widget for compatibility.
+  final GFIconButton child;
 
-  /// text of type [String] is alternative to child. text will get priority over child
+  /// widget of type [Widget] is used to show counter to the top right corner of child.
+  /// You can use [GFBadge] for compatibility.
   final Widget counterChild;
 
   /// The internal padding for the badge's [child].
   final EdgeInsetsGeometry padding;
 
   /// Create badges of all types, check out [GFBadge] for button badges and [GFIconBadge] for icon badges.
-  const GFIconBadges({
+  const GFIconBadge({
     Key key,
     @required this.onPressed,
     this.padding = const EdgeInsets.symmetric(horizontal: 8.0),
@@ -27,19 +27,10 @@ class GFIconBadges extends StatefulWidget {
         super(key: key);
 
   @override
-  _GFIconBadgesState createState() => _GFIconBadgesState();
+  _GFIconBadgeState createState() => _GFIconBadgeState();
 }
 
-class _GFIconBadgesState extends State<GFIconBadges> {
-  Color badgeColor, counterColor;
-  Color textColor;
-  Widget child;
-  Widget icon;
-  Function onPressed;
-  GFType type;
-  GFBadgeShape shape;
-  GFPosition position;
-
+class _GFIconBadgeState extends State<GFIconBadge> {
   @override
   void initState() {
     super.initState();
@@ -50,13 +41,14 @@ class _GFIconBadgesState extends State<GFIconBadges> {
     return Container(
       height: 60.0,
       width: 60.0,
+      padding: widget.padding,
       child: Stack(
         children: <Widget>[
-          widget.child,
+          widget.child ?? Container(),
           new Positioned(
             top: 2,
             left: 22,
-            child: widget.counterChild,
+            child: widget.counterChild ?? Container(),
           ),
         ],
       ),