diff --git a/example/lib/main.dart b/example/lib/main.dart index cf51763d..705e258d 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -8,6 +8,7 @@ import 'package:ui_kit/components/badge/gf_badge.dart'; import 'package:ui_kit/components/card/gf_card.dart'; import 'package:ui_kit/components/header_bar/gf_title_bar.dart'; import 'package:ui_kit/components/image/gf_image_overlay.dart'; +import 'package:ui_kit/components/button_bar/gf_button_bar.dart'; import 'package:ui_kit/types/gf_type.dart'; void main() => runApp(MyApp()); @@ -47,6 +48,29 @@ class _MyHomePageState extends State { crossAxisAlignment: CrossAxisAlignment.center, children: [ + Card( + child: Column( + children: [ + Text("czsd"), + Row( + children: [ + OutlineButton(onPressed: null, child: Text("dscds"), color: Colors.orange, ), + FlatButton(onPressed: null, child: Text("dchbvj")) + ], + ) + ], + ), + ), + + GFButtonBar( + mainAxisSize: MainAxisSize.min, + children: [ + GFButton(onPressed: null, child: Text("like"), icon: Icon(Icons.favorite_border), type: GFType.transparent,), + GFButton(onPressed: null, child: Text("comment"),), + GFButton(onPressed: null, child: Text("share"), icon: Icon(Icons.share), type: GFType.outline,), + ], + ), + GFTitleBar( avatar: GFAvatar( child: Text("tb"), @@ -54,6 +78,7 @@ class _MyHomePageState extends State { title: Text('title'), subTitle: Text('subtitle'), icon: GFIconButton( + type: GFType.transparent, icon: Icon(Icons.favorite_border), ), ), @@ -68,10 +93,23 @@ class _MyHomePageState extends State { icon: Icon(Icons.favorite_border), type: GFType.transparent, ), + image: Image.asset("lib/assets/pizza.jpeg"), + content: Text("Flutter " + "Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS and Android in "), + buttonBar: GFButtonBar( + mainAxisSize: MainAxisSize.min, + children: [ + GFButton(onPressed: null, child: Text("favorite"), icon: Icon(Icons.favorite_border), type: GFType.transparent, ), + GFButton(onPressed: null, child: Text("share"), icon: Icon(Icons.share), type: GFType.outline, ), + ], + ), + ), + + // GFCard( // headertype: GFAtb(), // po diff --git a/lib/components/button/gf_button.dart b/lib/components/button/gf_button.dart index 85953091..ef5ab8bb 100644 --- a/lib/components/button/gf_button.dart +++ b/lib/components/button/gf_button.dart @@ -333,83 +333,79 @@ class _GFButtonState extends State { 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( +// Color _getFillColor() { +// if (widget.highlightElevation == null || widget.highlightElevation == 0.0) +// return Colors.transparent; +// final Color color = widget.color ?? Theme.of(context).canvasColor; +// final Tween colorTween = ColorTween( +// begin: color.withAlpha(0x00), +// end: color.withAlpha(0xFF), +// ); +// return colorTween.evaluate(_fillAnimation); +// } + + + 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, diff --git a/lib/components/button_bar/gf_button_bar.dart b/lib/components/button_bar/gf_button_bar.dart new file mode 100644 index 00000000..6d2fedce --- /dev/null +++ b/lib/components/button_bar/gf_button_bar.dart @@ -0,0 +1,59 @@ +import 'package:flutter/material.dart'; +import 'package:ui_kit/components/button/gf_button.dart'; +import 'package:ui_kit/components/button/gf_icon_button.dart'; + +class GFButtonBar extends StatelessWidget { + + const GFButtonBar({ + Key key, + this.alignment = MainAxisAlignment.end, + this.mainAxisSize = MainAxisSize.max, + this.children = const [], + }) : super(key: key); + + /// How the children should be placed along the horizontal axis. + final MainAxisAlignment alignment; + + /// How much horizontal space is available. See [Row.mainAxisSize]. + final MainAxisSize mainAxisSize; + + /// The buttons to arrange horizontally. + /// Typically [RaisedButton] or [GFButton] or [GFIconButton] widgets. + final List children; + + @override + Widget build(BuildContext context) { + final ButtonThemeData buttonTheme = ButtonTheme.of(context); + // We divide by 4.0 because we want half of the average of the left and right padding. + final double paddingUnit = buttonTheme.padding.horizontal / 4.0; + final Widget child = Row( + mainAxisAlignment: alignment, + mainAxisSize: mainAxisSize, + children: children.map((Widget child) { + return Padding( + padding: EdgeInsets.symmetric(horizontal: paddingUnit), + child: child, + ); + }).toList(), + ); + switch (buttonTheme.layoutBehavior) { + case ButtonBarLayoutBehavior.padded: + return Padding( + padding: EdgeInsets.symmetric( + vertical: 2.0 * paddingUnit, + horizontal: paddingUnit, + ), + child: child, + ); + case ButtonBarLayoutBehavior.constrained: + return Container( + padding: EdgeInsets.symmetric(horizontal: paddingUnit), + constraints: const BoxConstraints(minHeight: 52.0), + alignment: Alignment.center, + child: child, + ); + } + assert(false); + return null; + } +} diff --git a/lib/components/card/gf_card.dart b/lib/components/card/gf_card.dart index 1118875a..3fd8ccc8 100644 --- a/lib/components/card/gf_card.dart +++ b/lib/components/card/gf_card.dart @@ -1,6 +1,7 @@ import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:ui_kit/components/avatar/gf_avatar.dart'; +import 'package:ui_kit/components/button_bar/gf_button_bar.dart'; import 'package:ui_kit/components/header_bar/gf_title_bar.dart'; enum GFCardType { basic, social, image} @@ -25,7 +26,8 @@ class GFCard extends StatelessWidget { this.titleTextStyle, this.content, this.image, - this.icon + this.icon, + this.buttonBar, }) : assert(elevation == null || elevation >= 0.0), assert(borderOnForeground != null), super(key: key); @@ -83,6 +85,9 @@ class GFCard extends StatelessWidget { /// image widget can be used final Image image; + /// widget can be used to define buttons bar, see [GFButtonBar] + final GFButtonBar buttonBar; + static const double _defaultElevation = 1.0; static const Clip _defaultClipBehavior = Clip.none; @@ -116,11 +121,12 @@ class GFCard extends StatelessWidget { subTitle: subTitle, icon: icon, ), -// image, -// Padding( -// padding: padding, -// child: content, -// ) + image, + Padding( + padding: padding, + child: content, + ), + buttonBar, ], ), ), diff --git a/lib/components/header_bar/gf_title_bar.dart b/lib/components/header_bar/gf_title_bar.dart index 5f1fdecd..34791b54 100644 --- a/lib/components/header_bar/gf_title_bar.dart +++ b/lib/components/header_bar/gf_title_bar.dart @@ -37,15 +37,11 @@ class GFTitleBar extends StatelessWidget { @override Widget build(BuildContext context) { - return Container( - // margin: margin ?? const EdgeInsets.all(16.0), - // padding: padding ?? const EdgeInsets.all(12.0), - child: ListTile( - leading: avatar, - title: title, - subtitle: subTitle, - trailing: icon, - ), + return ListTile( + leading: avatar, + title: title, + subtitle: subTitle, + trailing: icon, ); } -} +} \ No newline at end of file