From e6b59bcb6da5be34e1fa2f6847f810646048eedf Mon Sep 17 00:00:00 2001 From: deepikahr Date: Fri, 10 Jan 2020 11:43:19 +0530 Subject: [PATCH] changes done in components --- demo_app/lib/screens/badges.dart | 28 +- demo_app/lib/screens/toasts.dart | 6 +- example/lib/main.dart | 1171 ++++++++++++-------- lib/components/badge/gf_button_badge.dart | 43 +- lib/components/badge/gf_icon_badge.dart | 5 +- lib/components/button/gf_icon_button.dart | 43 +- lib/components/card/gf_card.dart | 4 +- lib/components/carousel/gf_carousel.dart | 3 - lib/components/image/gf_image_overlay.dart | 2 +- lib/components/list_tile/gf_list_tile.dart | 112 +- lib/components/tabs/gf_segment_tabs.dart | 20 +- lib/components/tabs/gf_tabBar.dart | 196 ++++ lib/components/tabs/gf_tabs.dart | 38 +- lib/shape/gf_icon_button_shape.dart | 1 + 14 files changed, 1088 insertions(+), 584 deletions(-) create mode 100644 lib/components/tabs/gf_tabBar.dart create mode 100644 lib/shape/gf_icon_button_shape.dart diff --git a/demo_app/lib/screens/badges.dart b/demo_app/lib/screens/badges.dart index dfdc20c4..5beb7ca3 100644 --- a/demo_app/lib/screens/badges.dart +++ b/demo_app/lib/screens/badges.dart @@ -10,6 +10,7 @@ import 'package:ui_kit/components/button/gf_icon_button.dart'; import 'package:ui_kit/position/gf_position.dart'; import 'package:ui_kit/shape/gf_badge_shape.dart'; import 'package:ui_kit/shape/gf_button_shape.dart'; +import 'package:ui_kit/shape/gf_icon_button_shape.dart'; import 'package:ui_kit/size/gf_size.dart'; import 'package:ui_kit/types/gf_typography_type.dart'; import 'package:ui_kit/types/gf_type.dart'; @@ -562,9 +563,8 @@ class _BadgesState extends State { mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ GFIconBadge( - onPressed: null, child: GFIconButton( - shape: GFButtonShape.pills, + shape: GFIconButtonShape.pills, color: GFColor.success, type: GFType.solid, onPressed: null, @@ -576,9 +576,8 @@ class _BadgesState extends State { size: GFSize.small, )), GFIconBadge( - onPressed: null, child: GFIconButton( - shape: GFButtonShape.square, + shape: GFIconButtonShape.square, color: GFColor.primary, type: GFType.solid, onPressed: null, @@ -590,9 +589,8 @@ class _BadgesState extends State { size: GFSize.small, )), GFIconBadge( - onPressed: null, child: GFIconButton( - shape: GFButtonShape.pills, + shape: GFIconButtonShape.pills, color: GFColor.danger, type: GFType.solid, onPressed: null, @@ -604,9 +602,8 @@ class _BadgesState extends State { size: GFSize.small, )), GFIconBadge( - onPressed: null, child: GFIconButton( - shape: GFButtonShape.standard, + shape: GFIconButtonShape.standard, type: GFType.solid, color: GFColor.warning, onPressed: null, @@ -636,9 +633,8 @@ class _BadgesState extends State { mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ GFIconBadge( - onPressed: null, child: GFIconButton( - shape: GFButtonShape.pills, + shape: GFIconButtonShape.pills, onPressed: null, icon: Icon(Icons.mail), ), @@ -648,9 +644,8 @@ class _BadgesState extends State { size: GFSize.small, )), GFIconBadge( - onPressed: null, child: GFIconButton( - shape: GFButtonShape.square, + shape: GFIconButtonShape.square, onPressed: null, icon: Icon(Icons.mail), ), @@ -661,9 +656,8 @@ class _BadgesState extends State { size: GFSize.small, )), GFIconBadge( - onPressed: null, child: GFIconButton( - shape: GFButtonShape.pills, + shape: GFIconButtonShape.pills, onPressed: null, icon: Icon(Icons.mail), ), @@ -673,9 +667,8 @@ class _BadgesState extends State { size: GFSize.small, )), GFIconBadge( - onPressed: null, child: GFIconButton( - shape: GFButtonShape.standard, + shape: GFIconButtonShape.standard, onPressed: null, icon: Icon(Icons.mail), ), @@ -704,7 +697,6 @@ class _BadgesState extends State { mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ GFIconBadge( - onPressed: null, child: GFIconButton( size: GFSize.large, onPressed: null, @@ -716,7 +708,6 @@ class _BadgesState extends State { size: GFSize.small, )), GFIconBadge( - onPressed: null, child: GFIconButton( size: GFSize.medium, onPressed: null, @@ -728,7 +719,6 @@ class _BadgesState extends State { size: GFSize.small, )), GFIconBadge( - onPressed: null, child: GFIconButton( size: GFSize.small, onPressed: null, diff --git a/demo_app/lib/screens/toasts.dart b/demo_app/lib/screens/toasts.dart index fd6f6a5d..8b02503a 100644 --- a/demo_app/lib/screens/toasts.dart +++ b/demo_app/lib/screens/toasts.dart @@ -2,7 +2,7 @@ import 'package:flutter/material.dart'; import 'package:ui_kit/colors/gf_color.dart'; import 'package:ui_kit/components/button/gf_button.dart'; import 'package:ui_kit/components/card/gf_card.dart'; -import 'package:ui_kit/components/header/gf_typography.dart'; +import 'package:ui_kit/components/typography/gf_typography.dart'; import 'package:ui_kit/components/toast/gf_toast.dart'; import 'package:ui_kit/types/gf_typography_type.dart'; import 'package:ui_kit/types/gf_type.dart'; @@ -29,9 +29,9 @@ class _ToastsState extends State { GFCard( content: Column( children: [ - GFHeader( + GFTypography( text: 'Toast', - type: GFHeadingType.typo6, + type: GFTypographyType.typo6, ), SizedBox( height: 10, diff --git a/example/lib/main.dart b/example/lib/main.dart index 7df22efa..97bc01a7 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -4,6 +4,7 @@ import 'package:ui_kit/components/button/gf_button.dart'; import 'package:ui_kit/components/badge/gf_button_badge.dart'; import 'package:ui_kit/components/avatar/gf_avatar.dart'; import 'package:ui_kit/components/badge/gf_badge.dart'; +import 'package:ui_kit/components/list/gf_list.dart'; import 'package:ui_kit/components/tabs/gf_segment_tabs.dart'; import 'package:ui_kit/size/gf_size.dart'; import 'package:ui_kit/types/gf_type.dart'; @@ -27,6 +28,10 @@ import 'package:ui_kit/components/list_tile/gf_list_tile.dart'; import 'package:ui_kit/position/gf_position.dart'; import 'package:ui_kit/components/button/gf_button_bar.dart'; import 'package:ui_kit/components/badge/gf_icon_badge.dart'; +import 'package:ui_kit/shape/gf_icon_button_shape.dart'; +import 'package:ui_kit/components/tabs/gf_tabBar.dart'; +import 'package:ui_kit/components/typography/gf_typography.dart'; +import 'package:ui_kit/types/gf_typography_type.dart'; final List imageList = [ "https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg", @@ -175,8 +180,11 @@ class _MyHomePageState extends State ), // backgroundColor: Colors.teal, body: -// GFTabBarView(controller: tabController, children: [ -// Container(color: Colors.red), +// GFTabBarView( +// height: 200.0, +// controller: tabController, +// children: [ +// Container(color: Colors.red,), // Container(color: Colors.green), // Container(color: Colors.blue) // ]), @@ -185,29 +193,218 @@ class _MyHomePageState extends State mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ - - GFButton( - text: "whatsapp", - icon: Icon(Icons.directions_bike), + + GFCard( + content: Column( + children: [ + GFTypography( + text: 'GF Header Typo1', + type: GFTypographyType.typo1, + showDivider: false, + ), + GFTypography( + text: 'GF Header Typo2', + type: GFTypographyType.typo2, + showDivider: false, + ), + GFTypography( + text: 'GF Header Typo3', + type: GFTypographyType.typo3, + showDivider: false, + ), + GFTypography( + text: 'GF Header Typo4', + type: GFTypographyType.typo4, + showDivider: false, + ), + GFTypography( + text: 'GF Header Typo5', + type: GFTypographyType.typo5, + showDivider: false, + ), + GFTypography( + text: 'GF Header Typo6', + type: GFTypographyType.typo6, + showDivider: false, + ), + ], + ), ), - GFButton( - text: "linkedin", - icon: Icon(Icons.directions_bike), + GFCard( + content: Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + GFTypography( + text: 'GF Header Typo1', + type: GFTypographyType.typo1, + backgroundImage: NetworkImage( + 'https://cdn.pixabay.com/photo/2019/12/25/16/49/happy-new-year-4718894_960_720.png'), + ), + SizedBox( + height: 40, + ), + GFTypography( + icon: GFAvatar(), + text: 'GF Header Typo2', + type: GFTypographyType.typo2, + dividerColor: GFColor.primary, + dividerAlignment: Alignment.center, + ), + SizedBox( + height: 40, + ), + GFTypography( + icon: Icon(Icons.insert_emoticon), + text: 'GF Header Typo3', + type: GFTypographyType.typo3, + dividerWidth: 150, + dividerColor: GFColor.warning, + dividerBorderRadius: BorderRadius.all(Radius.circular(0)), + ), + SizedBox( + height: 40, + ), + GFTypography( + text: 'GF Header Typo4', + type: GFTypographyType.typo4, + dividerWidth: 345, + icon: Image.network( + 'https://cdn.pixabay.com/photo/2016/12/15/03/27/cocoa-1908020_960_720.jpg', + width: 50, + )), + SizedBox( + height: 40, + ), + GFTypography( + text: 'GF Header Typo5', + type: GFTypographyType.typo5, + dividerColor: GFColor.alt, + ), + SizedBox( + height: 40, + ), + GFTypography( + text: 'GF Header Typo6', + type: GFTypographyType.typo6, + dividerWidth: 20, + ), + ], + )), + + + +// GFButton( +// onPressed: (){}, +// text: "whatsapp", +// icon: Icon(Icons.directions_bike), +// ), +// +// GFButton( +// text: "linkedin", +// icon: Icon(Icons.directions_bike), +// ), + + GFListTile( +// padding: EdgeInsets.all(8.0), +// color: Colors.redAccent, +// avatar: GFAvatar( +// child: Text("tb"), +// ), + title: Text('title'), +// subTitle: Text('subtitle'), + icon: Text("99"), +// dividerColor: Colors.blue, +// dividerEndIndent: 20.0, +// dividerHeight: 2.0, +// dividerIndent: 30.0, +// dividerThickness: 5.0, +// showDivider: false, + ), + + + GFListTile( + avatar: GFAvatar( + shape: GFAvatarShape.standard, + ), + title: GFTypography( + text: 'List tile', + type: GFTypographyType.typo5, + showDivider: false, + ), + subTitle: Text('Lorem ipsum', style: TextStyle(color: getGFColor(GFColor.dark)),), + + description: Text('Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ' + 'sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ', + style: TextStyle(fontSize: 13, color: getGFColor(GFColor.secondary))), + showDivider: true, + icon: GFIconButton( + onPressed: null, + type: GFType.transparent, + icon: Icon(Icons.favorite_border), + ), + ), + + + + GFCard( + content: GFListTile( + avatar: GFAvatar( + shape: GFAvatarShape.standard, + ), + title: GFTypography( + text: 'List tile', + type: GFTypographyType.typo5, + showDivider: false, + ), + subTitle: Text('Lorem ipsum', style: TextStyle(color: getGFColor(GFColor.dark)),), + + description: Text('Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ', + style: TextStyle(fontSize: 13, color: getGFColor(GFColor.secondary))), + showDivider: false, + ), + ), + + GFCard( + content: GFImageOverlay( + height: 200.0, + width: MediaQuery.of(context).size.width, + child: Text("Dcs"), +// color: color ?? cardTheme.color ?? Theme.of(context).cardColor, + image: AssetImage("lib/assets/food.jpeg"), + boxFit: BoxFit.fill, + colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.67), BlendMode.darken), +// border: border, +// borderRadius: borderRadius ?? BorderRadius.all(Radius.circular(4.0)), + ), + ), + + + GFCard( + content: Container( + width: 190.0, + height: 190.0, + decoration: new BoxDecoration( + shape: BoxShape.circle, + image: new DecorationImage( + fit: BoxFit.fill, + image: AssetImage("lib/assets/food.jpeg",), + ) + )), ), GFButtonBadge( onPressed: (){}, -// position: GFIconPosition.start, +// position: GFPosition.end, // 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: 'goodiesdxs', -// color: GFColor.danger, + text: 'goodiesdxs', +// color: GFColor.success, // shape: GFButtonShape.pills, // type: GFType.outline2x, // size: GFSize.small, - child: Text("der"), icon: GFBadge( child: Text("12"), // color: GFColor.dark, @@ -219,96 +416,96 @@ class _MyHomePageState extends State ), ), - GFSocialButton( - text: 'goodies', - onPressed: (){}, -// icon: GFBadge( -// child: Text("12"), -// color: GFColor.dark, -//// shape: GFBadgeShape.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), -// ), - type: GFType.outline2x, - shape: GFButtonShape.pills, -// blockButton: true, - fullWidthButton: true, - - ), - - GFButton( -// icon: GFBadge( -// child: Text("12"), -// color: GFColor.dark, -//// shape: GFBadgeShape.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), -// ), - text: 'goodies', - onPressed: (){}, -// textColor: GFColor.danger, -// icon: Icon(Icons.access_alarms), -// hoverColor: GFColor.dark, - color: GFColor.secondary, -// focusColor: GFColor.danger, - type: GFType.solid, - shape: GFButtonShape.pills, - buttonBoxShadow: true, -// boxShadow: BoxShadow( -// color: Colors.pink, -// blurRadius: 2.0, -// spreadRadius: 1.0, -// offset: Offset.zero, -// ), -// splashColor: GFColor.warning, -// highlightColor: GFColor.alt, -// size: GFSize.large, -// disabledColor: GFColor.dark, -// disabledTextColor: GFColor.light, - blockButton: true, -// fullWidthButton: true, -// 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: GFButtonShape.pills, -// size: GFSize.large, - buttonBoxShadow: true, - color: GFColor.secondary, -// 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), - ), - - RaisedButton( - child: Text('goodiesMaterialButton button '), - onPressed: (){}, -// color: Colors.blueGrey, -// hoverColor: Colors.blueGrey, -// focusColor: Colors.teal, -// splashColor: Colors.amber, -// highlightColor: Colors.cyan, - ), - - GFAvatar( - radius: 80.0, - backgroundImage: NetworkImage("https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg"), - ), - +// GFSocialButton( +// text: 'social goodies', +// onPressed: (){}, +//// icon: GFBadge( +//// child: Text("12"), +//// color: GFColor.dark, +////// shape: GFBadgeShape.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), +//// ), +// type: GFType.outline2x, +// shape: GFButtonShape.pills, +//// blockButton: true, +// fullWidthButton: true, +// +// ), +// +// GFButton( +//// icon: GFBadge( +//// child: Text("12"), +//// color: GFColor.dark, +////// shape: GFBadgeShape.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), +//// ), +// text: 'goodies', +// onPressed: (){}, +//// textColor: GFColor.danger, +//// icon: Icon(Icons.access_alarms), +//// hoverColor: GFColor.dark, +// color: GFColor.secondary, +//// focusColor: GFColor.danger, +// type: GFType.solid, +// shape: GFButtonShape.pills, +// buttonBoxShadow: true, +//// boxShadow: BoxShadow( +//// color: Colors.pink, +//// blurRadius: 2.0, +//// spreadRadius: 1.0, +//// offset: Offset.zero, +//// ), +//// splashColor: GFColor.warning, +//// highlightColor: GFColor.alt, +//// size: GFSize.large, +//// disabledColor: GFColor.dark, +//// disabledTextColor: GFColor.light, +// blockButton: true, +//// fullWidthButton: true, +//// 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: GFButtonShape.pills, +//// size: GFSize.large, +// buttonBoxShadow: true, +// color: GFColor.secondary, +//// 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), +// ), +// +// RaisedButton( +// child: Text('goodiesMaterialButton button '), +// onPressed: (){}, +//// color: Colors.blueGrey, +//// hoverColor: Colors.blueGrey, +//// focusColor: Colors.teal, +//// splashColor: Colors.amber, +//// highlightColor: Colors.cyan, +// ), +// +// GFAvatar( +// radius: 80.0, +// backgroundImage: NetworkImage("https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg"), +// ), +// GFSegmentTabs( tabController: tabController, // height: 38.0, @@ -343,319 +540,341 @@ class _MyHomePageState extends State // border: Border.all(color: Colors.orange, width: 2.0), // borderRadius: BorderRadius.circular(50.0) ), - - GFTabBarView( - controller: tabController, - height: 400.0, - children: [ - Container(color: Colors.red), - Container(color: Colors.green), - Container(color: Colors.blue) - ] - ), - - GFItemsCarousel( - rowCount: 3, - children: imageList.map( - (url) { - return Container( - margin: EdgeInsets.all(5.0), - child: ClipRRect( - borderRadius: BorderRadius.all(Radius.circular(5.0)), - child: Image.network( - url, - fit: BoxFit.cover, - width: 1000.0 - ), - ), - ); - }, - ).toList(), - ), - - GFCarousel( - rowCount: 3, - pagerSize: 12.0, - activeIndicator: Colors.pink, - passiveIndicator: Colors.pink.withOpacity(0.4), - viewportFraction: 1.0, - aspectRatio: 2.0, - autoPlay: true, - enlargeMainPage: true, - pagination: true, - items: imageList.map( - (url) { - return Container( - margin: EdgeInsets.all(5.0), - child: ClipRRect( - borderRadius: BorderRadius.all(Radius.circular(5.0)), - child: Image.network( - url, - fit: BoxFit.cover, - width: 1000.0 - ), - ), - ); - }, - ).toList(), - onPageChanged: (index) { - setState(() { - index; - }); - }, - ), - - - GFTabs( - initialIndex: 0, - length: 3, - tabs: [ - GFButton( - onPressed: null, - child: Text("share"), - icon: Icon(Icons.share), - buttonBoxShadow: true, - ), - Tab( - icon: Icon(Icons.error), - child: Text( - "Orders", - ), - ), - Tab( - child: Text( - "Pastry", - ), - ), - ], - tabBarView: GFTabBarView( - children: [ - Container( - color: Colors.red, - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - - GFToast( - child: Text("sdc"), - backgroundColor: Colors.pink, - button: GFButton( - text: 'dsx', - onPressed: (){ - print("fdsc"); - }, - ), - ), - RawMaterialButton( - onPressed: null, - child: Text("fv"), - ), - FlatButton(onPressed: null, child: Text("cds")), - Icon(Icons.directions_railway), - GFButton( - onPressed: null, - child: Text("share"), - icon: Icon(Icons.share), - shape: GFButtonShape.pills, - type: GFType.transparent, - ), - ], - ), - ), - Icon(Icons.directions_car), - Icon(Icons.directions_transit), - ], - ), -// indicatorColor: Colors.teal, -// indicatorSize: TabBarIndicatorSize.label, -// labelColor: Colors.lightGreen, -// unselectedLabelColor: Colors.black, -// labelStyle: TextStyle( -// fontWeight: FontWeight.w500, -// fontSize: 13.0, -// color: Colors.deepOrange, -// fontFamily: 'OpenSansBold', +// +// GFTabBarView( +// controller: tabController, +// height: 400.0, +// children: [ +// Container(color: Colors.red), +// Container(color: Colors.green), +// Container(color: Colors.blue) +// ] // ), -// unselectedLabelStyle: TextStyle( -// fontWeight: FontWeight.w500, -// fontSize: 13.0, -// color: Colors.black, -// fontFamily: 'OpenSansBold', +// +// GFItemsCarousel( +// rowCount: 3, +// children: imageList.map( +// (url) { +// return Container( +// margin: EdgeInsets.all(5.0), +// child: ClipRRect( +// borderRadius: BorderRadius.all(Radius.circular(5.0)), +// child: Image.network( +// url, +// fit: BoxFit.cover, +// width: 1000.0 +// ), +// ), +// ); +// }, +// ).toList(), // ), - ), - - GFCarousel( - autoPlay: true, - viewportFraction: 1.0, - aspectRatio: MediaQuery.of(context).size.aspectRatio, - items: imageList.map( - (url) { - return Container( - margin: EdgeInsets.all(5.0), - child: ClipRRect( - borderRadius: BorderRadius.all(Radius.circular(5.0)), - child: Image.network( - url, - fit: BoxFit.cover, - width: 1000.0, - ), - ), - ); - }, - ).toList(), - onPageChanged: (index) { - setState(() { - index; - }); - }, - ), - GFCard( - boxFit: BoxFit.cover, - colorFilter: new ColorFilter.mode( - Colors.black.withOpacity(0.67), BlendMode.darken), - image: Image.asset("lib/assets/food.jpeg"), +// +// GFCarousel( +//// pagerSize: 12.0, +//// activeIndicator: Colors.pink, +//// passiveIndicator: Colors.pink.withOpacity(0.4), +//// viewportFraction: 1.0, +//// aspectRatio: 2.0, +//// autoPlay: true, +//// enlargeMainPage: true, +//// pagination: true, +// items: imageList.map( +// (url) { +// return Container( +// margin: EdgeInsets.all(5.0), +// child: ClipRRect( +// borderRadius: BorderRadius.all(Radius.circular(5.0)), +// child: Image.network( +// url, +// fit: BoxFit.cover, +// width: 1000.0 +// ), +// ), +// ); +// }, +// ).toList(), +// onPageChanged: (index) { +// setState(() { +// index; +// }); +// }, +// ), +// +// +// GFTabs( +//// height: 100.0, +//// tabBarHeight: 52.0, +// initialIndex: 0, +// length: 3, +// tabs: [ +// GFButton( +// onPressed: null, +// child: Text("share"), +// icon: Icon(Icons.share), +// buttonBoxShadow: true, +// ), +// Tab( +// icon: Icon(Icons.error), +// child: Text( +// "Orders", +// ), +// ), +// Tab( +// child: Text( +// "Pastry", +// ), +// ), +// ], +// tabBarView: GFTabBarView( +// children: [ +// Container( +// color: Colors.red, +// child: Column( +// mainAxisAlignment: MainAxisAlignment.center, +// crossAxisAlignment: CrossAxisAlignment.center, +// children: [ +// +// GFToast( +// child: Text("sdc"), +// backgroundColor: Colors.pink, +// button: GFButton( +// text: 'dsx', +// onPressed: (){ +// print("fdsc"); +// }, +// ), +// ), +// RawMaterialButton( +// onPressed: null, +// child: Text("fv"), +// ), +// FlatButton(onPressed: null, child: Text("cds")), +// Icon(Icons.directions_railway), +// GFButton( +// onPressed: null, +// child: Text("share"), +// icon: Icon(Icons.share), +// shape: GFButtonShape.pills, +// type: GFType.transparent, +// ), +// ], +// ), +// ), +// Icon(Icons.directions_car), +// Icon(Icons.directions_transit), +// ], +// ), +//// indicatorColor: Colors.teal, +//// indicatorSize: TabBarIndicatorSize.label, +//// labelColor: Colors.lightGreen, +//// unselectedLabelColor: Colors.black, +//// labelStyle: TextStyle( +//// fontWeight: FontWeight.w500, +//// fontSize: 13.0, +//// color: Colors.deepOrange, +//// fontFamily: 'OpenSansBold', +//// ), +//// unselectedLabelStyle: TextStyle( +//// fontWeight: FontWeight.w500, +//// fontSize: 13.0, +//// color: Colors.black, +//// fontFamily: 'OpenSansBold', +//// ), +// ), +// +// GFCarousel( +// autoPlay: true, +// viewportFraction: 1.0, +// aspectRatio: MediaQuery.of(context).size.aspectRatio, +// items: imageList.map( +// (url) { +// return Container( +// margin: EdgeInsets.all(5.0), +// child: ClipRRect( +// borderRadius: BorderRadius.all(Radius.circular(5.0)), +// child: Image.network( +// url, +// fit: BoxFit.cover, +// width: 1000.0, +// ), +// ), +// ); +// }, +// ).toList(), +// onPageChanged: (index) { +// setState(() { +// index; +// }); +// }, +// ), +// GFCard( +// boxFit: BoxFit.fill, +// colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.67), BlendMode.darken), +//// image: Image.asset("lib/assets/food.jpeg",), // imageOverlay: AssetImage("lib/assets/food.jpeg"), - titlePosition: GFPosition.end, - title: GFListTile( - 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 ", - style: TextStyle(color: Colors.grey), - ), - 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, - ), - ], - ), - ), - 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( - color: Colors.teal, - onPressed: (){}, - child: Text("share"), - icon: Icon(Icons.share), - type: GFType.outline, - ), - ], - ), - - - GFListTile( - avatar: GFAvatar( - child: Text("tb"), - ), - title: Text('title'), - subTitle: Text('subtitle'), - icon: GFIconButton( - onPressed: null, - type: GFType.transparent, - icon: Icon(Icons.favorite_border), - ), - ), - 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), - ), - ], - ), -// color: Colors.orange, - image: AssetImage("lib/assets/food.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), - ), +// titlePosition: GFPosition.end, +// title: GFListTile( +// 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" +// "Flutter Flutter is Google's mobile UI framework for crafting", +// style: TextStyle(color: Colors.grey), +// ), +// 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, +// ), +// ], +// ), +// ), +// 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( +// color: Colors.teal, +// onPressed: (){}, +// child: Text("share"), +// icon: Icon(Icons.share), +// type: GFType.outline, +// ), +// ], +// ), +// +// +// GFListTile( +// avatar: GFAvatar( +// child: Text("tb"), +// ), +// title: Text('title'), +// subTitle: Text('subtitle'), +// icon: GFIconButton( +// onPressed: null, +// type: GFType.transparent, +// icon: Icon(Icons.favorite_border), +// ), +// ), +// 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), +// ), +// 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/food.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), +// ), GFAvatar( // radius: 20.0, // maxRadius: 50, @@ -668,23 +887,28 @@ class _MyHomePageState extends State // // foregroundColor: Colors.deepOrangeAccent, // - shape: GFAvatarShape.standard, +// shape: GFAvatarShape.circle, // // size: GFSize.medium, // // borderRadius: BorderRadius.circular(20.0), ), GFIconBadge( - onPressed: null, - child: GFIconButton( - onPressed: null, - icon: Icon(Icons.ac_unit), + child: +// GFIconButton( +// onPressed: null, +// icon: Icon(Icons.ac_unit), +// size: GFSize.large, +// ), + GFAvatar( + child: Text("sefv"), + size: GFSize.small, ), counterChild: GFBadge( text: '12', -// color: GFColor.dark -////, +// color: GFColor.dark, +// // shape: GFBadgeShape.circle, // // size: GFSize.small, @@ -702,49 +926,11 @@ class _MyHomePageState extends State onPressed: null, icon: Icon(Icons.ac_unit), // iconSize: 12.0, - type: GFType.solid, - shape: GFButtonShape.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), - ), - - GFBadge( - text: '12', -// color: GFColor.dark, - shape: GFBadgeShape.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: GFButtonShape.pills, - text: 'goodies', - onPressed: () { - print('dddddddddd'); - }, - hoverColor: Colors.orange, - focusColor: Colors.teal, -// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), +// type: GFType.solid, +// shape: GFIconButtonShape.pills, // 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, +// color: GFColor.warning, // boxShadow: BoxShadow( // color: Colors.pink, // blurRadius: 2.0, @@ -754,9 +940,72 @@ class _MyHomePageState extends State // 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), ), +// +// GFBadge( +// text: '12', +//// color: GFColor.dark, +// shape: GFBadgeShape.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: GFButtonShape.pills, +// text: 'goodies', +// onPressed: () { +// print('dddddddddd'); +// }, +// hoverColor: Colors.orange, +// focusColor: Colors.teal, +//// 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), +// ), ], ), ), + bottomNavigationBar: + GFTabBar( + initialIndex: 0, + length: 3, + controller: tabController, + tabs: [ + GFButton( + onPressed: null, + child: Text("share"), + icon: Icon(Icons.share), + buttonBoxShadow: true, + ), + Tab( + icon: Icon(Icons.error), + child: Text( + "Orders", + ), + ), + Tab( + child: Text( + "Pastry", + ), + ), + ], + ), ); } } diff --git a/lib/components/badge/gf_button_badge.dart b/lib/components/badge/gf_button_badge.dart index 9346f863..39c6a0c6 100644 --- a/lib/components/badge/gf_button_badge.dart +++ b/lib/components/badge/gf_button_badge.dart @@ -1,6 +1,4 @@ -import 'dart:math' as math; import 'package:flutter/foundation.dart'; -import 'package:flutter/gestures.dart'; import 'package:flutter/rendering.dart'; import 'package:flutter/widgets.dart'; import 'package:flutter/material.dart'; @@ -11,7 +9,8 @@ import 'package:ui_kit/types/gf_type.dart'; import 'package:ui_kit/position/gf_position.dart'; import 'package:ui_kit/colors/gf_color.dart'; -class GFButtonBadge extends GFButton{ +class GFButtonBadge extends GFButton { + /// Called when the button is tapped or otherwise activated. final VoidCallback onPressed; @@ -66,9 +65,6 @@ class GFButtonBadge extends GFButton{ /// Defines the duration of animated changes for [shape] and [elevation]. final Duration animationDuration; - /// Typically the button's label. - final Widget child; - /// Whether the button is enabled or disabled. bool get enabled => onPressed != null; @@ -128,9 +124,6 @@ class GFButtonBadge extends GFButton{ /// text of type [String] is alternative to child. text will get priority over child final String text; - /// icon of type [Widget] - final Widget icon; - /// icon type of [GFIconPosition] i.e, start, end final GFPosition position; @@ -174,7 +167,10 @@ class GFButtonBadge extends GFButton{ /// * [enabled], which is true if the button is enabled. final VoidCallback onLongPress; - /// Create buttons of all types. check out [GFIconButton] for icon buttons, and [GFBadge] for badges + /// Can be used to display [GFCounter], [Icons] inside button design + final Widget icon; + + /// Create buttons badges of all types. check out [GFIconButton] for icon buttons, and [GFBadge] for badges const GFButtonBadge( {Key key, @required this.onPressed, @@ -199,7 +195,6 @@ class GFButtonBadge extends GFButton{ this.focusNode, this.autofocus = false, MaterialTapTargetSize materialTapTargetSize, - this.child, this.type = GFType.solid, this.shape = GFButtonShape.standard, this.color = GFColor.primary, @@ -208,7 +203,6 @@ class GFButtonBadge extends GFButton{ this.size = GFSize.medium, this.borderSide, this.text, - this.icon, this.blockButton, this.fullWidthButton, this.colorScheme, @@ -216,6 +210,7 @@ class GFButtonBadge extends GFButton{ this.onLongPress, this.disabledColor, this.disabledTextColor, + this.icon, }) : materialTapTargetSize = materialTapTargetSize ?? MaterialTapTargetSize.padded, @@ -230,13 +225,14 @@ class GFButtonBadge extends GFButton{ assert(clipBehavior != null), assert(autofocus != null); + @override Widget build(BuildContext context) { return ConstrainedBox( constraints: BoxConstraints(minHeight: 26.0, minWidth: 98.0), child: Container( - height: this.size, + height: getGFSize(size), child: GFButton( onPressed: onPressed, onHighlightChanged: onHighlightChanged, @@ -258,13 +254,13 @@ class GFButtonBadge extends GFButton{ clipBehavior: clipBehavior, focusNode: focusNode, autofocus : autofocus , - child: child, - type :GFType.solid, - shape :GFButtonShape.standard, - color :GFColor.primary, +// child: child, + type : type, + shape : shape, + color : color, textColor: textColor, - position :GFPosition.start, - size :GFSize.medium, + position : position, + size : getGFSize(size), borderSide: borderSide, text: text, icon: icon, @@ -275,14 +271,13 @@ class GFButtonBadge extends GFButton{ ), ), ); - } } -// + //class GFButtonBadge extends StatefulWidget { // /// Called when the badge is tapped or otherwise activated. // final VoidCallback onPressed; @@ -319,7 +314,7 @@ class GFButtonBadge extends GFButton{ // // /// child of type [Widget] is alternative to child. text will get priority over child. // /// You can use [GFBadge] for compatibility. -// final Widget icon; +// final Widget counter; // // /// icon type of [GFPosition] i.e, start, end // final GFPosition position; @@ -339,7 +334,7 @@ class GFButtonBadge extends GFButton{ // this.size = GFSize.medium, // this.borderSide, // @required this.text, -// @required this.icon, +// @required this.counter, // }) : assert(shape != null, 'Badge shape can not be null'), // assert(padding != null), // super(key: key); @@ -389,7 +384,7 @@ class GFButtonBadge extends GFButton{ // position: this.position, // size: this.size, // borderShape: widget.borderShape, -// icon: widget.icon, +// icon: widget.counter, // ), // ), // ); diff --git a/lib/components/badge/gf_icon_badge.dart b/lib/components/badge/gf_icon_badge.dart index 88f9a269..f0329c2f 100644 --- a/lib/components/badge/gf_icon_badge.dart +++ b/lib/components/badge/gf_icon_badge.dart @@ -2,12 +2,10 @@ import 'package:flutter/material.dart'; import 'package:ui_kit/components/button/gf_icon_button.dart'; class GFIconBadge extends StatefulWidget { - /// Called when the badge is tapped or otherwise activated. - final VoidCallback onPressed; /// child of type [GFIconButton] is used to show icon. /// Use [Icon] widget for compatibility. - final GFIconButton child; + final Widget child; /// widget of type [Widget] is used to show counter to the top right corner of child. /// You can use [GFBadge] for compatibility. @@ -19,7 +17,6 @@ class GFIconBadge extends StatefulWidget { /// Create badges of all types, check out [GFBadge] for button badges and [GFIconBadge] for icon badges. const GFIconBadge({ Key key, - @required this.onPressed, this.padding = const EdgeInsets.symmetric(horizontal: 8.0), @required this.child, @required this.counterChild, diff --git a/lib/components/button/gf_icon_button.dart b/lib/components/button/gf_icon_button.dart index 289e75c0..33473552 100644 --- a/lib/components/button/gf_icon_button.dart +++ b/lib/components/button/gf_icon_button.dart @@ -2,7 +2,7 @@ import 'dart:math' as math; import 'package:flutter/foundation.dart'; import 'package:flutter/widgets.dart'; import 'package:flutter/material.dart'; -import 'package:ui_kit/shape/gf_button_shape.dart'; +import 'package:ui_kit/shape/gf_icon_button_shape.dart'; import 'package:ui_kit/size/gf_size.dart'; import 'package:ui_kit/types/gf_type.dart'; import 'package:ui_kit/colors/gf_color.dart'; @@ -29,8 +29,8 @@ class GFIconButton extends StatefulWidget { /// Button type of [GFType] i.e, solid, outline, outline2x transparent final GFType type; - /// Button type of [GFButtonShape] i.e, standard, pills, square, shadow, icons - final GFButtonShape shape; + /// Button type of [GFIconButtonShape] i.e, standard, pills, square, shadow, icons + final GFIconButtonShape shape; /// Pass [GFColor] or [Color] final dynamic color; @@ -88,7 +88,7 @@ class GFIconButton extends StatefulWidget { this.autofocus = false, this.tooltip, this.type = GFType.solid, - this.shape = GFButtonShape.standard, + this.shape = GFIconButtonShape.standard, this.color = GFColor.primary, this.borderShape, this.boxShadow, @@ -111,7 +111,7 @@ class _GFIconButtonState extends State { Color color; Function onPressed; GFType type; - GFButtonShape shape; + GFIconButtonShape shape; BoxShadow boxShadow; double height; double width; @@ -178,15 +178,14 @@ class _GFIconButtonState extends State { ShapeBorder shape; - if (this.shape == GFButtonShape.pills) { - shape = RoundedRectangleBorder( - borderRadius: BorderRadius.circular(20.0), side: shapeBorder); - } else if (this.shape == GFButtonShape.square) { - shape = RoundedRectangleBorder( - borderRadius: BorderRadius.circular(0.0), side: shapeBorder); - } else if (this.shape == GFButtonShape.standard) { - shape = RoundedRectangleBorder( - borderRadius: BorderRadius.circular(3.0), side: shapeBorder); + if (this.shape == GFIconButtonShape.pills) { + shape = RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0), side: shapeBorder); + } else if (this.shape == GFIconButtonShape.square) { + shape = RoundedRectangleBorder(borderRadius: BorderRadius.circular(0.0), side: shapeBorder); + } else if (this.shape == GFIconButtonShape.standard) { + shape = RoundedRectangleBorder(borderRadius: BorderRadius.circular(3.0), side: shapeBorder); + } else if (this.shape == GFIconButtonShape.circle) { + shape = RoundedRectangleBorder(borderRadius: BorderRadius.circular(50.0), side: shapeBorder); } if (widget.size == GFSize.small) { @@ -216,8 +215,8 @@ class _GFIconButtonState extends State { } Widget result = Container( - height: this.height, - width: widget.shape == GFButtonShape.pills ? this.width + 10 : this.width, + height: widget.shape == GFIconButtonShape.circle ? this.height + 6 : this.height, + width: widget.shape == GFIconButtonShape.pills ? this.width + 10 : widget.shape == GFIconButtonShape.circle ? this.height + 6 : this.width, padding: widget.padding, child: IconTheme.merge( data: IconThemeData( @@ -242,10 +241,8 @@ class _GFIconButtonState extends State { } else { return BoxDecoration( color: widget.onPressed != null ? getColor() : getDisabledFillColor(), - borderRadius: widget.shape == GFButtonShape.pills - ? BorderRadius.circular(50.0) - : widget.shape == GFButtonShape.standard - ? BorderRadius.circular(5.0) + borderRadius: widget.shape == GFIconButtonShape.circle ? BorderRadius.circular(50.0) + : widget.shape == GFIconButtonShape.standard ? BorderRadius.circular(3.0) : widget.shape == GFIconButtonShape.pills ? BorderRadius.circular(20.0) : BorderRadius.zero, boxShadow: [ widget.boxShadow == null && widget.buttonBoxShadow == true @@ -278,10 +275,8 @@ class _GFIconButtonState extends State { child: ConstrainedBox( constraints: BoxConstraints(maxWidth: 60.0, maxHeight: 60.0), child: Container( - height: this.height, - width: widget.shape == GFButtonShape.pills - ? this.width + 10 - : this.width, + height: widget.shape == GFIconButtonShape.circle ? this.height + 6 : this.height, + width: widget.shape == GFIconButtonShape.pills ? this.width + 10 : widget.shape == GFIconButtonShape.circle ? this.height + 6 : this.width, decoration: getBoxShadow(), child: Material( shape: widget.type == GFType.transparent diff --git a/lib/components/card/gf_card.dart b/lib/components/card/gf_card.dart index 320c9013..c5de141c 100644 --- a/lib/components/card/gf_card.dart +++ b/lib/components/card/gf_card.dart @@ -15,7 +15,7 @@ class GFCard extends StatelessWidget { this.elevation, this.shape, this.borderOnForeground = true, - this.padding = const EdgeInsets.all(12.0), + this.padding = const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0), this.margin, this.clipBehavior, this.semanticContainer, @@ -54,7 +54,7 @@ class GFCard extends StatelessWidget { /// 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].. + /// The empty space that surrounds the card. Defines the card's outer [Container.padding].. final EdgeInsetsGeometry padding; /// Whether this widget represents a single semantic container, or if false diff --git a/lib/components/carousel/gf_carousel.dart b/lib/components/carousel/gf_carousel.dart index 31b28426..3186c24e 100644 --- a/lib/components/carousel/gf_carousel.dart +++ b/lib/components/carousel/gf_carousel.dart @@ -31,7 +31,6 @@ class GFCarousel extends StatefulWidget { this.enlargeMainPage = false, this.onPageChanged, this.scrollPhysics, - this.rowCount, this.scrollDirection: Axis.horizontal}) : this.realPage = enableInfiniteScroll ? realPage + initialPage : initialPage, @@ -41,8 +40,6 @@ class GFCarousel extends StatefulWidget { enableInfiniteScroll ? realPage + initialPage : initialPage, ); - /// Count of visible cells - final int rowCount; /// The pagination dots size can be defined using [double]. final double pagerSize; diff --git a/lib/components/image/gf_image_overlay.dart b/lib/components/image/gf_image_overlay.dart index 9733d742..d41b24af 100644 --- a/lib/components/image/gf_image_overlay.dart +++ b/lib/components/image/gf_image_overlay.dart @@ -62,7 +62,7 @@ class GFImageOverlay extends StatelessWidget { Widget build(BuildContext context) { return Container( alignment: alignment, - height: height ?? MediaQuery.of(context).size.height * 0.3, + height: height, width: width ?? MediaQuery.of(context).size.width, margin: margin, padding: padding, diff --git a/lib/components/list_tile/gf_list_tile.dart b/lib/components/list_tile/gf_list_tile.dart index 4f3df6f4..729a7beb 100644 --- a/lib/components/list_tile/gf_list_tile.dart +++ b/lib/components/list_tile/gf_list_tile.dart @@ -18,12 +18,63 @@ class GFListTile extends StatelessWidget { /// The descriprion to display inside the [GFListTile]. see [Text] final Widget description; + /// The descriprion to display inside the [GFListTile]. see [Text] + final Widget trailing; + /// The icon to display inside the [GFListTile]. see [Icon] final Widget icon; ///type of [bool] corresponds to true or false to show or hide the divider final bool showDivider; + /// The empty space that surrounds the card. Defines the card's outer [Container.margin].. + final EdgeInsetsGeometry padding; + + /// The divider's height extent. + /// + /// The divider itself is always drawn as a horizontal line that is centered + /// within the height specified by this value. + /// + /// If this is null, then the [DividerThemeData.space] is used. If that is + /// also null, then this defaults to 16.0. + final double dividerHeight; + + /// The thickness of the line drawn within the divider. + /// + /// A divider with a [thickness] of 0.0 is always drawn as a line with a + /// height of exactly one device pixel. + /// + /// If this is null, then the [DividerThemeData.dividerThickness] is used. If + /// that is also null, then this defaults to 0.0. + final double dividerThickness; + + /// The amount of empty space to the leading edge of the divider. + /// + /// If this is null, then the [DividerThemeData.indent] is used. If that is + /// also null, then this defaults to 0.0. + final double dividerIndent; + + /// The amount of empty space to the trailing edge of the divider. + /// + /// If this is null, then the [DividerThemeData.endIndent] is used. If that is + /// also null, then this defaults to 0.0. + final double dividerEndIndent; + + /// The color to use when painting the line. + /// + /// If this is null, then the [DividerThemeData.color] is used. If that is + /// also null, then [ThemeData.dividerColor] is used. + /// + /// {@tool sample} + /// + /// ```dart + /// Divider( + /// color: Colors.deepOrange, + /// ) + /// ``` + /// {@end-tool} + final Color dividerColor; + const GFListTile( {Key key, this.color, @@ -32,33 +83,58 @@ class GFListTile extends StatelessWidget { this.subTitle , this.description , this.icon, - this.showDivider = true + this.showDivider = true, + this.padding, + this.trailing, + this.dividerEndIndent, + this.dividerHeight, + this.dividerIndent, + this.dividerThickness, + this.dividerColor }) : super(key: key); @override Widget build(BuildContext context) { + + final double height = this.dividerHeight ?? 16.0; + final double thickness = this.dividerThickness ?? 0.0; + final double indent = this.dividerIndent ?? 0.0; + final double endIndent = this.dividerEndIndent ?? 0.0; + return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - ListTile( - leading: avatar, - title: title, - subtitle: subTitle != null || description != null ? Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - subTitle ?? Container(), - description ?? Container() - ], - ): null, - trailing: icon != null ? Column( - children: [ - Padding(padding: EdgeInsets.only(top: description != null ? 0.0 : 8.0), child: - icon ) - ], - ): null + Container( + margin: padding, + color: color, + child: ListTile( + leading: avatar, + title: title, + subtitle: subTitle != null || description != null ? Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + subTitle ?? Container(), + description ?? Container() + ], + ): null, + trailing: icon != null ? Column( + children: [ + Padding(padding: EdgeInsets.only(top: 16.0), child: + icon ) + ], + ): null + ), ), - showDivider ? Divider() : Container() + + showDivider ? + Divider( + height: height ?? dividerHeight, + thickness: thickness ?? dividerThickness, + color: dividerColor ?? Theme.of(context).dividerColor, + indent: indent ?? dividerIndent, + endIndent: endIndent ?? dividerEndIndent, + ) : Container() ], ); } diff --git a/lib/components/tabs/gf_segment_tabs.dart b/lib/components/tabs/gf_segment_tabs.dart index 5ac6badc..93039dd3 100644 --- a/lib/components/tabs/gf_segment_tabs.dart +++ b/lib/components/tabs/gf_segment_tabs.dart @@ -166,8 +166,8 @@ class _GFSegmentTabsState extends State { height: widget.height == null ? 28.0 : widget.height, width: widget.width == null ? 240.0 : widget.width, decoration: BoxDecoration( - border: widget.border == null ? Border.all(color: Colors.black26, width: 2.0) : widget.border, - borderRadius: widget.borderRadius == null ? BorderRadius.circular(4.0) : widget.borderRadius, + border: widget.border == null ? Border.all(color: getGFColor(GFColor.primary), width:1.0) : widget.border, + borderRadius: widget.borderRadius == null ? BorderRadius.circular(2.0) : widget.borderRadius, ), child: DefaultTabController( initialIndex: widget.initialIndex, @@ -175,20 +175,20 @@ class _GFSegmentTabsState extends State { child: Material( borderRadius: widget.borderRadius == null ? BorderRadius.circular(2.0) : widget.borderRadius, type: MaterialType.button, - color: widget.tabBarColor ?? getGFColor(GFColor.primary), + color: widget.tabBarColor ?? Colors.transparent, child: TabBar( controller: widget.tabController, - labelColor: widget.labelColor, - unselectedLabelColor: widget.unselectedLabelColor, - labelStyle: widget.labelStyle, - unselectedLabelStyle: widget.unselectedLabelStyle, - indicatorColor: widget.indicatorColor == null ? Colors.blueGrey : widget.indicatorColor, + labelColor: widget.labelColor ?? getGFColor(GFColor.white), + unselectedLabelColor: widget.unselectedLabelColor ?? getGFColor(GFColor.primary), + labelStyle: widget.labelStyle ?? TextStyle(fontSize: 12.0), + unselectedLabelStyle: widget.unselectedLabelStyle ?? TextStyle(fontSize: 12.0), + indicatorColor: widget.indicatorColor == null ? getGFColor(GFColor.primary) : widget.indicatorColor, indicatorSize: widget.indicatorSize, indicator: widget.indicator == null ? BoxDecoration( - color: widget.indicatorColor == null ? Colors.black26 : widget.indicatorColor, + color: widget.indicatorColor == null ? getGFColor(GFColor.primary) : widget.indicatorColor, border: Border.all(color: widget.indicatorColor == null ? Colors.transparent : widget.indicatorColor, width: 2.0), - borderRadius: widget.borderRadius == null ? BorderRadius.circular(4.0) : widget.borderRadius, + borderRadius: widget.borderRadius == null ? BorderRadius.circular(0.0) : widget.borderRadius, ) : widget.indicator, indicatorPadding: widget.indicatorPadding, indicatorWeight: widget.indicatorWeight, diff --git a/lib/components/tabs/gf_tabBar.dart b/lib/components/tabs/gf_tabBar.dart new file mode 100644 index 00000000..80bb68f3 --- /dev/null +++ b/lib/components/tabs/gf_tabBar.dart @@ -0,0 +1,196 @@ +import 'package:flutter/material.dart'; +import 'package:flutter/foundation.dart'; +import 'package:flutter/rendering.dart'; +import 'package:flutter/widgets.dart'; +import 'package:ui_kit/colors/gf_color.dart'; +import 'package:ui_kit/components/tabs/gf_tabBarView.dart'; + +class GFTabBar extends StatefulWidget { + GFTabBar({ + Key key, + this.initialIndex = 0, + @required this.length, + this.tabBarHeight, + this.tabBarColor, + this.indicatorColor, + this.indicatorWeight = 2.0, + this.indicatorPadding = EdgeInsets.zero, + this.indicator, + this.indicatorSize, + this.labelColor, + this.labelStyle, + this.labelPadding, + this.unselectedLabelColor, + this.unselectedLabelStyle, + this.tabBarView, + this.tabs, + this.controller, + }): + assert(length != null && length >= 0), + assert(initialIndex != null && initialIndex >= 0 && (length == 0 || initialIndex < length)); + + /// The initial index of the selected tab. Defaults to zero. + final int initialIndex; + + /// The total number of tabs. Typically greater than one. Must match [TabBar.tabs]'s and + /// [TabBarView.children]'s length. + final int length; + + /// Sets [GFTabBar] height + final double tabBarHeight; + + /// Sets [TabBar] color using material color [Color] + final Color tabBarColor; + + /// The color of the line that appears below the selected tab. + /// + /// If this parameter is null, then the value of the Theme's indicatorColor + /// property is used. + /// + /// If [indicator] is specified, this property is ignored. + final Color indicatorColor; + + /// The thickness of the line that appears below the selected tab. + /// + /// The value of this parameter must be greater than zero and its default + /// value is 2.0. + /// + /// If [indicator] is specified, this property is ignored. + final double indicatorWeight; + + /// The horizontal padding for the line that appears below the selected tab. + /// + /// For [isScrollable] tab bars, specifying [kTabLabelPadding] will align + /// the indicator with the tab's text for [Tab] widgets and all but the + /// shortest [Tab.text] values. + /// + /// The [EdgeInsets.top] and [EdgeInsets.bottom] values of the + /// [indicatorPadding] are ignored. + /// + /// The default value of [indicatorPadding] is [EdgeInsets.zero]. + /// + /// If [indicator] is specified, this property is ignored. + final EdgeInsetsGeometry indicatorPadding; + + /// Defines the appearance of the selected tab indicator. + /// + /// If [indicator] is specified, the [indicatorColor], [indicatorWeight], + /// and [indicatorPadding] properties are ignored. + /// + /// The default, underline-style, selected tab indicator can be defined with + /// [UnderlineTabIndicator]. + /// + /// The indicator's size is based on the tab's bounds. If [indicatorSize] + /// is [TabBarIndicatorSize.tab] the tab's bounds are as wide as the space + /// occupied by the tab in the tab bar. If [indicatorSize] is + /// [TabBarIndicatorSize.label], then the tab's bounds are only as wide as + /// the tab widget itself. + final Decoration indicator; + + /// Defines how the selected tab indicator's size is computed. + /// + /// The size of the selected tab indicator is defined relative to the + /// tab's overall bounds if [indicatorSize] is [TabBarIndicatorSize.tab] + /// (the default) or relative to the bounds of the tab's widget if + /// [indicatorSize] is [TabBarIndicatorSize.label]. + /// + /// The selected tab's location appearance can be refined further with + /// the [indicatorColor], [indicatorWeight], [indicatorPadding], and + /// [indicator] properties. + final TabBarIndicatorSize indicatorSize; + + /// The color of selected tab labels. + /// + /// Unselected tab labels are rendered with the same color rendered at 70% + /// opacity unless [unselectedLabelColor] is non-null. + /// + /// If this parameter is null, then the color of the [ThemeData.primaryTextTheme]'s + /// body2 text color is used. + final Color labelColor; + + /// The color of unselected tab labels. + /// + /// If this property is null, unselected tab labels are rendered with the + /// [labelColor] with 70% opacity. + final Color unselectedLabelColor; + + /// The text style of the selected tab labels. + /// + /// If [unselectedLabelStyle] is null, then this text style will be used for + /// both selected and unselected label styles. + /// + /// If this property is null, then the text style of the + /// [ThemeData.primaryTextTheme]'s body2 definition is used. + final TextStyle labelStyle; + + /// The padding added to each of the tab labels. + /// + /// If this property is null, then kTabLabelPadding is used. + final EdgeInsetsGeometry labelPadding; + + /// The text style of the unselected tab labels + /// + /// If this property is null, then the [labelStyle] value is used. If [labelStyle] + /// is null, then the text style of the [ThemeData.primaryTextTheme]'s + /// body2 definition is used. + final TextStyle unselectedLabelStyle; + + /// One widget per tab. + /// Its length must match the length of the [GFTabBar.tabs] + /// list, as well as the [controller]'s [GFTabBar.length]. + final GFTabBarView tabBarView; + + /// Typically a list of two or more [Tab] widgets. + /// + /// The length of this list must match the [controller]'s [TabController.length] + /// and the length of the [TabBarView.children] list. + final List tabs; + + final TabController controller; + + @override + _GFTabBarState createState() => _GFTabBarState(); +} + +class _GFTabBarState extends State { + @override + Widget build(BuildContext context) { + return Container( + height: widget.tabBarHeight == null ? MediaQuery.of(context).size.height * 0.1 : widget.tabBarHeight, + child: Material( + type: MaterialType.button, + color: widget.tabBarColor ?? getGFColor(GFColor.primary), + child: TabBar( + controller: widget.controller, + labelColor: widget.labelColor, + unselectedLabelColor: widget.unselectedLabelColor, + labelStyle: widget.labelStyle, + unselectedLabelStyle: widget.unselectedLabelStyle, + indicatorColor: widget.indicatorColor, + indicatorSize: widget.indicatorSize, + indicator: widget.indicator, + indicatorPadding: widget.indicatorPadding, + indicatorWeight: widget.indicatorWeight, + tabs: widget.tabs, + ), + ), + ); + } +} + + + + + + + + + + + + + + + + + diff --git a/lib/components/tabs/gf_tabs.dart b/lib/components/tabs/gf_tabs.dart index 5d3a7729..d588e6b7 100644 --- a/lib/components/tabs/gf_tabs.dart +++ b/lib/components/tabs/gf_tabs.dart @@ -4,6 +4,7 @@ import 'package:flutter/rendering.dart'; import 'package:flutter/widgets.dart'; import 'package:ui_kit/colors/gf_color.dart'; import 'package:ui_kit/components/tabs/gf_tabBarView.dart'; +import 'package:ui_kit/components/tabs/gf_tabBar.dart'; class GFTabs extends StatefulWidget { GFTabs({ @@ -24,6 +25,8 @@ class GFTabs extends StatefulWidget { this.unselectedLabelStyle, this.tabBarView, this.tabs, + this.controller, + this.tabBarHeight, }): assert(length != null && length >= 0), assert(initialIndex != null && initialIndex >= 0 && (length == 0 || initialIndex < length)); @@ -145,6 +148,10 @@ class GFTabs extends StatefulWidget { /// and the length of the [TabBarView.children] list. final List tabs; + final TabController controller; + + final double tabBarHeight; + @override _GFTabsState createState() => _GFTabsState(); } @@ -160,21 +167,22 @@ class _GFTabsState extends State { height: widget.height == null ? MediaQuery.of(context).size.height * 0.5 : widget.height, child: Column( children: [ - Material( - type: MaterialType.button, - color: widget.tabBarColor ?? getGFColor(GFColor.primary), - child: TabBar( - labelColor: widget.labelColor, - unselectedLabelColor: widget.unselectedLabelColor, - labelStyle: widget.labelStyle, - unselectedLabelStyle: widget.unselectedLabelStyle, - indicatorColor: widget.indicatorColor, - indicatorSize: widget.indicatorSize, - indicator: widget.indicator, - indicatorPadding: widget.indicatorPadding, - indicatorWeight: widget.indicatorWeight, - tabs: widget.tabs, - ), + GFTabBar( + length: widget.length, + initialIndex: widget.initialIndex, + tabBarHeight: widget.tabBarHeight, + tabBarColor: widget.tabBarColor ?? getGFColor(GFColor.primary), + controller: widget.controller, + labelColor: widget.labelColor, + unselectedLabelColor: widget.unselectedLabelColor, + labelStyle: widget.labelStyle, + unselectedLabelStyle: widget.unselectedLabelStyle, + indicatorColor: widget.indicatorColor, + indicatorSize: widget.indicatorSize, + indicator: widget.indicator, + indicatorPadding: widget.indicatorPadding, + indicatorWeight: widget.indicatorWeight, + tabs: widget.tabs, ), Expanded( child: widget.tabBarView diff --git a/lib/shape/gf_icon_button_shape.dart b/lib/shape/gf_icon_button_shape.dart new file mode 100644 index 00000000..c6633dbc --- /dev/null +++ b/lib/shape/gf_icon_button_shape.dart @@ -0,0 +1 @@ +enum GFIconButtonShape { standard, pills, square, circle } \ No newline at end of file