Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
File renamed without changes.
103 changes: 56 additions & 47 deletions lib/components/avatar/gf_avatar.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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 {
Expand All @@ -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) {
Expand Down Expand Up @@ -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,
),
),
),
),
),
),
),
);
}
}
69 changes: 43 additions & 26 deletions lib/components/badge/gf_badge.dart
Original file line number Diff line number Diff line change
@@ -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;

Expand Down Expand Up @@ -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,
Expand All @@ -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
Expand Down Expand Up @@ -76,36 +72,57 @@ class _GFBadgeState extends State<GFBadge> {

@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,
Expand Down
37 changes: 16 additions & 21 deletions lib/components/badge/gf_button_badge.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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,
Expand All @@ -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);

Expand Down Expand Up @@ -98,26 +95,24 @@ class _GFButtonBadgeState extends State<GFButtonBadge> {

@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),
),
);
}
}
}
14 changes: 5 additions & 9 deletions lib/components/badge/gf_icon_badge.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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
Expand All @@ -51,9 +47,9 @@ class _GFIconBadgesState extends State<GFIconBadges> {

@override
Widget build(BuildContext context) {

return Container(
height: 60.0, width: 60.0,
height: 60.0,
width: 60.0,
child: Stack(
children: <Widget>[
widget.child,
Expand All @@ -66,4 +62,4 @@ class _GFIconBadgesState extends State<GFIconBadges> {
),
);
}
}
}
Loading