diff --git a/example/lib/main.dart b/example/lib/main.dart index 705e258d..b52a897c 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -1,4 +1,6 @@ +import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; +import 'package:flutter/painting.dart'; import 'package:ui_kit/components/button/gf_button.dart'; import 'package:ui_kit/components/button/gf_icon_button.dart'; import 'package:ui_kit/components/badge/gf_button_badge.dart'; @@ -7,9 +9,11 @@ import 'package:ui_kit/components/avatar/gf_avatar.dart'; 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/position/gf_position.dart'; import 'package:ui_kit/types/gf_type.dart'; +import 'package:ui_kit/components/image/gf_image_overlay.dart'; +import 'package:ui_kit/shape/gf_shape.dart'; void main() => runApp(MyApp()); @@ -48,54 +52,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"), - ), - title: Text('title'), - subTitle: Text('subtitle'), - icon: GFIconButton( - type: GFType.transparent, - icon: Icon(Icons.favorite_border), - ), - ), GFCard( - avatar: GFAvatar( - child: Text("tb"), - ), - title: Text('title'), - subTitle: Text('subtitle'), - icon: GFIconButton( - icon: Icon(Icons.favorite_border), - type: GFType.transparent, - ), + boxFit: BoxFit.cover, + colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.67), BlendMode.darken), image: Image.asset("lib/assets/pizza.jpeg"), +// imageOverlay: AssetImage("lib/assets/pizza.jpeg"), + titlePosition: GFPosition.end, + title: GFTitleBar( + avatar: GFAvatar( + child: Text("tb"), + ), + title: Text('title', style: TextStyle(color: Colors.grey),), + subTitle: Text('subtitle', style: TextStyle(color: Colors.grey),), + icon: GFIconButton( + onPressed: null, + icon: Icon(Icons.favorite_border), + type: GFType.transparent, + ), + ), content: Text("Flutter " - "Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS and Android in "), + "Flutter is Google's mobile UI framework for crafting" + " high-quality native interfaces on iOS and Android in " + "Flutter ", style: TextStyle(color: Colors.grey), ), buttonBar: GFButtonBar( mainAxisSize: MainAxisSize.min, children: [ @@ -103,126 +82,175 @@ class _MyHomePageState extends State { GFButton(onPressed: null, child: Text("share"), icon: Icon(Icons.share), type: GFType.outline, ), ], ), - ), - - - -// GFCard( -// headertype: GFAtb(), -// po -// image -// overlaytext -// content: Text("content"), -// buttonbar: gfbb() +// 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,), +// ], // ), // -// gfbb( -// children[ -// -// ] -// ) -// GFimageoverlay() +// GFTitleBar( +// avatar: GFAvatar( +// child: Text("tb"), +// ), +// title: Text('title'), +// subTitle: Text('subtitle'), +// icon: GFIconButton( +// onPressed: null, +// type: GFType.transparent, +// icon: Icon(Icons.favorite_border), +// ), +// ), - GFAvatar( -// radius: 20.0, - child: Text("de"), - backgroundColor: Colors.pink, -// backgroundImage: , -// foregroundColor: Colors.deepOrangeAccent, -// shape: GFShape.standard, -// size: GFSize.medium, -// borderRadius: BorderRadius.circular(20.0), - ), - GFIconBadges( - onPressed: null, - child: GFIconButton( - onPressed: null, - icon: Icon(Icons.ac_unit), - ), - counterChild: GFBadge( - text: '12', -// color: GFColor.dark, -// shape: GFShape.circle, -// size: GFSize.small, -// border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), -// textColor: GFColor.white, -// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), -// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.orange, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), + GFImageOverlay( + width: MediaQuery.of(context).size.width, + margin: EdgeInsets.all(16.0), + padding: EdgeInsets.all(16.0), + child: Column( + children: [ + new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ),new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ), + new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ),new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ), + new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ),new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ), + new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ),new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ), + new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ),new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ), + new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ),new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ), + ], ), +// color: Colors.orange, + image: AssetImage("lib/assets/pizza.jpeg"), + boxFit: BoxFit.cover, + colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.darken), + borderRadius: new BorderRadius.circular(5.0), +// border: Border.all(color: Colors.pink, width: 2.0), ), - GFIconButton( - onPressed: null, - icon: Icon(Icons.ac_unit), -// iconSize: 12.0, -// type: GFType.solid, -// shape: GFShape.pills, -// size: GFSize.large, -// buttonBoxShadow: true, -// color: GFColor.primary, -// boxShadow: BoxShadow( -// color: Colors.pink, -// blurRadius: 2.0, -// spreadRadius: 1.0, -// offset: Offset.zero, + +// +// GFAvatar( +//// radius: 40.0, +// child: Text("de"), +// backgroundColor: Colors.pink, +//// backgroundImage: , +//// foregroundColor: Colors.deepOrangeAccent, +//// shape: GFShape.square, +//// size: GFSize.medium, +//// borderRadius: BorderRadius.circular(20.0), +// ), +// GFIconBadges( +// onPressed: null, +// child: GFIconButton( +// onPressed: null, +// icon: Icon(Icons.ac_unit), // ), -// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), -// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), - ), - GFButtonBadge( - onPressed: null, -// position: GFIconPosition.start, -// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), -// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), - text: 'goodies', -// color: GFColor.danger, -// shape: GFShape.pills, -// type: GFType.outline, -// size: GFSize.small, - counterChild: GFBadge( - child: Text("12"), -// color: GFColor.dark, -// shape: GFShape.circle, -// size: GFSize.small, -// border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), -// textColor: GFColor.white, -// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), - ), - ), - GFBadge( - text: '12', -// color: GFColor.dark, -// shape: GFShape.circle, -// size: GFSize.small, -// border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), -// textColor: GFColor.white, -// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), - ), - GFButton( -// type: GFType.solid, -// shape: GFShape.pills, - text: 'goodies', - onPressed: () {}, -// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), -// size: GFSize.large, -// buttonBoxShadow: true, -// blockButton: true, -// fullWidthButton: true, -// color: GFColor.primary, -// textColor: GFColor.secondary, -// icon: Icon(Icons.error, color: Colors.white,), -// position: GFIconPosition.start, -// boxShadow: BoxShadow( -// color: Colors.pink, -// blurRadius: 2.0, -// spreadRadius: 1.0, -// offset: Offset.zero, +// counterChild: GFBadge( +// text: '12', +//// color: GFColor.dark, +//// shape: GFShape.circle, +//// size: GFSize.small, +//// border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), +//// textColor: GFColor.white, +//// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), +//// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.orange, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), // ), -// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), -// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), - ), +// ), +// GFIconButton( +// onPressed: null, +// icon: Icon(Icons.ac_unit), +//// iconSize: 12.0, +//// type: GFType.solid, +//// shape: GFShape.pills, +//// size: GFSize.large, +//// buttonBoxShadow: true, +//// color: GFColor.primary, +//// boxShadow: BoxShadow( +//// color: Colors.pink, +//// blurRadius: 2.0, +//// spreadRadius: 1.0, +//// offset: Offset.zero, +//// ), +//// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), +//// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), +// ), +// GFButtonBadge( +// onPressed: null, +//// position: GFIconPosition.start, +//// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), +//// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), +// text: 'goodies', +//// color: GFColor.danger, +//// shape: GFShape.pills, +//// type: GFType.outline, +//// size: GFSize.small, +// counterChild: GFBadge( +// child: Text("12"), +//// color: GFColor.dark, +//// shape: GFShape.circle, +//// size: GFSize.small, +//// border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), +//// textColor: GFColor.white, +//// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), +// ), +// ), +// GFBadge( +// text: '12', +//// color: GFColor.dark, +//// shape: GFShape.circle, +//// size: GFSize.small, +//// border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), +//// textColor: GFColor.white, +//// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), +// ), +// GFButton( +//// type: GFType.solid, +//// shape: GFShape.pills, +// text: 'goodies', +// onPressed: () {}, +//// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), +//// size: GFSize.large, +//// buttonBoxShadow: true, +//// blockButton: true, +//// fullWidthButton: true, +//// color: GFColor.primary, +//// textColor: GFColor.secondary, +//// icon: Icon(Icons.error, color: Colors.white,), +//// position: GFIconPosition.start, +//// boxShadow: BoxShadow( +//// color: Colors.pink, +//// blurRadius: 2.0, +//// spreadRadius: 1.0, +//// offset: Offset.zero, +//// ), +//// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), +//// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), +// ), ], ), ) diff --git a/lib/components/badge/gf_badge.dart b/lib/components/badge/gf_badge.dart index 8b0f50c1..2335d6e9 100644 --- a/lib/components/badge/gf_badge.dart +++ b/lib/components/badge/gf_badge.dart @@ -42,7 +42,7 @@ class GFBadge extends StatefulWidget { this.size = GFSize.medium, this.border, this.text, - @required this.child, + this.child, }) : assert(shape != null, 'Counter shape can not be null'), super(key: key); diff --git a/lib/components/button/gf_button.dart b/lib/components/button/gf_button.dart index ef5ab8bb..6e2b1628 100644 --- a/lib/components/button/gf_button.dart +++ b/lib/components/button/gf_button.dart @@ -333,17 +333,6 @@ class _GFButtonState extends State { borderRadius: BorderRadius.circular(50.0), side: shapeBorder); } -// 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, diff --git a/lib/components/card/gf_card.dart b/lib/components/card/gf_card.dart index 3fd8ccc8..93ca4e30 100644 --- a/lib/components/card/gf_card.dart +++ b/lib/components/card/gf_card.dart @@ -1,8 +1,9 @@ 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'; +import 'package:ui_kit/components/image/gf_image_overlay.dart'; +import 'package:ui_kit/position/gf_position.dart'; enum GFCardType { basic, social, image} @@ -17,21 +18,24 @@ class GFCard extends StatelessWidget { this.padding = const EdgeInsets.all(12.0), this.margin, this.clipBehavior, - this.child, this.semanticContainer, - this.avatar, this.title, - this.subTitle, - this.subTitleTextStyle, - this.titleTextStyle, this.content, this.image, - this.icon, this.buttonBar, + this.imageOverlay, + this.titlePosition, + this.borderRadius, + this.border, + this.boxFit, + this.colorFilter }) : assert(elevation == null || elevation >= 0.0), assert(borderOnForeground != null), super(key: key); + /// [GFPosition] titlePosition helps to set titlebar at top of card + final GFPosition titlePosition; + /// The card's background color. final Color color; @@ -48,7 +52,6 @@ class GFCard extends StatelessWidget { final Clip clipBehavior; /// The empty space that surrounds the card. Defines the card's outer [Container.margin]. - final EdgeInsetsGeometry margin; /// The empty space that surrounds the card. Defines the card's outer [Container.margin].. @@ -58,26 +61,8 @@ class GFCard extends StatelessWidget { /// a collection of individual semantic nodes. final bool semanticContainer; - /// The widget below this widget in the tree. - final Widget child; - - /// gfAvatar used to create rounded user profile - final GFAvatar avatar; - - /// The title to display inside the [GFTitleBar]. see [Text] - final Widget title; - - /// The subTitle to display inside the [GFTitleBar]. see [Text] - final Widget subTitle; - - /// The icon to display inside the [GFTitleBar]. see [Icon] - final Widget icon; - - /// pass [style] as title's textStyle - final TextStyle titleTextStyle; - - /// pass [style] as subTitle's textStyle - final TextStyle subTitleTextStyle; + /// The title to display inside the [GFTitleBar]. see [GFTitleBar] + final GFTitleBar title; /// widget can be used to define content final Widget content; @@ -85,9 +70,26 @@ class GFCard extends StatelessWidget { /// image widget can be used final Image image; + /// overlay image [GFImageOverlay] widget can be used + final ImageProvider imageOverlay; + /// widget can be used to define buttons bar, see [GFButtonBar] final GFButtonBar buttonBar; + /// How the image should be inscribed into the box. + /// The default is [BoxFit.scaleDown] if [centerSlice] is null, and + /// [BoxFit.fill] if [centerSlice] is not null. + final BoxFit boxFit; + + /// A color filter to apply to the image before painting it. + final ColorFilter colorFilter; + + /// The corners of this [GFCard] are rounded by this [BorderRadius]. + final BorderRadiusGeometry borderRadius; + + /// A border to draw above the [GFCard]. + final Border border; + static const double _defaultElevation = 1.0; static const Clip _defaultClipBehavior = Clip.none; @@ -95,12 +97,31 @@ class GFCard extends StatelessWidget { Widget build(BuildContext context) { final CardTheme cardTheme = CardTheme.of(context); -// Text gfTitle = Text(title, -// style: titleTextStyle == null ? TextStyle(color: Colors.black87, fontSize: 18.0, fontWeight: FontWeight.w600) : titleTextStyle, -// ); -// Text gfSubTitle = Text(subTitle, -// style: subTitleTextStyle == null ? TextStyle(color: Colors.black45, fontSize: 14.0, fontWeight: FontWeight.w400) : subTitleTextStyle, -// ); + Widget cardChild = Column( + children: [ + titlePosition == GFPosition.start ? title != null ? title : Container() : image != null ? ClipRRect( + borderRadius: BorderRadius.vertical(top: Radius.circular(4.0)), + child: image, + ): Container(), + titlePosition == GFPosition.start ? image != null ? image : Container(): title != null ? title : Container(), + Padding( + padding: padding, + child: content, + ), + buttonBar, + ], + ); + + Widget overlayImage = GFImageOverlay( + width: MediaQuery.of(context).size.width, + child: cardChild, + color: color ?? cardTheme.color ?? Theme.of(context).cardColor, + image: imageOverlay, + boxFit: boxFit, + colorFilter: colorFilter, + border: border, + borderRadius: borderRadius ?? BorderRadius.all(Radius.circular(4.0)), + ); return Container( margin: margin ?? cardTheme.margin ?? const EdgeInsets.all(16.0), @@ -113,22 +134,7 @@ class GFCard extends StatelessWidget { ), borderOnForeground: borderOnForeground, clipBehavior: clipBehavior ?? cardTheme.clipBehavior ?? _defaultClipBehavior, - child: Column( - children: [ - GFTitleBar( - avatar: avatar, - title: title, - subTitle: subTitle, - icon: icon, - ), - image, - Padding( - padding: padding, - child: content, - ), - buttonBar, - ], - ), + child: imageOverlay == null ? cardChild : overlayImage ), ); } diff --git a/lib/components/image/gf_image_overlay.dart b/lib/components/image/gf_image_overlay.dart index dce79daa..d373e7a8 100644 --- a/lib/components/image/gf_image_overlay.dart +++ b/lib/components/image/gf_image_overlay.dart @@ -1,55 +1,80 @@ import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; -class GFAvatarTitleBar extends StatelessWidget { +class GFImageOverlay extends StatelessWidget { - const GFAvatarTitleBar({ + const GFImageOverlay({ Key key, + this.height, + this.width, this.color, this.padding, this.margin, this.image, - this.title, - this.subTitle, + this.child, + this.alignment, + this.borderRadius, + this.colorFilter, + this.boxFit, + this.border }) : super(key: key); - /// The card's background color. + /// define image's [double] height + final double height; + + /// define image's [double] width + final double width; + + /// The image background color. final Color color; - /// The empty space that surrounds the card. Defines the card's outer [Container.margin]. + /// The empty space that surrounds the card. Defines the image's outer [Container.margin]. final EdgeInsetsGeometry margin; - /// The empty space that surrounds the card. Defines the card's outer [Container.margin].. + /// The empty space that surrounds the card. Defines the image's outer [Container.margin].. final EdgeInsetsGeometry padding; - /// gfAvatar used to create rounded user profile - final Image image; + /// The [Image] widget used to display image + final ImageProvider image; + + /// The [child] contained by the container, used to display text over image + final Widget child; + + /// Align the [child] within the container. + final AlignmentGeometry alignment; + + /// How the image should be inscribed into the box. + /// The default is [BoxFit.scaleDown] if [centerSlice] is null, and + /// [BoxFit.fill] if [centerSlice] is not null. + final BoxFit boxFit; + + /// A color filter to apply to the image before painting it. + final ColorFilter colorFilter; - /// any widget can be used as title - final Widget title; + /// The corners of this [GFCard] are rounded by this [BorderRadius]. + final BorderRadiusGeometry borderRadius; - /// any widget can be used as subTitle - final Widget subTitle; + /// A border to draw above the [GFCard]. + final Border border; @override Widget build(BuildContext context) { return Container( - margin: margin ?? const EdgeInsets.all(16.0), - padding: padding ?? const EdgeInsets.all(12.0), - child: Container( - child: Center(child: Text('test'),), - height: 190.0, - width: MediaQuery.of(context).size.width - 100.0, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(5), - color: Colors.blue, - image: DecorationImage( - image: new NetworkImage( - "https://storage.googleapis.com/gd-wagtail-prod-assets/original_images/MDA2018_inline_03.jpg" - ), - fit: BoxFit.fill - ) + alignment: alignment, + height: height, + width: width, + margin: margin, + padding: padding, + child: child, + decoration: new BoxDecoration( + borderRadius: borderRadius, + border: border, + color: color, + image: new DecorationImage( + fit: boxFit, + colorFilter: colorFilter, + image: image ), ), ); diff --git a/pubspec.yaml b/pubspec.yaml index c2ae8625..210e5914 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,4 +1,4 @@ -name: UI_Kit +name: ui_kit description: A new Flutter package project. version: 0.0.1 author: test