diff --git a/example/lib/main.dart b/example/lib/main.dart index 705e258d..41d9a985 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,52 +52,123 @@ class _MyHomePageState extends State { crossAxisAlignment: CrossAxisAlignment.center, children: [ - Card( +// Card( +// child: Stack( +// alignment: AlignmentDirectional.center, +// children: [ +//// Container( +////// child: new Text( +////// 'Hello world', +////// style: Theme.of(context).textTheme.display4 +////// ), +//// decoration: new BoxDecoration( +//// color: const Color(0xff7c94b6), +//// image: new DecorationImage( +//// fit: BoxFit.cover, +//// colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.dstATop), +//// image: new NetworkImage( +//// 'http://www.allwhitebackground.com/images/2/2582-190x190.jpg', +//// ), +//// ), +//// ), +//// ), +// Image.network( +// 'http://www.allwhitebackground.com/images/2/2582-190x190.jpg', +// ), +// Column( +// mainAxisAlignment: MainAxisAlignment.spaceEvenly, +// crossAxisAlignment: CrossAxisAlignment.center, +// children: [ +// GFTitleBar( +// avatar: GFAvatar( +// child: Text("tb"), +// ), +// title: Text('title'), +// subTitle: Text('subtitle'), +// icon: GFIconButton( +// onPressed: null, +// type: GFType.transparent, +// icon: Icon(Icons.favorite_border), +// ), +// ), +// Text("Flutter " +// "Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS and Android in "), +// 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, ), +// ], +// ), +// +// ], +// ), +// ], +// ), +// ), +// + GFImageOverlay( + height: 200.0, + width: MediaQuery.of(context).size.width, + margin: EdgeInsets.all(16.0), + padding: EdgeInsets.all(16.0), child: Column( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + crossAxisAlignment: CrossAxisAlignment.center, children: [ - Text("czsd"), - Row( - children: [ - OutlineButton(onPressed: null, child: Text("dscds"), color: Colors.orange, ), - FlatButton(onPressed: null, child: Text("dchbvj")) - ], - ) + 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), ), - 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), - ), - ), +// 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( +// onPressed: null, +// type: GFType.transparent, +// icon: Icon(Icons.favorite_border), +// ), +// ), GFCard( + margin: EdgeInsets.all(16.0), +// color: Colors.pink, + titlePosition: GFPosition.end, avatar: GFAvatar( child: Text("tb"), ), title: Text('title'), subTitle: Text('subtitle'), icon: GFIconButton( + onPressed: null, icon: Icon(Icons.favorite_border), type: GFType.transparent, ), - image: Image.asset("lib/assets/pizza.jpeg"), +// image: Image.asset("lib/assets/pizza.jpeg"), +// imageOverlay: 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( @@ -105,124 +180,104 @@ class _MyHomePageState extends State { ), ), - - - - - -// GFCard( -// headertype: GFAtb(), -// po -// image -// overlaytext -// content: Text("content"), -// buttonbar: gfbb() -// ), -// -// gfbb( -// children[ // -// ] -// ) -// GFimageoverlay() - - 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), - ), - ), - 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..38861213 100644 --- a/lib/components/card/gf_card.dart +++ b/lib/components/card/gf_card.dart @@ -3,6 +3,8 @@ 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} @@ -28,10 +30,15 @@ class GFCard extends StatelessWidget { this.image, this.icon, this.buttonBar, + this.imageOverlay, + this.titlePosition }) : 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; @@ -85,6 +92,9 @@ class GFCard extends StatelessWidget { /// image widget can be used final Image image; + /// overlay image [GFImageOverlay] widget can be used + final Image imageOverlay; + /// widget can be used to define buttons bar, see [GFButtonBar] final GFButtonBar buttonBar; @@ -95,13 +105,6 @@ 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, -// ); - return Container( margin: margin ?? cardTheme.margin ?? const EdgeInsets.all(16.0), child: Material( @@ -113,22 +116,42 @@ class GFCard extends StatelessWidget { ), borderOnForeground: borderOnForeground, clipBehavior: clipBehavior ?? cardTheme.clipBehavior ?? _defaultClipBehavior, - child: Column( + child: Stack( children: [ - GFTitleBar( - avatar: avatar, - title: title, - subTitle: subTitle, - icon: icon, +// imageOverlay != null ? imageOverlay : null, + Column( + children: [ +// imageOverlay != null ? GFTitleBar( +// avatar: avatar, +// title: title, +// subTitle: subTitle, +// icon: icon, +// ) : null, + titlePosition == GFPosition.start ? GFTitleBar( + avatar: avatar, + title: title, + subTitle: subTitle, + icon: icon, + ) : ClipRRect( + borderRadius: BorderRadius.vertical(top: Radius.circular(4.0)), + child: image, + ), + titlePosition == GFPosition.start ? + image : GFTitleBar( + avatar: avatar, + title: title, + subTitle: subTitle, + icon: icon, + ), + Padding( + padding: padding, + child: content, + ), + buttonBar, + ], ), - image, - Padding( - padding: padding, - child: content, - ), - buttonBar, ], - ), + ) ), ); } diff --git a/lib/components/image/gf_image_overlay.dart b/lib/components/image/gf_image_overlay.dart index dce79daa..5c99375c 100644 --- a/lib/components/image/gf_image_overlay.dart +++ b/lib/components/image/gf_image_overlay.dart @@ -1,55 +1,81 @@ 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.constraints, + this.alignment, + this.decoration, + 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; + + /// The decoration to paint behind the [child]. + final Decoration decoration; - /// any widget can be used as title - final Widget title; + /// Additional constraints to apply to the child. + final BoxConstraints constraints; - /// any widget can be used as subTitle - final Widget subTitle; + final BoxFit boxFit; + final ColorFilter colorFilter; + final BorderRadius borderRadius; + 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 - ) + return Center( + child: new Container( + height: height, + width: width, + margin: margin, + padding: padding, + child: child, + decoration: new BoxDecoration( + borderRadius: borderRadius, + border: border, +// backgroundBlendMode: BlendMode.darken, + 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