From caac79b270b8002bd165d5ca8a7df4dfb2719d63 Mon Sep 17 00:00:00 2001 From: Sandip Kakadiya Date: Fri, 20 Dec 2019 16:26:26 +0530 Subject: [PATCH] reviewed work done --- lib/colors/{color.dart => gf_color.dart} | 0 lib/components/avatar/gf_avatar.dart | 103 ++++--- lib/components/badge/gf_badge.dart | 69 +++-- lib/components/badge/gf_button_badge.dart | 37 ++- lib/components/badge/gf_icon_badge.dart | 14 +- lib/components/button/gf_button.dart | 303 +++++++++++--------- lib/components/button/gf_icon_button.dart | 174 ++++++----- lib/components/header_bar/gf_title_bar.dart | 39 ++- lib/shape/gf_shape.dart | 3 +- lib/size/gf_size.dart | 6 +- lib/types/gf_type.dart | 2 +- 11 files changed, 413 insertions(+), 337 deletions(-) rename lib/colors/{color.dart => gf_color.dart} (100%) diff --git a/lib/colors/color.dart b/lib/colors/gf_color.dart similarity index 100% rename from lib/colors/color.dart rename to lib/colors/gf_color.dart diff --git a/lib/components/avatar/gf_avatar.dart b/lib/components/avatar/gf_avatar.dart index 2dcc0c3a..3caae945 100644 --- a/lib/components/avatar/gf_avatar.dart +++ b/lib/components/avatar/gf_avatar.dart @@ -4,22 +4,6 @@ import 'package:ui_kit/shape/gf_shape.dart'; import 'package:ui_kit/size/gf_size.dart'; class GFAvatar extends StatelessWidget { - - const GFAvatar({ - Key key, - this.child, - this.backgroundColor, - this.backgroundImage, - this.foregroundColor, - this.radius, - this.minRadius, - this.maxRadius, - this.borderRadius, - this.shape = GFShape.pills, - this.size = GFSize.medium - }) : assert(radius == null || (minRadius == null && maxRadius == null)), - super(key: key); - /// Typically a [Text] widget. If the [CircleAvatar] is to have an image, use [backgroundImage] instead. final Widget child; @@ -65,30 +49,51 @@ class GFAvatar extends StatelessWidget { // The default max if only the min is specified. static const double _defaultMaxRadius = double.infinity; + const GFAvatar( + {Key key, + this.child, + this.backgroundColor, + this.backgroundImage, + this.foregroundColor, + this.radius, + this.minRadius, + this.maxRadius, + this.borderRadius, + this.shape = GFShape.pills, + this.size = GFSize.medium}) + : assert(radius == null || (minRadius == null && maxRadius == null)), + super(key: key); + double get _minDiameter { - if (radius == null && minRadius == null && maxRadius == null && size == GFSize.medium ) { - return _defaultRadius * 2.0; - } - if (radius == null && minRadius == null && maxRadius == null && size == GFSize.small) { - return _smallRadius * 2.0; - } - if (radius == null && minRadius == null && maxRadius == null && size == GFSize.large) { - return _largeRadius * 2.0; + 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; + } + } else { + return 2.0 * (radius ?? minRadius ?? _defaultMinRadius); } - return 2.0 * (radius ?? minRadius ?? _defaultMinRadius); } double get _maxDiameter { - if (radius == null && minRadius == null && maxRadius == null && size == GFSize.medium ) { - return _defaultRadius * 2.0; - } - if (radius == null && minRadius == null && maxRadius == null && size == GFSize.small) { - return _smallRadius * 2.0; - } - if (radius == null && minRadius == null && maxRadius == null && size == GFSize.large) { - return _largeRadius * 2.0; + 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; + } + } else { + return 2.0 * (radius ?? maxRadius ?? _defaultMaxRadius); } - return 2.0 * (radius ?? maxRadius ?? _defaultMaxRadius); } BoxShape get _avatarShape { @@ -98,15 +103,17 @@ class GFAvatar extends StatelessWidget { return BoxShape.rectangle; } else if (shape == GFShape.standard) { return BoxShape.rectangle; + } else { + return BoxShape.rectangle; } } - @override Widget build(BuildContext context) { assert(debugCheckHasMediaQuery(context)); final ThemeData theme = Theme.of(context); - TextStyle textStyle = theme.primaryTextTheme.subhead.copyWith(color: foregroundColor); + TextStyle textStyle = + theme.primaryTextTheme.subhead.copyWith(color: foregroundColor); Color effectiveBackgroundColor = backgroundColor; if (effectiveBackgroundColor == null) { @@ -144,22 +151,24 @@ class GFAvatar extends StatelessWidget { ? DecorationImage(image: backgroundImage, fit: BoxFit.cover) : null, shape: _avatarShape, - borderRadius: shape == GFShape.standard && borderRadius == null ? BorderRadius.circular(10.0) : borderRadius, + borderRadius: shape == GFShape.standard && borderRadius == null + ? BorderRadius.circular(10.0) + : borderRadius, ), child: child == null ? null : Center( - child: MediaQuery( - data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0), - child: IconTheme( - data: theme.iconTheme.copyWith(color: textStyle.color), - child: DefaultTextStyle( - style: textStyle, - child: child, + child: MediaQuery( + data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0), + child: IconTheme( + data: theme.iconTheme.copyWith(color: textStyle.color), + child: DefaultTextStyle( + style: textStyle, + child: child, + ), + ), + ), ), - ), - ), - ), ); } } diff --git a/lib/components/badge/gf_badge.dart b/lib/components/badge/gf_badge.dart index 1b33c3dc..8b0f50c1 100644 --- a/lib/components/badge/gf_badge.dart +++ b/lib/components/badge/gf_badge.dart @@ -1,10 +1,9 @@ import 'package:flutter/material.dart'; import 'package:ui_kit/shape/gf_shape.dart'; import 'package:ui_kit/size/gf_size.dart'; -import 'package:ui_kit/colors/color.dart'; +import 'package:ui_kit/colors/gf_color.dart'; class GFBadge extends StatefulWidget { - /// The border side for the button's [Material]. final BorderSide border; @@ -32,9 +31,7 @@ class GFBadge extends StatefulWidget { /// Pass [GFColor] or [Color] final dynamic textColor; - - /// Create counter of all types, check out [GFBadge] for button badges and [GFIconBadge] for icon badges - + /// Create badges of all types, check out [GFButtonBadge] for button badges and [GFIconBadge] for icon badges const GFBadge({ Key key, this.textStyle, @@ -46,8 +43,7 @@ class GFBadge extends StatefulWidget { this.border, this.text, @required this.child, - }) : - assert(shape != null, 'Counter shape can not be null',), + }) : assert(shape != null, 'Counter shape can not be null'), super(key: key); @override @@ -76,36 +72,57 @@ class _GFBadgeState extends State { @override Widget build(BuildContext context) { - - final Color themeColor = Theme.of(context).colorScheme.onSurface.withOpacity(0.12); - final BorderSide shapeBorder = widget.border != null ? widget.border : BorderSide(color: this.color, width: 0.0,); + final BorderSide shapeBorder = widget.border != null + ? widget.border + : BorderSide( + color: this.color, + width: 0.0, + ); ShapeBorder shape; - if(this.counterShape == GFShape.pills){ - shape = RoundedRectangleBorder(borderRadius: BorderRadius.circular(50.0), side: shapeBorder); - }else if(this.counterShape == GFShape.square){ - shape = RoundedRectangleBorder(borderRadius: BorderRadius.circular(0.0), side: shapeBorder); - }else if(this.counterShape == GFShape.standard){ - shape = RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0), side: shapeBorder); - }else if(this.counterShape == GFShape.circle) { - shape = RoundedRectangleBorder(borderRadius: BorderRadius.circular(100.0), side: shapeBorder); + if (this.counterShape == GFShape.pills) { + shape = RoundedRectangleBorder( + borderRadius: BorderRadius.circular(50.0), side: shapeBorder); + } else if (this.counterShape == GFShape.square) { + shape = RoundedRectangleBorder( + borderRadius: BorderRadius.circular(0.0), side: shapeBorder); + } else if (this.counterShape == GFShape.standard) { + shape = RoundedRectangleBorder( + borderRadius: BorderRadius.circular(5.0), side: shapeBorder); + } else if (this.counterShape == GFShape.circle) { + shape = RoundedRectangleBorder( + borderRadius: BorderRadius.circular(100.0), side: shapeBorder); + } else { + shape = RoundedRectangleBorder( + borderRadius: BorderRadius.circular(5.0), side: shapeBorder); } - if(this.size == GFSize.small){ - this.height = 18.0; this.width = 24.0; this.fontSize = 10.0; - }else if(this.size == GFSize.medium){ - this.height = 20.0; this.width = 26.0; this.fontSize = 12.0; - }else if(this.size == GFSize.large){ - this.height = 24.0; this.width = 30.0; this.fontSize = 12.0; + if (this.size == GFSize.small) { + this.height = 18.0; + this.width = 24.0; + this.fontSize = 10.0; + } else if (this.size == GFSize.medium) { + this.height = 20.0; + this.width = 26.0; + this.fontSize = 12.0; + } else if (this.size == GFSize.large) { + this.height = 24.0; + this.width = 30.0; + this.fontSize = 12.0; + } else { + this.height = 20.0; + this.width = 26.0; + this.fontSize = 12.0; } - return Container( height: this.height, width: this.counterShape == GFShape.circle ? this.height : this.width, child: Material( - textStyle: this.textColor != null ? TextStyle(color: this.textColor, fontSize: this.fontSize): widget.textStyle, + textStyle: this.textColor != null + ? TextStyle(color: this.textColor, fontSize: this.fontSize) + : widget.textStyle, shape: widget.borderShape == null ? shape : widget.borderShape, color: this.color, type: MaterialType.button, diff --git a/lib/components/badge/gf_button_badge.dart b/lib/components/badge/gf_button_badge.dart index b5e278af..3dd55974 100644 --- a/lib/components/badge/gf_button_badge.dart +++ b/lib/components/badge/gf_button_badge.dart @@ -3,11 +3,10 @@ import 'package:ui_kit/shape/gf_shape.dart'; import 'package:ui_kit/size/gf_size.dart'; import 'package:ui_kit/types/gf_type.dart'; import 'package:ui_kit/position/gf_position.dart'; -import 'package:ui_kit/colors/color.dart'; +import 'package:ui_kit/colors/gf_color.dart'; import 'package:ui_kit/components/button/gf_button.dart'; class GFButtonBadge extends StatefulWidget { - /// Called when the badge is tapped or otherwise activated. final VoidCallback onPressed; @@ -47,8 +46,7 @@ class GFButtonBadge extends StatefulWidget { /// icon type of [GFPosition] i.e, start, end final GFPosition position; - /// Create badges of all types. check out [GFIconBadge] for icon badges - + /// Create badges of all types. check out [GFIconBadge] for icon badges and [GFBadge] for default badges. const GFButtonBadge({ Key key, @required this.onPressed, @@ -64,8 +62,7 @@ class GFButtonBadge extends StatefulWidget { this.borderSide, @required this.text, @required this.counterChild, - }) : - assert(shape != null, 'Badge shape can not be null',), + }) : assert(shape != null, 'Badge shape can not be null'), assert(padding != null), super(key: key); @@ -98,26 +95,24 @@ class _GFButtonBadgeState extends State { @override Widget build(BuildContext context) { - return ConstrainedBox( constraints: BoxConstraints(minHeight: 26.0, minWidth: 98.0), 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), ), ); } -} \ No newline at end of file +} diff --git a/lib/components/badge/gf_icon_badge.dart b/lib/components/badge/gf_icon_badge.dart index 830795ac..3f566d3c 100644 --- a/lib/components/badge/gf_icon_badge.dart +++ b/lib/components/badge/gf_icon_badge.dart @@ -4,7 +4,6 @@ import 'package:ui_kit/types/gf_type.dart'; import 'package:ui_kit/position/gf_position.dart'; class GFIconBadges extends StatefulWidget { - /// Called when the badge is tapped or otherwise activated. final VoidCallback onPressed; @@ -17,17 +16,14 @@ class GFIconBadges extends StatefulWidget { /// The internal padding for the badge's [child]. final EdgeInsetsGeometry padding; - - /// Create badges of all types, check out [GFBadge] for button badges - + /// Create badges of all types, check out [GFBadge] for button badges and [GFIconBadge] for icon badges. const GFIconBadges({ Key key, @required this.onPressed, this.padding = const EdgeInsets.symmetric(horizontal: 8.0), @required this.child, @required this.counterChild, - }) : - assert(padding != null), + }) : assert(padding != null), super(key: key); @override @@ -51,9 +47,9 @@ class _GFIconBadgesState extends State { @override Widget build(BuildContext context) { - return Container( - height: 60.0, width: 60.0, + height: 60.0, + width: 60.0, child: Stack( children: [ widget.child, @@ -66,4 +62,4 @@ class _GFIconBadgesState extends State { ), ); } -} \ No newline at end of file +} diff --git a/lib/components/button/gf_button.dart b/lib/components/button/gf_button.dart index b1e4d1f6..85953091 100644 --- a/lib/components/button/gf_button.dart +++ b/lib/components/button/gf_button.dart @@ -8,10 +8,9 @@ import 'package:ui_kit/shape/gf_shape.dart'; import 'package:ui_kit/size/gf_size.dart'; import 'package:ui_kit/types/gf_type.dart'; import 'package:ui_kit/position/gf_position.dart'; -import 'package:ui_kit/colors/color.dart'; +import 'package:ui_kit/colors/gf_color.dart'; class GFButton extends StatefulWidget { - /// Called when the button is tapped or otherwise activated. final VoidCallback onPressed; @@ -117,8 +116,7 @@ class GFButton extends StatefulWidget { /// on true state default box shadow appears around button final bool buttonBoxShadow; - /// Create buttons of all types. check out [GFIconButton] for icon buttons - + /// Create buttons of all types. check out [GFIconButton] for icon buttons, and [GFBadge] for badges const GFButton({ Key key, @required this.onPressed, @@ -155,8 +153,9 @@ class GFButton extends StatefulWidget { this.icon, this.blockButton, this.fullWidthButton, - }) : materialTapTargetSize = materialTapTargetSize ?? MaterialTapTargetSize.padded, - assert(shape != null, 'Button shape can not be null',), + }) : materialTapTargetSize = + materialTapTargetSize ?? MaterialTapTargetSize.padded, + assert(shape != null, 'Button shape can not be null'), assert(elevation != null && elevation >= 0.0), assert(focusElevation != null && focusElevation >= 0.0), assert(hoverElevation != null && hoverElevation >= 0.0), @@ -183,12 +182,7 @@ class _GFButtonState extends State { double size; GFPosition position; BoxShadow boxShadow; - double blockWidth(context) { - return MediaQuery.of(context).size.width * 0.88; - } - double fullWidth(context) { - return MediaQuery.of(context).size.width; - } + final Set _states = {}; @override void initState() { @@ -201,16 +195,33 @@ class _GFButtonState extends State { this.shape = widget.shape; this.size = getGFSize(widget.size); this.position = widget.position; - super.initState(); _updateState(MaterialState.disabled, !widget.enabled); + super.initState(); } - final Set _states = {}; bool get _hovered => _states.contains(MaterialState.hovered); bool get _focused => _states.contains(MaterialState.focused); bool get _pressed => _states.contains(MaterialState.pressed); bool get _disabled => _states.contains(MaterialState.disabled); + double blockWidth(context) { + return MediaQuery.of(context).size.width * 0.88; + } + + double fullWidth(context) { + return MediaQuery.of(context).size.width; + } + + double buttonWidth() { + if (widget.blockButton == true) { + return blockWidth(context); + } else if (widget.fullWidthButton == true) { + return fullWidth(context); + } else { + return null; + } + } + void _updateState(MaterialState state, bool value) { value ? _states.add(state) : _states.remove(state); } @@ -244,7 +255,6 @@ class _GFButtonState extends State { @override void didUpdateWidget(GFButton oldWidget) { - super.didUpdateWidget(oldWidget); _updateState(MaterialState.disabled, !widget.enabled); // If the button is disabled while a press gesture is currently ongoing, // InkWell makes a call to handleHighlightChanged. This causes an exception @@ -253,31 +263,33 @@ class _GFButtonState extends State { if (_disabled && _pressed) { _handleHighlightChanged(false); } + super.didUpdateWidget(oldWidget); } - double get _effectiveElevation { - // These conditionals are in order of precedence, so be careful about - // reorganizing them. - if (_disabled) { - return widget.disabledElevation; - } - if (_pressed) { - return widget.highlightElevation; - } - if (_hovered) { - return widget.hoverElevation; - } - if (_focused) { - return widget.focusElevation; - } - return widget.elevation; - } + // double get _effectiveElevation { + // // These conditionals are in order of precedence, so be careful about + // // reorganizing them. + // if (_disabled) { + // return widget.disabledElevation; + // } + // if (_pressed) { + // return widget.highlightElevation; + // } + // if (_hovered) { + // return widget.hoverElevation; + // } + // if (_focused) { + // return widget.focusElevation; + // } + // return widget.elevation; + // } @override Widget build(BuildContext context) { - - final Color effectiveTextColor = MaterialStateProperty.resolveAs(widget.textStyle?.color, _states); - final Color themeColor = Theme.of(context).colorScheme.onSurface.withOpacity(0.12); + final Color effectiveTextColor = MaterialStateProperty.resolveAs( + widget.textStyle?.color, _states); + final Color themeColor = + Theme.of(context).colorScheme.onSurface.withOpacity(0.12); final BorderSide outlineBorder = BorderSide( color: widget.borderSide == null ? themeColor : widget.borderSide.color, width: widget.borderSide?.width ?? 1.0, @@ -291,124 +303,144 @@ class _GFButtonState extends State { case MaterialTapTargetSize.shrinkWrap: minSize = Size.zero; break; + default: + minSize = Size.zero; + break; } - final BorderSide shapeBorder = widget.type == GFType.outline ? outlineBorder : widget.borderSide != null ? widget.borderSide : BorderSide(color: this.color, width: 0.0,); + final BorderSide shapeBorder = widget.type == GFType.outline + ? outlineBorder + : widget.borderSide != null + ? widget.borderSide + : BorderSide( + color: this.color, + width: 0.0, + ); ShapeBorder shape; - if(this.shape == GFShape.pills){ - shape = RoundedRectangleBorder(borderRadius: BorderRadius.circular(50.0), side: shapeBorder); - }else if(this.shape == GFShape.square){ - shape = RoundedRectangleBorder(borderRadius: BorderRadius.circular(0.0), side: shapeBorder); - }else if(this.shape == GFShape.standard){ - shape = RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0), side: shapeBorder); - } - - buttonWidth(){ - if(widget.blockButton == true) { - blockWidth(context); - }else if(widget.fullWidthButton == true ) { - fullWidth(context); - } + if (this.shape == GFShape.pills) { + shape = RoundedRectangleBorder( + borderRadius: BorderRadius.circular(50.0), side: shapeBorder); + } else if (this.shape == GFShape.square) { + shape = RoundedRectangleBorder( + borderRadius: BorderRadius.circular(0.0), side: shapeBorder); + } else if (this.shape == GFShape.standard) { + shape = RoundedRectangleBorder( + borderRadius: BorderRadius.circular(5.0), side: shapeBorder); + } else { + shape = RoundedRectangleBorder( + borderRadius: BorderRadius.circular(50.0), side: shapeBorder); } - - return Semantics( - container: true, - button: true, - enabled: widget.enabled, - child: _InputPadding( - minSize: minSize, - child: Focus( - focusNode: widget.focusNode, - onFocusChange: _handleFocusedChanged, - autofocus: widget.autofocus, - child: Container( - constraints: this.icon == null ? BoxConstraints(minHeight: 26.0, minWidth: 88.0) : - BoxConstraints(minHeight: 26.0, minWidth: 98.0), - decoration: BoxDecoration( - borderRadius: widget.shape == GFShape.pills ? BorderRadius.circular(50.0) : - widget.shape == GFShape.standard ? BorderRadius.circular(5.0) : BorderRadius.zero, - boxShadow: [ - widget.boxShadow == null && widget.buttonBoxShadow == true ? BoxShadow( - color: this.color.withOpacity(0.4), - blurRadius: 1.5, - spreadRadius: 2.0, - offset: Offset.zero, - ) : - widget.boxShadow != null ? widget.boxShadow : - BoxShadow( - color: Theme.of(context).canvasColor, - blurRadius: 0.0, - spreadRadius: 0.0, - offset: Offset.zero, - ) - ] - ), - child: Material( - textStyle: widget.textStyle == null ? TextStyle(color: this.textColor, fontSize: 14) : widget.textStyle, - shape: widget.type == GFType.transparent ? null : widget.borderShape== null ? shape : widget.borderShape, - color: widget.type != GFType.outline || widget.type == null ? this.color : Theme.of(context).canvasColor, - type: widget.type == GFType.transparent ? MaterialType.transparency : MaterialType.button, - animationDuration: widget.animationDuration, - clipBehavior: widget.clipBehavior, - child: InkWell( - onHighlightChanged: _handleHighlightChanged, - splashColor: widget.splashColor, - highlightColor: widget.highlightColor, - focusColor: widget.focusColor, - hoverColor: widget.hoverColor, - onHover: _handleHoveredChanged, - onTap: widget.onPressed, - customBorder: widget.borderShape == null ? shape : widget.borderShape, - child: IconTheme.merge( - data: IconThemeData(color: effectiveTextColor), - child: Container( - height: widget.blockButton == true ? BLOCK - : widget.fullWidthButton == true ? BLOCK - : this.size, - width: buttonWidth(), - padding: widget.padding, - child: Center( - widthFactor: 1.0, - heightFactor: 1.0, - child: this.icon != null && (this.position == GFPosition.start || this.position == null)? - Row( + return Semantics( + container: true, + button: true, + enabled: widget.enabled, + child: _InputPadding( + minSize: minSize, + child: Focus( + focusNode: widget.focusNode, + onFocusChange: _handleFocusedChanged, + autofocus: widget.autofocus, + child: Container( + constraints: this.icon == null + ? BoxConstraints(minHeight: 26.0, minWidth: 88.0) + : BoxConstraints(minHeight: 26.0, minWidth: 98.0), + decoration: BoxDecoration( + borderRadius: widget.shape == GFShape.pills + ? BorderRadius.circular(50.0) + : widget.shape == GFShape.standard + ? BorderRadius.circular(5.0) + : BorderRadius.zero, + boxShadow: [ + widget.boxShadow == null && widget.buttonBoxShadow == true + ? BoxShadow( + color: this.color.withOpacity(0.4), + blurRadius: 1.5, + spreadRadius: 2.0, + offset: Offset.zero, + ) + : widget.boxShadow != null + ? widget.boxShadow + : BoxShadow( + color: Theme.of(context).canvasColor, + blurRadius: 0.0, + spreadRadius: 0.0, + offset: Offset.zero, + ) + ]), + child: Material( + textStyle: widget.textStyle == null + ? TextStyle(color: this.textColor, fontSize: 14) + : widget.textStyle, + shape: widget.type == GFType.transparent + ? null + : widget.borderShape == null ? shape : widget.borderShape, + color: widget.type != GFType.outline || widget.type == null + ? this.color + : Theme.of(context).canvasColor, + type: widget.type == GFType.transparent + ? MaterialType.transparency + : MaterialType.button, + animationDuration: widget.animationDuration, + clipBehavior: widget.clipBehavior, + child: InkWell( + onHighlightChanged: _handleHighlightChanged, + splashColor: widget.splashColor, + highlightColor: widget.highlightColor, + focusColor: widget.focusColor, + hoverColor: widget.hoverColor, + onHover: _handleHoveredChanged, + onTap: widget.onPressed, + customBorder: + widget.borderShape == null ? shape : widget.borderShape, + child: IconTheme.merge( + data: IconThemeData(color: effectiveTextColor), + child: Container( + height: widget.blockButton == true + ? BLOCK + : widget.fullWidthButton == true ? BLOCK : this.size, + width: buttonWidth(), + padding: widget.padding, + child: Center( + widthFactor: 1.0, + heightFactor: 1.0, + child: this.icon != null && + (this.position == GFPosition.start || + this.position == null) + ? Row( mainAxisSize: MainAxisSize.min, children: [ this.icon, const SizedBox(width: 8.0), this.child ], - ) : this.icon != null && (this.position == GFPosition.end) ? - Row( - mainAxisSize: MainAxisSize.min, - children: [ - this.child, - const SizedBox(width: 8.0), - this.icon - ], - ) : this.child, - ), - ), + ) + : this.icon != null && + (this.position == GFPosition.end) + ? Row( + mainAxisSize: MainAxisSize.min, + children: [ + this.child, + const SizedBox(width: 8.0), + this.icon + ], + ) + : this.child, ), ), ), ), + ), ), ), - ); - } + ), + ); } - - +} /// A widget to pad the area around a [MaterialButton]'s inner [Material]. -/// -/// Redirect taps that occur in the padded area around the child to the center -/// of the child. This increases the size of the button and the button's -/// "tap target", but not its material or its ink splashes. class _InputPadding extends SingleChildRenderObjectWidget { const _InputPadding({ Key key, @@ -424,7 +456,8 @@ class _InputPadding extends SingleChildRenderObjectWidget { } @override - void updateRenderObject(BuildContext context, covariant _RenderInputPadding renderObject) { + void updateRenderObject( + BuildContext context, covariant _RenderInputPadding renderObject) { renderObject.minSize = minSize; } } @@ -434,9 +467,9 @@ class _RenderInputPadding extends RenderShiftedBox { Size get minSize => _minSize; Size _minSize; + set minSize(Size value) { - if (_minSize == value) - return; + if (_minSize == value) return; _minSize = value; markNeedsLayout(); } @@ -484,7 +517,7 @@ class _RenderInputPadding extends RenderShiftedBox { } @override - bool hitTest(BoxHitTestResult result, { Offset position }) { + bool hitTest(BoxHitTestResult result, {Offset position}) { if (super.hitTest(result, position: position)) { return true; } diff --git a/lib/components/button/gf_icon_button.dart b/lib/components/button/gf_icon_button.dart index 11a2542a..c169bb99 100644 --- a/lib/components/button/gf_icon_button.dart +++ b/lib/components/button/gf_icon_button.dart @@ -5,10 +5,9 @@ import 'package:flutter/material.dart'; import 'package:ui_kit/shape/gf_shape.dart'; import 'package:ui_kit/size/gf_size.dart'; import 'package:ui_kit/types/gf_type.dart'; -import 'package:ui_kit/colors/color.dart'; +import 'package:ui_kit/colors/gf_color.dart'; class GFIconButton extends StatefulWidget { - /// The size of the icon inside the button. final double iconSize; @@ -73,31 +72,30 @@ class GFIconButton extends StatefulWidget { final BorderSide borderSide; /// Create icon buttons of all types. check out [GFButton] for buttons - - const GFIconButton({ - Key key, - this.iconSize = 0.0, - this.padding = const EdgeInsets.all(8.0), - this.alignment = Alignment.center, - @required this.icon, - this.focusColor, - this.hoverColor, - this.highlightColor, - this.splashColor, - this.disabledColor, - @required this.onPressed, - this.focusNode, - this.autofocus = false, - this.tooltip, - this.type = GFType.outline, - this.shape = GFShape.standard, - this.color = GFColor.primary, - this.borderShape, - this.boxShadow, - this.size = GFSize.medium, - this.buttonBoxShadow, - this.borderSide - }) : assert(iconSize != null), + const GFIconButton( + {Key key, + this.iconSize = 0.0, + this.padding = const EdgeInsets.all(8.0), + this.alignment = Alignment.center, + @required this.icon, + this.focusColor, + this.hoverColor, + this.highlightColor, + this.splashColor, + this.disabledColor, + @required this.onPressed, + this.focusNode, + this.autofocus = false, + this.tooltip, + this.type = GFType.outline, + this.shape = GFShape.standard, + this.color = GFColor.primary, + this.borderShape, + this.boxShadow, + this.size = GFSize.medium, + this.buttonBoxShadow, + this.borderSide}) + : assert(iconSize != null), assert(padding != null), assert(alignment != null), assert(autofocus != null), @@ -106,7 +104,6 @@ class GFIconButton extends StatefulWidget { @override _GFIconButtonState createState() => _GFIconButtonState(); - } class _GFIconButtonState extends State { @@ -137,35 +134,59 @@ class _GFIconButtonState extends State { else currentColor = widget.disabledColor ?? Theme.of(context).disabledColor; - final Color themeColor = Theme.of(context).colorScheme.onSurface.withOpacity(0.12); + final Color themeColor = + Theme.of(context).colorScheme.onSurface.withOpacity(0.12); final BorderSide outlineBorder = BorderSide( color: widget.borderSide == null ? themeColor : widget.borderSide.color, width: widget.borderSide?.width ?? 1.0, ); - final BorderSide shapeBorder = widget.type == GFType.outline ? outlineBorder : widget.borderSide != null ? widget.borderSide : BorderSide(color: this.color, width: 0.0,); + final BorderSide shapeBorder = widget.type == GFType.outline + ? outlineBorder + : widget.borderSide != null + ? widget.borderSide + : BorderSide( + color: this.color, + width: 0.0, + ); ShapeBorder shape; - if(this.shape == GFShape.pills){ - shape = RoundedRectangleBorder(borderRadius: BorderRadius.circular(50.0), side: shapeBorder); - }else if(this.shape == GFShape.square){ - shape = RoundedRectangleBorder(borderRadius: BorderRadius.circular(0.0), side: shapeBorder); - }else if(this.shape == GFShape.standard){ - shape = RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0), side: shapeBorder); + if (this.shape == GFShape.pills) { + shape = RoundedRectangleBorder( + borderRadius: BorderRadius.circular(50.0), side: shapeBorder); + } else if (this.shape == GFShape.square) { + shape = RoundedRectangleBorder( + borderRadius: BorderRadius.circular(0.0), side: shapeBorder); + } else if (this.shape == GFShape.standard) { + shape = RoundedRectangleBorder( + borderRadius: BorderRadius.circular(5.0), side: shapeBorder); + } else { + shape = RoundedRectangleBorder( + borderRadius: BorderRadius.circular(5.0), side: shapeBorder); } - if(widget.size == GFSize.small){ - this.height = 36.0; this.width = 36.0; this.iconPixel = 24.0; - }else if(widget.size == GFSize.medium){ - this.height = 44.0; this.width = 44.0; this.iconPixel = 24.0; - }else if(widget.size == GFSize.large){ - this.height = 50.0; this.width = 50.0; this.iconPixel = 28.0; + if (widget.size == GFSize.small) { + this.height = 36.0; + this.width = 36.0; + this.iconPixel = 24.0; + } else if (widget.size == GFSize.medium) { + this.height = 44.0; + this.width = 44.0; + this.iconPixel = 24.0; + } else if (widget.size == GFSize.large) { + this.height = 50.0; + this.width = 50.0; + this.iconPixel = 28.0; + } else { + this.height = 44.0; + this.width = 44.0; + this.iconPixel = 24.0; } Widget result = Container( height: widget.shape == GFShape.pills ? this.height + 6 : this.height, - width: widget.shape == GFShape.pills ? this.width + 6 : this.width, + width: widget.shape == GFShape.pills ? this.width + 6 : this.width, padding: widget.padding, child: IconTheme.merge( data: IconThemeData( @@ -183,7 +204,6 @@ class _GFIconButtonState extends State { ); } - return Semantics( button: true, enabled: widget.onPressed != null, @@ -193,41 +213,57 @@ class _GFIconButtonState extends State { child: ConstrainedBox( constraints: BoxConstraints(maxWidth: 60.0, maxHeight: 60.0), child: Container( - height: widget.shape == GFShape.pills ? this.height + 6 : this.height, - width: widget.shape == GFShape.pills ? this.width + 6 : this.width, + height: + widget.shape == GFShape.pills ? this.height + 6 : this.height, + width: widget.shape == GFShape.pills ? this.width + 6 : this.width, decoration: BoxDecoration( - borderRadius: widget.shape == GFShape.pills ? BorderRadius.circular(50.0) : - widget.shape == GFShape.standard ? BorderRadius.circular(5.0) : BorderRadius.zero, + borderRadius: widget.shape == GFShape.pills + ? BorderRadius.circular(50.0) + : widget.shape == GFShape.standard + ? BorderRadius.circular(5.0) + : BorderRadius.zero, boxShadow: [ - widget.boxShadow == null && widget.buttonBoxShadow == true ? BoxShadow( - color: this.color.withOpacity(0.4), - blurRadius: 1.5, - spreadRadius: 2.0, - offset: Offset.zero, - ) : - widget.boxShadow != null ? widget.boxShadow : - BoxShadow( - color: Theme.of(context).canvasColor, - blurRadius: 0.0, - spreadRadius: 0.0, - offset: Offset.zero, - ) - ] - ), + widget.boxShadow == null && widget.buttonBoxShadow == true + ? BoxShadow( + color: this.color.withOpacity(0.4), + blurRadius: 1.5, + spreadRadius: 2.0, + offset: Offset.zero, + ) + : widget.boxShadow != null + ? widget.boxShadow + : BoxShadow( + color: Theme.of(context).canvasColor, + blurRadius: 0.0, + spreadRadius: 0.0, + offset: Offset.zero, + ) + ]), child: Material( - shape: widget.type == GFType.transparent ? null : widget.borderShape == null ? shape : widget.borderShape, - color: widget.type != GFType.outline || widget.type == null ? this.color : Theme.of(context).canvasColor, - type: widget.type == GFType.transparent ? MaterialType.transparency : MaterialType.button, + shape: widget.type == GFType.transparent + ? null + : widget.borderShape == null ? shape : widget.borderShape, + color: widget.type != GFType.outline || widget.type == null + ? this.color + : Theme.of(context).canvasColor, + type: widget.type == GFType.transparent + ? MaterialType.transparency + : MaterialType.button, child: InkResponse( onTap: widget.onPressed, child: result, focusColor: widget.focusColor ?? Theme.of(context).focusColor, hoverColor: widget.hoverColor ?? Theme.of(context).hoverColor, - highlightColor: widget.highlightColor ?? Theme.of(context).highlightColor, - splashColor: widget.splashColor ?? Theme.of(context).splashColor, + highlightColor: + widget.highlightColor ?? Theme.of(context).highlightColor, + splashColor: + widget.splashColor ?? Theme.of(context).splashColor, radius: math.max( Material.defaultSplashRadius, - (widget.iconSize + math.min(widget.padding.horizontal, widget.padding.vertical)) * 0.7, + (widget.iconSize + + math.min(widget.padding.horizontal, + widget.padding.vertical)) * + 0.7, ), ), ), diff --git a/lib/components/header_bar/gf_title_bar.dart b/lib/components/header_bar/gf_title_bar.dart index c38a28d9..5f1fdecd 100644 --- a/lib/components/header_bar/gf_title_bar.dart +++ b/lib/components/header_bar/gf_title_bar.dart @@ -3,18 +3,6 @@ import 'package:flutter/material.dart'; import 'package:ui_kit/components/avatar/gf_avatar.dart'; class GFTitleBar extends StatelessWidget { - - const GFTitleBar({ - Key key, - this.color, - this.padding, - this.margin, - this.avatar, - this.title, - this.subTitle, - this.icon - }) : super(key: key); - /// The card's background color. final Color color; @@ -36,21 +24,28 @@ class GFTitleBar extends StatelessWidget { /// The icon to display inside the [GFTitleBar]. see [Icon] final Widget icon; + const GFTitleBar( + {Key key, + this.color, + this.padding, + this.margin, + this.avatar, + this.title, + this.subTitle, + this.icon}) + : super(key: key); + @override Widget build(BuildContext context) { - return Container( -// margin: margin ?? const EdgeInsets.all(16.0), -// padding: padding ?? const EdgeInsets.all(12.0), + // margin: margin ?? const EdgeInsets.all(16.0), + // padding: padding ?? const EdgeInsets.all(12.0), child: ListTile( - leading: avatar, - title: title, - subtitle: subTitle, - trailing: icon, + leading: avatar, + title: title, + subtitle: subTitle, + trailing: icon, ), ); } } - - - diff --git a/lib/shape/gf_shape.dart b/lib/shape/gf_shape.dart index bc99b661..257106e9 100644 --- a/lib/shape/gf_shape.dart +++ b/lib/shape/gf_shape.dart @@ -1,2 +1 @@ -enum GFShape { standard, pills, square, circle} - +enum GFShape { standard, pills, square, circle } diff --git a/lib/size/gf_size.dart b/lib/size/gf_size.dart index d4910d88..d96e132b 100644 --- a/lib/size/gf_size.dart +++ b/lib/size/gf_size.dart @@ -1,4 +1,4 @@ -enum GFSize { small, medium, large, } +enum GFSize { small, medium, large } const double SMALL = 28.0; const double MEDIUM = 36.0; @@ -26,7 +26,3 @@ double getGFSize(dynamic size) { } } } - - - - diff --git a/lib/types/gf_type.dart b/lib/types/gf_type.dart index 301a2286..2848942e 100644 --- a/lib/types/gf_type.dart +++ b/lib/types/gf_type.dart @@ -1 +1 @@ -enum GFType { solid, outline, dashed, transparent, } +enum GFType { solid, outline, dashed, transparent }