diff --git a/demo_app/lib/screens/badges.dart b/demo_app/lib/screens/badges.dart index 0688cc71..c355f07b 100644 --- a/demo_app/lib/screens/badges.dart +++ b/demo_app/lib/screens/badges.dart @@ -11,7 +11,6 @@ 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/size/gf_size.dart'; -import 'package:ui_kit/components/button/gf_button.dart'; import 'package:ui_kit/types/gf_heading_type.dart'; import 'package:ui_kit/types/gf_type.dart'; import 'package:ui_kit/components/tabs/gf_tabBarView.dart'; @@ -283,8 +282,8 @@ class _BadgesState extends State { type: GFType.solid, counterChild: GFBadge( text: '12', - textColor: GFColor.white, - color: GFColor.danger, + textColor: GFColor.white, + color: GFColor.danger, shape: GFBadgeShape.circle, ), onPressed: null, @@ -295,7 +294,6 @@ class _BadgesState extends State { ], ), ), - GFCard( content: Column( children: [ @@ -354,7 +352,6 @@ class _BadgesState extends State { ], ), ), - GFCard( content: Column( children: [ @@ -418,7 +415,6 @@ class _BadgesState extends State { ], ), ), - GFCard( content: Column( children: [ @@ -482,7 +478,6 @@ class _BadgesState extends State { ], ), ), - GFCard( content: Column( children: [ @@ -551,272 +546,206 @@ class _BadgesState extends State { ) ], ), - ListView( - children: [ - GFCard( - content: Column( - children: [ - GFHeader( - text: 'Types of Icon Badges', - type: GFHeadingType.typo6, - ), - SizedBox( - height: 10, - ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - GFIconBadges( - onPressed: null, - child: GFIconButton( - shape: GFButtonShape.circle, - color: GFColor.success, - type: GFType.solid, - onPressed: null, - icon: Icon(Icons.mail), - ), - counterChild: GFBadge( - text: '12', - -// color: GFColor.dark, -// - shape: GFBadgeShape.circle, - - size: GFSize.small, - ) - ), - GFIconBadges( - onPressed: null, - child: GFIconButton( - shape: GFButtonShape.square, - color: GFColor.primary, - type: GFType.solid, - onPressed: null, - icon: Icon(Icons.mail), - ), - counterChild: GFBadge( - text: '12', - -// color: GFColor.dark, -// - shape: GFBadgeShape.circle, - - size: GFSize.small, - ) - ), - GFIconBadges( - onPressed: null, - child: GFIconButton( - shape: GFButtonShape.pills, - color: GFColor.danger, - type: GFType.solid, - onPressed: null, - icon: Icon(Icons.mail), - ), - counterChild: GFBadge( - text: '12', - -// color: GFColor.dark, -// - shape: GFBadgeShape.circle, - - size: GFSize.small, - ) - ), - GFIconBadges( - onPressed: null, - child: GFIconButton( - shape: GFButtonShape.standard, - type: GFType.solid, - color: GFColor.warning, - onPressed: null, - icon: Icon(Icons.mail), - ), - counterChild: GFBadge( - text: '12', - -// color: GFColor.dark, -// - shape: GFBadgeShape.circle, - - size: GFSize.small, - ) - ), - ], - ) - ], - ), - ), - GFCard( - content: Column( - children: [ - GFHeader( - text: 'Shapes of Icon Badges', - type: GFHeadingType.typo6, - ), - SizedBox( - height: 10, - ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - GFIconBadges( - onPressed: null, - child: GFIconButton( - shape: GFButtonShape.circle, - - onPressed: null, - icon: Icon(Icons.mail), - ), - counterChild: GFBadge( - text: '12', - -// color: GFColor.dark, -// - shape: GFBadgeShape.circle, - - size: GFSize.small, - ) - ), - GFIconBadges( - onPressed: null, - child: GFIconButton( - shape: GFButtonShape.square, - - - onPressed: null, - icon: Icon(Icons.mail), - ), - counterChild: GFBadge( - text: '12', - -// color: GFColor.dark, -// - shape: GFBadgeShape.circle, - - size: GFSize.small, - ) - ), - GFIconBadges( - onPressed: null, - child: GFIconButton( - shape: GFButtonShape.pills, - - - onPressed: null, - icon: Icon(Icons.mail), - ), - counterChild: GFBadge( - text: '12', - -// color: GFColor.dark, -// - shape: GFBadgeShape.circle, - - size: GFSize.small, - ) - ), - GFIconBadges( - onPressed: null, - child: GFIconButton( - shape: GFButtonShape.standard, - - onPressed: null, - icon: Icon(Icons.mail), - ), - counterChild: GFBadge( - text: '12', - -// color: GFColor.dark, -// - shape: GFBadgeShape.circle, - - size: GFSize.small, - ) - ), - ], - ) - ], - ), - ), - GFCard( - content: Column( - children: [ - GFHeader( - text: 'Sizes of Icon Badges', - type: GFHeadingType.typo6, - ), - SizedBox( - height: 10, - ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - - GFIconBadges( - onPressed: null, - child: GFIconButton( - size: GFSize.large, - - onPressed: null, - icon: Icon(Icons.mail), - ), - counterChild: GFBadge( - text: '12', - -// color: GFColor.dark, -// - shape: GFBadgeShape.circle, - - size: GFSize.small, - ) - ), - GFIconBadges( - onPressed: null, - child: GFIconButton( - - size: GFSize.medium, - - onPressed: null, - icon: Icon(Icons.mail), - ), - counterChild: GFBadge( - text: '12', - -// color: GFColor.dark, -// - shape: GFBadgeShape.circle, - - size: GFSize.small, - ) - ), - GFIconBadges( - - onPressed: null, - child: GFIconButton( - + ListView( + children: [ + GFCard( + content: Column( + children: [ + GFHeader( + text: 'Types of Icon Badges', + type: GFHeadingType.typo6, + ), + SizedBox( + height: 10, + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + GFIconBadge( + onPressed: null, + child: GFIconButton( + shape: GFButtonShape.pills, + color: GFColor.success, + type: GFType.solid, + onPressed: null, + icon: Icon(Icons.mail), + ), + counterChild: GFBadge( + text: '12', + shape: GFBadgeShape.circle, size: GFSize.small, - - onPressed: null, - icon: Icon(Icons.mail), - ), - counterChild: GFBadge( - text: '12', - -// color: GFColor.dark, -// - shape: GFBadgeShape.circle, - - size: GFSize.small, - ) - ), - ], - ) - ], - ), - ) - ], - ) + )), + GFIconBadge( + onPressed: null, + child: GFIconButton( + shape: GFButtonShape.square, + color: GFColor.primary, + type: GFType.solid, + onPressed: null, + icon: Icon(Icons.mail), + ), + counterChild: GFBadge( + text: '12', + shape: GFBadgeShape.circle, + size: GFSize.small, + )), + GFIconBadge( + onPressed: null, + child: GFIconButton( + shape: GFButtonShape.pills, + color: GFColor.danger, + type: GFType.solid, + onPressed: null, + icon: Icon(Icons.mail), + ), + counterChild: GFBadge( + text: '12', + shape: GFBadgeShape.circle, + size: GFSize.small, + )), + GFIconBadge( + onPressed: null, + child: GFIconButton( + shape: GFButtonShape.standard, + type: GFType.solid, + color: GFColor.warning, + onPressed: null, + icon: Icon(Icons.mail), + ), + counterChild: GFBadge( + text: '12', + shape: GFBadgeShape.circle, + size: GFSize.small, + )), + ], + ) + ], + ), + ), + GFCard( + content: Column( + children: [ + GFHeader( + text: 'Shapes of Icon Badges', + type: GFHeadingType.typo6, + ), + SizedBox( + height: 10, + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + GFIconBadge( + onPressed: null, + child: GFIconButton( + shape: GFButtonShape.pills, + onPressed: null, + icon: Icon(Icons.mail), + ), + counterChild: GFBadge( + text: '12', + shape: GFBadgeShape.circle, + size: GFSize.small, + )), + GFIconBadge( + onPressed: null, + child: GFIconButton( + shape: GFButtonShape.square, + onPressed: null, + icon: Icon(Icons.mail), + ), + counterChild: GFBadge( + text: '12', + color: GFColor.dark, + shape: GFBadgeShape.circle, + size: GFSize.small, + )), + GFIconBadge( + onPressed: null, + child: GFIconButton( + shape: GFButtonShape.pills, + onPressed: null, + icon: Icon(Icons.mail), + ), + counterChild: GFBadge( + text: '12', + shape: GFBadgeShape.circle, + size: GFSize.small, + )), + GFIconBadge( + onPressed: null, + child: GFIconButton( + shape: GFButtonShape.standard, + onPressed: null, + icon: Icon(Icons.mail), + ), + counterChild: GFBadge( + text: '12', + shape: GFBadgeShape.circle, + size: GFSize.small, + ), + ), + ], + ) + ], + ), + ), + GFCard( + content: Column( + children: [ + GFHeader( + text: 'Sizes of Icon Badges', + type: GFHeadingType.typo6, + ), + SizedBox( + height: 10, + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + GFIconBadge( + onPressed: null, + child: GFIconButton( + size: GFSize.large, + onPressed: null, + icon: Icon(Icons.mail), + ), + counterChild: GFBadge( + text: '12', + shape: GFBadgeShape.circle, + size: GFSize.small, + )), + GFIconBadge( + onPressed: null, + child: GFIconButton( + size: GFSize.medium, + onPressed: null, + icon: Icon(Icons.mail), + ), + counterChild: GFBadge( + text: '12', + shape: GFBadgeShape.circle, + size: GFSize.small, + )), + GFIconBadge( + onPressed: null, + child: GFIconButton( + size: GFSize.small, + onPressed: null, + icon: Icon(Icons.mail), + ), + counterChild: GFBadge( + text: '12', + shape: GFBadgeShape.circle, + size: GFSize.small, + )), + ], + ) + ], + ), + ) + ], + ) ], ), indicatorColor: getGFColor(GFColor.dark), diff --git a/demo_app/lib/screens/headers.dart b/demo_app/lib/screens/headers.dart index 4927b4f9..20517021 100644 --- a/demo_app/lib/screens/headers.dart +++ b/demo_app/lib/screens/headers.dart @@ -5,99 +5,88 @@ import 'package:ui_kit/components/card/gf_card.dart'; import 'package:ui_kit/components/header/gf_header.dart'; import 'package:ui_kit/types/gf_heading_type.dart'; -import 'package:ui_kit/components/button/gf_button.dart'; -import 'package:ui_kit/components/header/gf_header.dart'; -import 'package:ui_kit/components/tabs/gf_tabs.dart'; -import 'package:ui_kit/components/toast/gf_floating_widget.dart'; -import 'package:ui_kit/components/toast/gf_toast.dart'; -import 'package:ui_kit/types/gf_heading_type.dart'; -import 'package:ui_kit/types/gf_type.dart'; - - class Headers extends StatefulWidget { @override _HeadersState createState() => _HeadersState(); } class _HeadersState extends State { - bool showToast = false; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: getGFColor(GFColor.dark), - title: Text('Headers', style: TextStyle(fontSize: 14),), + title: Text( + 'Headers', + style: TextStyle(fontSize: 14), + ), ), body: Container( child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ - GFCard( - content: Column( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - - GFHeader( - text: 'GF Header Typo1', - type: GFHeadingType.typo1, - - backgroundImage: NetworkImage('https://cdn.pixabay.com/photo/2019/12/25/16/49/happy-new-year-4718894_960_720.png'), - ), - SizedBox( - height: 40, - ), - GFHeader( - icon: GFAvatar( - - ), - text: 'GF Header Typo2', - type: GFHeadingType.typo2, - dividerColor: GFColor.primary, - dividerAlignment: Alignment.center, - ), - SizedBox( - height: 40, - ), - GFHeader( - icon: Icon(Icons.insert_emoticon), - text: 'GF Header Typo3', - type: GFHeadingType.typo3, - dividerWidth: 150, - dividerColor: GFColor.warning, - dividerBorderRadius: BorderRadius.all(Radius.circular(0)), - ), - SizedBox( - height: 40, - ), - GFHeader( + content: Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + GFHeader( + text: 'GF Header Typo1', + type: GFHeadingType.typo1, + backgroundImage: NetworkImage( + 'https://cdn.pixabay.com/photo/2019/12/25/16/49/happy-new-year-4718894_960_720.png'), + ), + SizedBox( + height: 40, + ), + GFHeader( + icon: GFAvatar(), + text: 'GF Header Typo2', + type: GFHeadingType.typo2, + dividerColor: GFColor.primary, + dividerAlignment: Alignment.center, + ), + SizedBox( + height: 40, + ), + GFHeader( + icon: Icon(Icons.insert_emoticon), + text: 'GF Header Typo3', + type: GFHeadingType.typo3, + dividerWidth: 150, + dividerColor: GFColor.warning, + dividerBorderRadius: BorderRadius.all(Radius.circular(0)), + ), + SizedBox( + height: 40, + ), + GFHeader( text: 'GF Header Typo4', type: GFHeadingType.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, - ), - GFHeader( - text: 'GF Header Typo5', - type: GFHeadingType.typo5, - dividerColor: GFColor.alt, - ), - SizedBox( - height: 40, - ), - GFHeader( - text: 'GF Header Typo6', - type: GFHeadingType.typo6, - dividerWidth: 20, - ), - ], - ) - ), - + icon: Image.network( + 'https://cdn.pixabay.com/photo/2016/12/15/03/27/cocoa-1908020_960_720.jpg', + width: 50, + )), + SizedBox( + height: 40, + ), + GFHeader( + text: 'GF Header Typo5', + type: GFHeadingType.typo5, + dividerColor: GFColor.alt, + ), + SizedBox( + height: 40, + ), + GFHeader( + text: 'GF Header Typo6', + type: GFHeadingType.typo6, + dividerWidth: 20, + ), + ], + )), ], ), ), @@ -199,7 +188,6 @@ class _HeadersState extends State { // ) // ], // ), - ); } } diff --git a/demo_app/lib/screens/icon-button.dart b/demo_app/lib/screens/icon-button.dart index 40aa7f82..0266d586 100644 --- a/demo_app/lib/screens/icon-button.dart +++ b/demo_app/lib/screens/icon-button.dart @@ -5,10 +5,8 @@ import 'package:ui_kit/components/card/gf_card.dart'; import 'package:ui_kit/components/header/gf_header.dart'; import 'package:ui_kit/types/gf_heading_type.dart'; import 'package:ui_kit/types/gf_type.dart'; -import 'package:ui_kit/shape/gf_button_shape.dart'; import 'package:ui_kit/size/gf_size.dart'; - class IconButtons extends StatefulWidget { @override _IconButtonsState createState() => _IconButtonsState(); @@ -20,32 +18,35 @@ class _IconButtonsState extends State { return Scaffold( appBar: AppBar( backgroundColor: getGFColor(GFColor.dark), - title: Text('Icon Button', style: TextStyle(fontSize: 14),), + title: Text( + 'Icon Button', + style: TextStyle(fontSize: 14), + ), ), body: ListView( children: [ - GFCard( - content: Column( - children: [ - GFHeader( - text: 'Solid Icon Button', - type: GFHeadingType.typo6, - ), - SizedBox( - height: 15.0, - ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + GFCard( + content: Column( children: [ - GFIconButton( - onPressed: null, - icon: Icon(Icons.ac_unit), + GFHeader( + text: 'Solid Icon Button', + type: GFHeadingType.typo6, + ), + SizedBox( + height: 15.0, + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + GFIconButton( + onPressed: null, + icon: Icon(Icons.ac_unit), // iconSize: 12.0, - type: GFType.solid, - size: GFSize.large, - buttonBoxShadow: true, - color: GFColor.primary, + type: GFType.solid, + size: GFSize.large, + buttonBoxShadow: true, + color: GFColor.primary, // boxShadow: BoxShadow( // color: Colors.pink, // blurRadius: 2.0, @@ -54,16 +55,16 @@ class _IconButtonsState 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), - ), - GFIconButton( - onPressed: null, - icon: Icon(Icons.ac_unit), + ), + GFIconButton( + onPressed: null, + icon: Icon(Icons.ac_unit), // iconSize: 12.0, - type: GFType.solid, - size: GFSize.medium, + type: GFType.solid, + size: GFSize.medium, - color: GFColor.warning, + color: GFColor.warning, // boxShadow: BoxShadow( // color: Colors.pink, // blurRadius: 2.0, @@ -72,16 +73,16 @@ class _IconButtonsState 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), - ), - GFIconButton( - onPressed: null, - icon: Icon(Icons.ac_unit), + ), + GFIconButton( + onPressed: null, + icon: Icon(Icons.ac_unit), // iconSize: 12.0, - type: GFType.solid, - size: GFSize.small, - buttonBoxShadow: true, - color: GFColor.success, + type: GFType.solid, + size: GFSize.small, + buttonBoxShadow: true, + color: GFColor.success, // boxShadow: BoxShadow( // color: Colors.pink, // blurRadius: 2.0, @@ -90,14 +91,12 @@ class _IconButtonsState 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), - ), - + ), + ], + ) ], - ) - ], + ), ), - ), - GFCard( content: Column( children: [ @@ -105,7 +104,6 @@ class _IconButtonsState extends State { text: 'Outline Icon Button', type: GFHeadingType.typo6, ), - SizedBox( height: 15.0, ), @@ -120,7 +118,6 @@ class _IconButtonsState extends State { type: GFType.outline, size: GFSize.large, - // boxShadow: BoxShadow( // color: Colors.pink, // blurRadius: 2.0, @@ -135,9 +132,8 @@ class _IconButtonsState extends State { icon: Icon(Icons.ac_unit), // iconSize: 12.0, - size: GFSize.medium, -type: GFType.outline, + type: GFType.outline, // boxShadow: BoxShadow( // color: Colors.pink, // blurRadius: 2.0, @@ -155,7 +151,6 @@ type: GFType.outline, type: GFType.outline, size: GFSize.small, - // boxShadow: BoxShadow( // color: Colors.pink, // blurRadius: 2.0, @@ -165,14 +160,11 @@ type: GFType.outline, // 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), ), - ], ) ], ), ), - - GFCard( content: Column( children: [ @@ -194,7 +186,6 @@ type: GFType.outline, type: GFType.transparent, size: GFSize.large, - // boxShadow: BoxShadow( // color: Colors.pink, // blurRadius: 2.0, @@ -209,7 +200,6 @@ type: GFType.outline, icon: Icon(Icons.ac_unit), // iconSize: 12.0, - size: GFSize.medium, type: GFType.transparent, // boxShadow: BoxShadow( @@ -229,7 +219,6 @@ type: GFType.outline, type: GFType.transparent, size: GFSize.small, - // boxShadow: BoxShadow( // color: Colors.pink, // blurRadius: 2.0, @@ -239,7 +228,6 @@ type: GFType.outline, // 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/demo_app/lib/screens/toasts.dart b/demo_app/lib/screens/toasts.dart index 9ff33c95..3ec68dfd 100644 --- a/demo_app/lib/screens/toasts.dart +++ b/demo_app/lib/screens/toasts.dart @@ -3,8 +3,6 @@ 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_header.dart'; -import 'package:ui_kit/components/tabs/gf_tabs.dart'; -import 'package:ui_kit/components/toast/gf_floating_widget.dart'; import 'package:ui_kit/components/toast/gf_toast.dart'; import 'package:ui_kit/types/gf_heading_type.dart'; import 'package:ui_kit/types/gf_type.dart'; @@ -15,38 +13,41 @@ class Toasts extends StatefulWidget { } class _ToastsState extends State { - bool showToast = false; @override Widget build(BuildContext context) { return Scaffold( - appBar: AppBar( - backgroundColor: getGFColor(GFColor.dark), - title: Text('Toast', style: TextStyle(fontSize: 14),), - ), - body: ListView( - children: [ - GFCard( - content: Column( - children: [ - GFHeader( - text: 'Toast', - type: GFHeadingType.typo6, - ), - SizedBox( - height: 10, - ), - GFToast( - text: 'Happy New Year', - button: GFButton(onPressed: null, - text: 'OK', - type: GFType.outline, - color: GFColor.warning, + appBar: AppBar( + backgroundColor: getGFColor(GFColor.dark), + title: Text( + 'Toast', + style: TextStyle(fontSize: 14), + ), + ), + body: ListView( + children: [ + GFCard( + content: Column( + children: [ + GFHeader( + text: 'Toast', + type: GFHeadingType.typo6, + ), + SizedBox( + height: 10, ), - ), - ], + GFToast( + text: 'Happy New Year', + button: GFButton( + onPressed: null, + text: 'OK', + type: GFType.outline, + color: GFColor.warning, + ), + ), + ], + ), ), - ), // GFCard( // content: Column( @@ -89,8 +90,7 @@ class _ToastsState extends State { // ], // ), // ) - ], - ) - ); + ], + )); } } diff --git a/example/lib/main.dart b/example/lib/main.dart index a2d2e867..8fbfffc7 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -1,26 +1,14 @@ 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/button/gf_icon_button.dart'; import 'package:ui_kit/components/badge/gf_button_badge.dart'; -import 'package:ui_kit/components/badge/gf_icon_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/card/gf_card.dart'; -import 'package:ui_kit/components/list_tile/gf_list_tile.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/components/segment_tabs/gf_segment_tabs.dart'; import 'package:ui_kit/types/gf_type.dart'; -import 'package:ui_kit/shape/gf_avatar_shape.dart'; import 'package:ui_kit/shape/gf_button_shape.dart'; import 'package:ui_kit/shape/gf_badge_shape.dart'; -import 'package:ui_kit/components/slider/gf_slider.dart'; import 'package:flutter/cupertino.dart'; -import 'package:ui_kit/size/gf_size.dart'; -import 'package:ui_kit/position/gf_position.dart'; import 'package:ui_kit/components/tabs/gf_tabs.dart'; -import 'package:ui_kit/components/slider/gf_items_slider.dart'; import 'package:ui_kit/components/drawer/gf_drawer.dart'; import 'package:ui_kit/components/drawer/gf_drawer_header.dart'; import 'package:ui_kit/components/toast/gf_toast.dart'; @@ -61,19 +49,20 @@ class MyHomePage extends StatefulWidget { _MyHomePageState createState() => _MyHomePageState(); } -class _MyHomePageState extends State with SingleTickerProviderStateMixin { +class _MyHomePageState extends State + with SingleTickerProviderStateMixin { TabController tabController; @override void initState() { - super.initState(); + super.initState(); tabController = TabController(length: 3, vsync: this); } @override void dispose() { - tabController.dispose(); - super.dispose(); + tabController.dispose(); + super.dispose(); } bool switchValue = true; @@ -82,8 +71,10 @@ class _MyHomePageState extends State with SingleTickerProviderStateM Widget build(BuildContext context) { return Scaffold( drawer: GFDrawer( - colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.darken), - backgroundImage: NetworkImage("https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg"), + colorFilter: new ColorFilter.mode( + Colors.black.withOpacity(0.6), BlendMode.darken), + backgroundImage: NetworkImage( + "https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg"), gradient: LinearGradient( begin: Alignment.topRight, end: Alignment.bottomLeft, @@ -101,15 +92,16 @@ class _MyHomePageState extends State with SingleTickerProviderStateM GFDrawerHeader( currentAccountPicture: GFAvatar( radius: 80.0, - backgroundImage: NetworkImage("https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg"), + backgroundImage: NetworkImage( + "https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg"), ), - decoration: BoxDecoration( color: Colors.teal.withOpacity(0.45), ), otherAccountsPictures: [ Image( - image: NetworkImage("https://cdn.pixabay.com/photo/2019/12/20/00/03/road-4707345_960_720.jpg"), + image: NetworkImage( + "https://cdn.pixabay.com/photo/2019/12/20/00/03/road-4707345_960_720.jpg"), fit: BoxFit.cover, ), GFAvatar( @@ -133,8 +125,7 @@ class _MyHomePageState extends State with SingleTickerProviderStateM ), ListTile( title: Text('Item 2'), - onTap: () { - }, + onTap: () {}, ), ], ), @@ -142,7 +133,7 @@ class _MyHomePageState extends State with SingleTickerProviderStateM appBar: GFAppBar( // backgroundColor: Colors.tealAccent, centerTitle: true, - title: GFSegmentTabs( + title: GFSegmentTabs( initialIndex: 0, length: 3, tabs: [ @@ -174,14 +165,15 @@ class _MyHomePageState extends State with SingleTickerProviderStateM // Container(color: Colors.green), // Container(color: Colors.blue) // ]), - SingleChildScrollView( + SingleChildScrollView( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ GFAvatar( radius: 80.0, - backgroundImage: NetworkImage("https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg"), + backgroundImage: NetworkImage( + "https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg"), ), GFSegmentTabs( @@ -220,8 +212,6 @@ class _MyHomePageState extends State with SingleTickerProviderStateM // borderRadius: BorderRadius.circular(50.0) ), - - // GFItemsSlider( // rowCount: 3, // children: imageList.map( @@ -290,68 +280,67 @@ class _MyHomePageState extends State with SingleTickerProviderStateM // ), ), - 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", + GFTabs( + initialIndex: 0, + length: 3, + tabs: [ + GFButton( + onPressed: null, + child: Text("share"), + icon: Icon(Icons.share), + buttonBoxShadow: true, ), - ), - Tab( - child: Text( - "Pastry", + Tab( + icon: Icon(Icons.error), + child: Text( + "Orders", + ), ), - ), - ], - 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, - ), - ], + Tab( + child: Text( + "Pastry", ), ), - Icon(Icons.directions_car), - Icon(Icons.directions_transit), ], - ), - indicatorColor: Colors.teal, + 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, @@ -367,7 +356,7 @@ class _MyHomePageState extends State with SingleTickerProviderStateM // color: Colors.black, // fontFamily: 'OpenSansBold', // ), - ), + ), // // GFSlider( // autoPlay: true, @@ -558,14 +547,14 @@ class _MyHomePageState extends State with SingleTickerProviderStateM //// //// borderRadius: BorderRadius.circular(20.0), // ), - GFIconBadges( - onPressed: null, - child: GFIconButton( - onPressed: null, - icon: Icon(Icons.ac_unit), - ), - counterChild: GFBadge( - text: '12', + // GFIconBadges( + // onPressed: null, + // child: GFIconButton( + // onPressed: null, + // icon: Icon(Icons.ac_unit), + // ), + // counterChild: GFBadge( + // text: '12', // color: GFColor.dark ////, @@ -580,8 +569,8 @@ class _MyHomePageState extends State with SingleTickerProviderStateM // 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), @@ -613,7 +602,7 @@ class _MyHomePageState extends State with SingleTickerProviderStateM counterChild: GFBadge( child: Text("12"), // color: GFColor.dark, - shape: GFBadgeShape.circle, + shape: GFBadgeShape.circle, // size: GFSize.small, // border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), // textColor: GFColor.white, @@ -662,4 +651,4 @@ class _MyHomePageState extends State with SingleTickerProviderStateM ), ); } -} \ No newline at end of file +} diff --git a/lib/components/appbar/gf_appbar.dart b/lib/components/appbar/gf_appbar.dart index 5f868550..5b1f87d2 100644 --- a/lib/components/appbar/gf_appbar.dart +++ b/lib/components/appbar/gf_appbar.dart @@ -5,7 +5,8 @@ import 'package:flutter/services.dart'; import 'package:flutter/widgets.dart'; import 'package:flutter/material.dart'; -const double _kLeadingWidth = kToolbarHeight; // So the leading button is square. +const double _kLeadingWidth = + kToolbarHeight; // So the leading button is square. // Bottom justify the kToolbarHeight child which may overflow the top. class _ToolbarContainerLayout extends SingleChildLayoutDelegate { @@ -30,12 +31,6 @@ class _ToolbarContainerLayout extends SingleChildLayoutDelegate { bool shouldRelayout(_ToolbarContainerLayout oldDelegate) => false; } -// TODO(eseidel): Toolbar needs to change size based on orientation: -// https://material.io/design/components/app-bars-top.html#specs -// Mobile Landscape: 48dp -// Mobile Portrait: 56dp -// Tablet/Desktop: 64dp - /// A material design app bar. /// /// An app bar consists of a toolbar and potentially other widgets, such as a @@ -178,13 +173,14 @@ class GFAppBar extends StatefulWidget implements PreferredSizeWidget { this.titleSpacing = NavigationToolbar.kMiddleSpacing, this.toolbarOpacity = 1.0, this.bottomOpacity = 1.0, - }) : assert(automaticallyImplyLeading != null), + }) : assert(automaticallyImplyLeading != null), assert(elevation == null || elevation >= 0.0), assert(primary != null), assert(titleSpacing != null), assert(toolbarOpacity != null), assert(bottomOpacity != null), - preferredSize = Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0)), + preferredSize = Size.fromHeight( + kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0)), super(key: key); /// A widget to display before the [title]. @@ -367,8 +363,7 @@ class GFAppBar extends StatefulWidget implements PreferredSizeWidget { final Size preferredSize; bool _getEffectiveCenterTitle(ThemeData theme) { - if (centerTitle != null) - return centerTitle; + if (centerTitle != null) return centerTitle; assert(theme.platform != null); switch (theme.platform) { case TargetPlatform.android: @@ -407,33 +402,35 @@ class _GFAppBarState extends State { final bool hasDrawer = scaffold?.hasDrawer ?? false; final bool hasEndDrawer = scaffold?.hasEndDrawer ?? false; final bool canPop = parentRoute?.canPop ?? false; - final bool useCloseButton = parentRoute is PageRoute && parentRoute.fullscreenDialog; - - IconThemeData overallIconTheme = widget.iconTheme - ?? appBarTheme.iconTheme - ?? theme.primaryIconTheme; - IconThemeData actionsIconTheme = widget.actionsIconTheme - ?? appBarTheme.actionsIconTheme - ?? overallIconTheme; - TextStyle centerStyle = widget.textTheme?.title - ?? appBarTheme.textTheme?.title - ?? theme.primaryTextTheme.title; - TextStyle sideStyle = widget.textTheme?.body1 - ?? appBarTheme.textTheme?.body1 - ?? theme.primaryTextTheme.body1; + final bool useCloseButton = + parentRoute is PageRoute && parentRoute.fullscreenDialog; + + IconThemeData overallIconTheme = + widget.iconTheme ?? appBarTheme.iconTheme ?? theme.primaryIconTheme; + IconThemeData actionsIconTheme = widget.actionsIconTheme ?? + appBarTheme.actionsIconTheme ?? + overallIconTheme; + TextStyle centerStyle = widget.textTheme?.title ?? + appBarTheme.textTheme?.title ?? + theme.primaryTextTheme.title; + TextStyle sideStyle = widget.textTheme?.body1 ?? + appBarTheme.textTheme?.body1 ?? + theme.primaryTextTheme.body1; if (widget.toolbarOpacity != 1.0) { - final double opacity = const Interval(0.25, 1.0, curve: Curves.fastOutSlowIn).transform(widget.toolbarOpacity); + final double opacity = + const Interval(0.25, 1.0, curve: Curves.fastOutSlowIn) + .transform(widget.toolbarOpacity); if (centerStyle?.color != null) - centerStyle = centerStyle.copyWith(color: centerStyle.color.withOpacity(opacity)); + centerStyle = + centerStyle.copyWith(color: centerStyle.color.withOpacity(opacity)); if (sideStyle?.color != null) - sideStyle = sideStyle.copyWith(color: sideStyle.color.withOpacity(opacity)); + sideStyle = + sideStyle.copyWith(color: sideStyle.color.withOpacity(opacity)); overallIconTheme = overallIconTheme.copyWith( - opacity: opacity * (overallIconTheme.opacity ?? 1.0) - ); + opacity: opacity * (overallIconTheme.opacity ?? 1.0)); actionsIconTheme = actionsIconTheme.copyWith( - opacity: opacity * (actionsIconTheme.opacity ?? 1.0) - ); + opacity: opacity * (actionsIconTheme.opacity ?? 1.0)); } Widget leading = widget.leading; @@ -534,13 +531,11 @@ class _GFAppBarState extends State { child: appBar, ), ), - if (widget.bottomOpacity == 1.0) - widget.bottom - else - Opacity( - opacity: const Interval(0.25, 1.0, curve: Curves.fastOutSlowIn).transform(widget.bottomOpacity), - child: widget.bottom, - ), + Opacity( + opacity: const Interval(0.25, 1.0, curve: Curves.fastOutSlowIn) + .transform(widget.bottomOpacity), + child: widget.bottom, + ), ], ); } @@ -567,9 +562,9 @@ class _GFAppBarState extends State { ], ); } - final Brightness brightness = widget.brightness - ?? appBarTheme.brightness - ?? theme.primaryColorBrightness; + final Brightness brightness = widget.brightness ?? + appBarTheme.brightness ?? + theme.primaryColorBrightness; final SystemUiOverlayStyle overlayStyle = brightness == Brightness.dark ? SystemUiOverlayStyle.light : SystemUiOverlayStyle.dark; @@ -579,12 +574,10 @@ class _GFAppBarState extends State { child: AnnotatedRegion( value: overlayStyle, child: Material( - color: widget.backgroundColor - ?? appBarTheme.color - ?? theme.primaryColor, - elevation: widget.elevation - ?? appBarTheme.elevation - ?? _defaultElevation, + color: + widget.backgroundColor ?? appBarTheme.color ?? theme.primaryColor, + elevation: + widget.elevation ?? appBarTheme.elevation ?? _defaultElevation, shape: widget.shape, child: Semantics( explicitChildNodes: true, @@ -597,7 +590,7 @@ class _GFAppBarState extends State { } class _FloatingGFAppBar extends StatefulWidget { - const _FloatingGFAppBar({ Key key, this.child }) : super(key: key); + const _FloatingGFAppBar({Key key, this.child}) : super(key: key); final Widget child; @@ -628,12 +621,12 @@ class _FloatingGFAppBarState extends State<_FloatingGFAppBar> { } RenderSliverFloatingPersistentHeader _headerRenderer() { - return context.findAncestorRenderObjectOfType(); + return context + .findAncestorRenderObjectOfType(); } void _isScrollingListener() { - if (_position == null) - return; + if (_position == null) return; // When a scroll stops, then maybe snap the appbar into view. // Similarly, when a scroll starts, then maybe stop the snap animation. @@ -674,7 +667,7 @@ class _SliverGFAppBarDelegate extends SliverPersistentHeaderDelegate { @required this.snapConfiguration, @required this.stretchConfiguration, @required this.shape, - }) : assert(primary || topPadding == 0.0), + }) : assert(primary || topPadding == 0.0), _bottomHeight = bottom?.preferredSize?.height ?? 0.0; final Widget leading; @@ -703,10 +696,13 @@ class _SliverGFAppBarDelegate extends SliverPersistentHeaderDelegate { final double _bottomHeight; @override - double get minExtent => collapsedHeight ?? (topPadding + kToolbarHeight + _bottomHeight); + double get minExtent => + collapsedHeight ?? (topPadding + kToolbarHeight + _bottomHeight); @override - double get maxExtent => math.max(topPadding + (expandedHeight ?? kToolbarHeight + _bottomHeight), minExtent); + double get maxExtent => math.max( + topPadding + (expandedHeight ?? kToolbarHeight + _bottomHeight), + minExtent); @override final FloatingHeaderSnapConfiguration snapConfiguration; @@ -715,7 +711,8 @@ class _SliverGFAppBarDelegate extends SliverPersistentHeaderDelegate { final OverScrollHeaderStretchConfiguration stretchConfiguration; @override - Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) { + Widget build( + BuildContext context, double shrinkOffset, bool overlapsContent) { final double visibleMainHeight = maxExtent - shrinkOffset - topPadding; // Truth table for `toolbarOpacity`: @@ -747,7 +744,11 @@ class _SliverGFAppBarDelegate extends SliverPersistentHeaderDelegate { ? Semantics(child: flexibleSpace, header: true) : flexibleSpace, bottom: bottom, - elevation: forceElevated || overlapsContent || (pinned && shrinkOffset > maxExtent - minExtent) ? elevation ?? 4.0 : 0.0, + elevation: forceElevated || + overlapsContent || + (pinned && shrinkOffset > maxExtent - minExtent) + ? elevation ?? 4.0 + : 0.0, backgroundColor: backgroundColor, brightness: brightness, iconTheme: iconTheme, @@ -758,7 +759,8 @@ class _SliverGFAppBarDelegate extends SliverPersistentHeaderDelegate { titleSpacing: titleSpacing, shape: shape, toolbarOpacity: toolbarOpacity, - bottomOpacity: pinned ? 1.0 : (visibleMainHeight / _bottomHeight).clamp(0.0, 1.0), + bottomOpacity: + pinned ? 1.0 : (visibleMainHeight / _bottomHeight).clamp(0.0, 1.0), ), ); return floating ? _FloatingGFAppBar(child: appBar) : appBar; @@ -766,28 +768,28 @@ class _SliverGFAppBarDelegate extends SliverPersistentHeaderDelegate { @override bool shouldRebuild(covariant _SliverGFAppBarDelegate oldDelegate) { - return leading != oldDelegate.leading - || automaticallyImplyLeading != oldDelegate.automaticallyImplyLeading - || title != oldDelegate.title - || actions != oldDelegate.actions - || flexibleSpace != oldDelegate.flexibleSpace - || bottom != oldDelegate.bottom - || _bottomHeight != oldDelegate._bottomHeight - || elevation != oldDelegate.elevation - || backgroundColor != oldDelegate.backgroundColor - || brightness != oldDelegate.brightness - || iconTheme != oldDelegate.iconTheme - || actionsIconTheme != oldDelegate.actionsIconTheme - || textTheme != oldDelegate.textTheme - || primary != oldDelegate.primary - || centerTitle != oldDelegate.centerTitle - || titleSpacing != oldDelegate.titleSpacing - || expandedHeight != oldDelegate.expandedHeight - || topPadding != oldDelegate.topPadding - || pinned != oldDelegate.pinned - || floating != oldDelegate.floating - || snapConfiguration != oldDelegate.snapConfiguration - || stretchConfiguration != oldDelegate.stretchConfiguration; + return leading != oldDelegate.leading || + automaticallyImplyLeading != oldDelegate.automaticallyImplyLeading || + title != oldDelegate.title || + actions != oldDelegate.actions || + flexibleSpace != oldDelegate.flexibleSpace || + bottom != oldDelegate.bottom || + _bottomHeight != oldDelegate._bottomHeight || + elevation != oldDelegate.elevation || + backgroundColor != oldDelegate.backgroundColor || + brightness != oldDelegate.brightness || + iconTheme != oldDelegate.iconTheme || + actionsIconTheme != oldDelegate.actionsIconTheme || + textTheme != oldDelegate.textTheme || + primary != oldDelegate.primary || + centerTitle != oldDelegate.centerTitle || + titleSpacing != oldDelegate.titleSpacing || + expandedHeight != oldDelegate.expandedHeight || + topPadding != oldDelegate.topPadding || + pinned != oldDelegate.pinned || + floating != oldDelegate.floating || + snapConfiguration != oldDelegate.snapConfiguration || + stretchConfiguration != oldDelegate.stretchConfiguration; } @override @@ -905,7 +907,7 @@ class SliverGFAppBar extends StatefulWidget { this.stretchTriggerOffset = 100.0, this.onStretchTrigger, this.shape, - }) : assert(automaticallyImplyLeading != null), + }) : assert(automaticallyImplyLeading != null), assert(forceElevated != null), assert(primary != null), assert(titleSpacing != null), @@ -913,7 +915,8 @@ class SliverGFAppBar extends StatefulWidget { assert(pinned != null), assert(snap != null), assert(stretch != null), - assert(floating || !snap, 'The "snap" argument only makes sense for floating app bars.'), + assert(floating || !snap, + 'The "snap" argument only makes sense for floating app bars.'), assert(stretchTriggerOffset > 0.0), super(key: key); @@ -1177,7 +1180,8 @@ class SliverGFAppBar extends StatefulWidget { // This class is only Stateful because it owns the TickerProvider used // by the floating appbar snap animation (via FloatingHeaderSnapConfiguration). -class _SliverGFAppBarState extends State with TickerProviderStateMixin { +class _SliverGFAppBarState extends State + with TickerProviderStateMixin { FloatingHeaderSnapConfiguration _snapConfiguration; OverScrollHeaderStretchConfiguration _stretchConfiguration; @@ -1216,16 +1220,18 @@ class _SliverGFAppBarState extends State with TickerProviderStat super.didUpdateWidget(oldWidget); if (widget.snap != oldWidget.snap || widget.floating != oldWidget.floating) _updateSnapConfiguration(); - if (widget.stretch != oldWidget.stretch) - _updateStretchConfiguration(); + if (widget.stretch != oldWidget.stretch) _updateStretchConfiguration(); } @override Widget build(BuildContext context) { assert(!widget.primary || debugCheckHasMediaQuery(context)); - final double topPadding = widget.primary ? MediaQuery.of(context).padding.top : 0.0; - final double collapsedHeight = (widget.pinned && widget.floating && widget.bottom != null) - ? widget.bottom.preferredSize.height + topPadding : null; + final double topPadding = + widget.primary ? MediaQuery.of(context).padding.top : 0.0; + final double collapsedHeight = + (widget.pinned && widget.floating && widget.bottom != null) + ? widget.bottom.preferredSize.height + topPadding + : null; return MediaQuery.removePadding( context: context, @@ -1268,7 +1274,9 @@ class _SliverGFAppBarState extends State with TickerProviderStat // center it within its (NavigationToolbar) parent, and allow the // parent to constrain the title's actual height. class _GFAppBarTitleBox extends SingleChildRenderObjectWidget { - const _GFAppBarTitleBox({ Key key, @required Widget child }) : assert(child != null), super(key: key, child: child); + const _GFAppBarTitleBox({Key key, @required Widget child}) + : assert(child != null), + super(key: key, child: child); @override _RenderGFAppBarTitleBox createRenderObject(BuildContext context) { @@ -1278,7 +1286,8 @@ class _GFAppBarTitleBox extends SingleChildRenderObjectWidget { } @override - void updateRenderObject(BuildContext context, _RenderGFAppBarTitleBox renderObject) { + void updateRenderObject( + BuildContext context, _RenderGFAppBarTitleBox renderObject) { renderObject.textDirection = Directionality.of(context); } } @@ -1287,11 +1296,15 @@ class _RenderGFAppBarTitleBox extends RenderAligningShiftedBox { _RenderGFAppBarTitleBox({ RenderBox child, TextDirection textDirection, - }) : super(child: child, alignment: Alignment.center, textDirection: textDirection); + }) : super( + child: child, + alignment: Alignment.center, + textDirection: textDirection); @override void performLayout() { - final BoxConstraints innerConstraints = constraints.copyWith(maxHeight: double.infinity); + final BoxConstraints innerConstraints = + constraints.copyWith(maxHeight: double.infinity); child.layout(innerConstraints, parentUsesSize: true); size = constraints.constrain(child.size); alignChild(); diff --git a/lib/components/avatar/gf_avatar.dart b/lib/components/avatar/gf_avatar.dart index 809cfc48..7cd3253b 100644 --- a/lib/components/avatar/gf_avatar.dart +++ b/lib/components/avatar/gf_avatar.dart @@ -2,16 +2,17 @@ import 'package:flutter/widgets.dart'; import 'package:flutter/material.dart'; import 'package:ui_kit/shape/gf_avatar_shape.dart'; import 'package:ui_kit/size/gf_size.dart'; +import 'package:ui_kit/colors/gf_color.dart'; class GFAvatar extends StatelessWidget { /// Typically a [Text] widget. If the [CircleAvatar] is to have an image, use [backgroundImage] instead. final Widget child; - /// The color with which to fill the circle. - final Color backgroundColor; + /// use [Color] or [GFColor]. The color with which to fill the circle. + final dynamic backgroundColor; - /// The default text color for text in the circle. - final Color foregroundColor; + /// use [Color] or [GFColor]. The default text color for text in the circle. + final dynamic foregroundColor; /// The background image of the circle. final ImageProvider backgroundImage; @@ -26,29 +27,19 @@ class GFAvatar extends StatelessWidget { final double maxRadius; /// size of avatar like [double] or [GFSize] i.e, 1.2, small, medium, large etc. - final GFSize size; + final dynamic size; - /// shape of avatar [GFAvatarShape] i.e, standard, pills, square + /// shape of avatar [GFAvatarShape] i.e, standard, circle, square final GFAvatarShape shape; /// border radius to give extra radius for avatar square or standard shape + /// Not applicable to circleshape final BorderRadius borderRadius; - // The default radius if nothing is specified. - static const double _defaultRadius = 20.0; - - // The default radius if avater size GFSize.small selected. - static const double _smallRadius = 16.0; - - // The default radius if avater size GFSize.large selected. - static const double _largeRadius = 28.0; - - // The default min if only the max is specified. - static const double _defaultMinRadius = 0.0; - - // The default max if only the min is specified. - static const double _defaultMaxRadius = double.infinity; + // /// The default max if only the min is specified. + // static const double _defaultMaxRadius = double.infinity; + /// Create Avatar of all types i,e, square, circle, standard with different sizes. const GFAvatar( {Key key, this.child, @@ -66,33 +57,17 @@ class GFAvatar extends StatelessWidget { double get _minDiameter { if (radius == null && minRadius == null && maxRadius == null) { - if (size == GFSize.medium) { - return _defaultRadius * 2.0; - } else if (size == GFSize.small) { - return _smallRadius * 2.0; - } else if (size == GFSize.large) { - return _largeRadius * 2.0; - } else { - return _defaultRadius * 2.0; - } + return getGFSize(size); } else { - return 2.0 * (radius ?? minRadius ?? _defaultMinRadius); + return 2.0 * (radius ?? minRadius ?? 0); } } double get _maxDiameter { if (radius == null && minRadius == null && maxRadius == null) { - if (size == GFSize.medium) { - return _defaultRadius * 2.0; - } else if (size == GFSize.small) { - return _smallRadius * 2.0; - } else if (size == GFSize.large) { - return _largeRadius * 2.0; - } else { - return _defaultRadius * 2.0; - } + return getGFSize(size); } else { - return 2.0 * (radius ?? maxRadius ?? _defaultMaxRadius); + return 2.0 * (radius ?? maxRadius ?? 0); } } @@ -110,6 +85,8 @@ class GFAvatar extends StatelessWidget { @override Widget build(BuildContext context) { + Color backgroundColor = getGFColor(this.backgroundColor); + Color foregroundColor = getGFColor(this.foregroundColor); assert(debugCheckHasMediaQuery(context)); final ThemeData theme = Theme.of(context); TextStyle textStyle = diff --git a/lib/components/badge/gf_badge.dart b/lib/components/badge/gf_badge.dart index d7e36668..ed667b1b 100644 --- a/lib/components/badge/gf_badge.dart +++ b/lib/components/badge/gf_badge.dart @@ -19,26 +19,26 @@ class GFBadge extends StatefulWidget { /// size of [double] or [GFSize] i.e, 1.2, small, medium, large etc. final GFSize size; - /// text of type [String] is alternative to child. text will get priority over child + /// child of type [Widget] is alternative to child. text will get priority over child final Widget child; /// text of type [String] is alternative to child. text will get priority over child final String text; - /// text style of counter text + /// text style of counter text. final TextStyle textStyle; /// Pass [GFColor] or [Color] final dynamic textColor; - /// Create badges of all types, check out [GFButtonBadge] for button badges and [GFIconBadge] for icon badges + /// Create badges of all types, check out [GFButtonBadge] for button badges and [GFIconBadge] for icon type badges const GFBadge({ Key key, this.textStyle, this.borderShape, this.shape = GFBadgeShape.standard, - this.color = GFColor.secondary, - this.textColor = GFColor.dark, + this.color = GFColor.danger, + this.textColor = GFColor.white, this.size = GFSize.medium, this.border, this.text, @@ -64,7 +64,7 @@ class _GFBadgeState extends State { void initState() { this.color = getGFColor(widget.color); this.textColor = getGFColor(widget.textColor); - this.child = widget.child == null ? Text(widget.text) : widget.child; + this.child = widget.text != null ? Text(widget.text ?? '') : widget.child; this.counterShape = widget.shape; this.size = widget.size; super.initState(); @@ -99,26 +99,28 @@ class _GFBadgeState extends State { } if (this.size == GFSize.small) { - this.height = 18.0; - this.width = 24.0; - this.fontSize = 10.0; + this.height = getGFSize(this.size) * 0.56; + this.width = getGFSize(this.size) * 0.75; + this.fontSize = getGFSize(this.size) * 0.31; } else if (this.size == GFSize.medium) { - this.height = 20.0; - this.width = 26.0; + this.height = getGFSize(this.size) * 0.5; + this.width = getGFSize(this.size) * 0.65; + this.fontSize = getGFSize(this.size) * 0.3; this.fontSize = 12.0; } else if (this.size == GFSize.large) { - this.height = 24.0; - this.width = 30.0; - this.fontSize = 12.0; + this.height = getGFSize(this.size) * 0.428; + this.width = getGFSize(this.size) * 0.535; + this.fontSize = getGFSize(this.size) * 0.214; } else { - this.height = 20.0; - this.width = 26.0; - this.fontSize = 12.0; + this.height = getGFSize(this.size) * 0.56; + this.width = getGFSize(this.size) * 0.75; + this.fontSize = getGFSize(this.size) * 0.31; } return Container( height: this.height, - width: this.counterShape == GFBadgeShape.circle ? this.height : this.width, + width: + this.counterShape == GFBadgeShape.circle ? this.height : this.width, child: Material( textStyle: this.textColor != null ? TextStyle(color: this.textColor, fontSize: this.fontSize) diff --git a/lib/components/badge/gf_button_badge.dart b/lib/components/badge/gf_button_badge.dart index c6f4b0f8..0925bc51 100644 --- a/lib/components/badge/gf_button_badge.dart +++ b/lib/components/badge/gf_button_badge.dart @@ -1,8 +1,5 @@ import 'package:flutter/material.dart'; import 'package:ui_kit/shape/gf_badge_shape.dart'; -import 'package:ui_kit/shape/gf_badge_shape.dart'; -import 'package:ui_kit/shape/gf_badge_shape.dart'; -import 'package:ui_kit/shape/gf_badge_shape.dart'; import 'package:ui_kit/shape/gf_button_shape.dart'; import 'package:ui_kit/size/gf_size.dart'; import 'package:ui_kit/types/gf_type.dart'; @@ -29,7 +26,7 @@ class GFButtonBadge extends StatefulWidget { /// Badge type of [GFType] i.e, solid, outline, transparent final GFType type; - /// Badge type of [GFBadgeShape] i.e, standard, pills, square + /// Badge type of [GFBadgeShape] i.e, standard, pills, square, circle final GFButtonShape shape; /// Pass [GFColor] or [Color] @@ -41,10 +38,11 @@ class GFButtonBadge extends StatefulWidget { /// size of [double] or [GFSize] i.e, 1.2, small, medium, large etc. final dynamic size; - /// text of type [String] is alternative to child. text will get priority over child + /// text of type [String] is used to display text on the button. final String text; - /// text of type [String] is alternative to child. text will get priority over child + /// child of type [Widget] is alternative to child. text will get priority over child. + /// You can use [GFBadge] for compatibility. final Widget counterChild; /// icon type of [GFPosition] i.e, start, end @@ -88,7 +86,11 @@ class _GFButtonBadgeState extends State { @override void initState() { this.color = getGFColor(widget.color); - this.textColor = widget.type == GFType.outline && widget.textColor == null ? this.color : widget.textColor == null ? getGFColor(GFColor.dark) : getGFColor(widget.textColor); + this.textColor = (widget.type == GFType.outline && widget.textColor == null) + ? this.color + : widget.textColor == null + ? getGFColor(GFColor.dark) + : getGFColor(widget.textColor); this.onPressed = widget.onPressed; this.type = widget.type; this.shape = widget.shape; @@ -104,19 +106,19 @@ class _GFButtonBadgeState extends State { child: Container( height: this.size, child: GFButton( - textStyle: widget.textStyle, - borderSide: widget.borderSide, - color: this.color, - textColor: this.textColor, - text: widget.text, - onPressed: this.onPressed, - type: this.type, - shape: this.shape, - position: this.position, - size: this.size, - borderShape: widget.borderShape, - icon: widget.counterChild - ), + textStyle: widget.textStyle, + borderSide: widget.borderSide, + color: this.color, + textColor: this.textColor, + text: widget.text, + onPressed: this.onPressed, + type: this.type, + shape: this.shape, + position: this.position, + size: this.size, + borderShape: widget.borderShape, + icon: widget.counterChild, + ), ), ); } diff --git a/lib/components/badge/gf_icon_badge.dart b/lib/components/badge/gf_icon_badge.dart index 06a0c073..88f9a269 100644 --- a/lib/components/badge/gf_icon_badge.dart +++ b/lib/components/badge/gf_icon_badge.dart @@ -1,23 +1,23 @@ import 'package:flutter/material.dart'; -import 'package:ui_kit/shape/gf_badge_shape.dart'; -import 'package:ui_kit/types/gf_type.dart'; -import 'package:ui_kit/position/gf_position.dart'; +import 'package:ui_kit/components/button/gf_icon_button.dart'; -class GFIconBadges extends StatefulWidget { +class GFIconBadge extends StatefulWidget { /// Called when the badge is tapped or otherwise activated. final VoidCallback onPressed; - /// text of type [String] is alternative to child. text will get priority over child - final Widget child; + /// child of type [GFIconButton] is used to show icon. + /// Use [Icon] widget for compatibility. + final GFIconButton child; - /// text of type [String] is alternative to child. text will get priority over child + /// widget of type [Widget] is used to show counter to the top right corner of child. + /// You can use [GFBadge] for compatibility. final Widget counterChild; /// The internal padding for the badge's [child]. final EdgeInsetsGeometry padding; /// Create badges of all types, check out [GFBadge] for button badges and [GFIconBadge] for icon badges. - const GFIconBadges({ + const GFIconBadge({ Key key, @required this.onPressed, this.padding = const EdgeInsets.symmetric(horizontal: 8.0), @@ -27,19 +27,10 @@ class GFIconBadges extends StatefulWidget { super(key: key); @override - _GFIconBadgesState createState() => _GFIconBadgesState(); + _GFIconBadgeState createState() => _GFIconBadgeState(); } -class _GFIconBadgesState extends State { - Color badgeColor, counterColor; - Color textColor; - Widget child; - Widget icon; - Function onPressed; - GFType type; - GFBadgeShape shape; - GFPosition position; - +class _GFIconBadgeState extends State { @override void initState() { super.initState(); @@ -50,13 +41,14 @@ class _GFIconBadgesState extends State { return Container( height: 60.0, width: 60.0, + padding: widget.padding, child: Stack( children: [ - widget.child, + widget.child ?? Container(), new Positioned( top: 2, left: 22, - child: widget.counterChild, + child: widget.counterChild ?? Container(), ), ], ), diff --git a/lib/components/button/gf_button.dart b/lib/components/button/gf_button.dart index 73975bc4..8b27863e 100644 --- a/lib/components/button/gf_button.dart +++ b/lib/components/button/gf_button.dart @@ -10,7 +10,6 @@ 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 GFButton extends StatefulWidget { /// Called when the button is tapped or otherwise activated. final VoidCallback onPressed; @@ -27,17 +26,17 @@ class GFButton extends StatefulWidget { /// The box shadow for the button's [Material]. final BoxShadow boxShadow; - /// The color for the button's [Material] when it has the input focus. - final Color focusColor; + /// Pass [GFColor] or [Color]. The color for the button's [Material] when it has the input focus. + final dynamic focusColor; - /// The color for the button's [Material] when a pointer is hovering over it. - final Color hoverColor; + /// Pass [GFColor] or [Color]. The color for the button's [Material] when a pointer is hovering over it. + final dynamic hoverColor; - /// The highlight color for the button's [InkWell]. - final Color highlightColor; + /// Pass [GFColor] or [Color]. The highlight color for the button's [InkWell]. + final dynamic highlightColor; - /// The splash color for the button's [InkWell]. - final Color splashColor; + /// Pass [GFColor] or [Color]. The splash color for the button's [InkWell]. + final dynamic splashColor; /// The elevation for the button's [Material] when the button is [enabled] but not pressed. final double elevation; @@ -149,47 +148,47 @@ class GFButton extends StatefulWidget { final VoidCallback onLongPress; /// Create buttons of all types. check out [GFIconButton] for icon buttons, and [GFBadge] for badges - const GFButton({ - Key key, - @required this.onPressed, - this.onHighlightChanged, - this.textStyle, - this.boxShadow, - this.buttonBoxShadow, - this.focusColor, - this.hoverColor, - this.highlightColor, - this.splashColor, - this.elevation = 2.0, - this.focusElevation = 4.0, - this.hoverElevation = 4.0, - this.highlightElevation = 1.0, - this.disabledElevation = 0.0, - this.padding = const EdgeInsets.symmetric(horizontal: 8.0), - this.constraints, - this.borderShape, - this.animationDuration = kThemeChangeDuration, - this.clipBehavior = Clip.none, - this.focusNode, - this.autofocus = false, - MaterialTapTargetSize materialTapTargetSize, - this.child, - this.type = GFType.solid, - this.shape = GFButtonShape.standard, - this.color = GFColor.primary, - this.textColor, - this.position = GFPosition.start, - this.size = GFSize.medium, - this.borderSide, - this.text, - this.icon, - this.blockButton, - this.fullWidthButton, - this.colorScheme, - this.enableFeedback, - this.onLongPress - }) : materialTapTargetSize = - materialTapTargetSize ?? MaterialTapTargetSize.padded, + const GFButton( + {Key key, + @required this.onPressed, + this.onHighlightChanged, + this.textStyle, + this.boxShadow, + this.buttonBoxShadow, + this.focusColor, + this.hoverColor, + this.highlightColor, + this.splashColor, + this.elevation = 2.0, + this.focusElevation = 4.0, + this.hoverElevation = 4.0, + this.highlightElevation = 1.0, + this.disabledElevation = 0.0, + this.padding = const EdgeInsets.symmetric(horizontal: 8.0), + this.constraints, + this.borderShape, + this.animationDuration = kThemeChangeDuration, + this.clipBehavior = Clip.none, + this.focusNode, + this.autofocus = false, + MaterialTapTargetSize materialTapTargetSize, + this.child, + this.type = GFType.solid, + this.shape = GFButtonShape.standard, + this.color = GFColor.primary, + this.textColor, + this.position = GFPosition.start, + this.size = GFSize.medium, + this.borderSide, + this.text, + this.icon, + this.blockButton, + this.fullWidthButton, + this.colorScheme, + this.enableFeedback, + this.onLongPress}) + : materialTapTargetSize = + materialTapTargetSize ?? MaterialTapTargetSize.padded, assert(shape != null, 'Button shape can not be null'), assert(elevation != null && elevation >= 0.0), assert(focusElevation != null && focusElevation >= 0.0), @@ -217,12 +216,17 @@ class _GFButtonState extends State { double size; GFPosition position; BoxShadow boxShadow; + final Set _states = {}; @override void initState() { this.color = getGFColor(widget.color); - this.textColor = widget.type == GFType.outline && widget.textColor == null ? this.color : widget.textColor == null ? getGFColor(GFColor.dark) : getGFColor(widget.textColor); + this.textColor = widget.type == GFType.outline && widget.textColor == null + ? this.color + : widget.textColor == null + ? getGFColor(GFColor.dark) + : getGFColor(widget.textColor); this.child = widget.text != null ? Text(widget.text) : widget.child; this.icon = widget.icon; this.onPressed = widget.onPressed; @@ -230,28 +234,21 @@ class _GFButtonState extends State { this.shape = widget.shape; this.size = getGFSize(widget.size); this.position = widget.position; + _updateState(MaterialState.disabled, !widget.enabled); super.initState(); } bool get _hovered => _states.contains(MaterialState.hovered); - bool get _focused => _states.contains(MaterialState.focused); + // bool get _focused => _states.contains(MaterialState.focused); bool get _pressed => _states.contains(MaterialState.pressed); bool get _disabled => _states.contains(MaterialState.disabled); - double blockWidth(context) { - return MediaQuery.of(context).size.width * 0.88; - } - - double fullWidth(context) { - return MediaQuery.of(context).size.width; - } - double buttonWidth() { if (widget.blockButton == true) { - return blockWidth(context); + return MediaQuery.of(context).size.width * 0.88; } else if (widget.fullWidthButton == true) { - return fullWidth(context); + return MediaQuery.of(context).size.width; } else { return null; } @@ -280,13 +277,13 @@ class _GFButtonState extends State { } } - void _handleFocusedChanged(bool value) { - if (_focused != value) { - setState(() { - _updateState(MaterialState.focused, value); - }); - } - } + // void _handleFocusedChanged(bool value) { + // if (_focused != value) { + // setState(() { + // _updateState(MaterialState.focused, value); + // }); + // } + // } @override void didUpdateWidget(GFButton oldWidget) { @@ -301,18 +298,18 @@ class _GFButtonState extends State { super.didUpdateWidget(oldWidget); } - @override Widget build(BuildContext context) { - ShapeBorder shape; final Color effectiveTextColor = MaterialStateProperty.resolveAs( widget.textStyle?.color, _states); final Color themeColor = - Theme.of(context).colorScheme.onSurface.withOpacity(0.12); + Theme.of(context).colorScheme.onSurface.withOpacity(0.12); final BorderSide outlineBorder = BorderSide( - color: this.color == null ? themeColor : widget.borderSide == null ? this.color : widget.borderSide.color, + color: this.color == null + ? themeColor + : widget.borderSide == null ? this.color : widget.borderSide.color, width: widget.borderSide?.width ?? 1.0, ); @@ -332,13 +329,11 @@ class _GFButtonState extends State { final BorderSide shapeBorder = widget.type == GFType.outline ? outlineBorder : widget.borderSide != null - ? widget.borderSide - : BorderSide( - color: this.color == null ? themeColor : this.color, - width: 0.0, - ); - - + ? widget.borderSide + : BorderSide( + color: this.color == null ? themeColor : this.color, + width: 0.0, + ); if (this.shape == GFButtonShape.pills) { shape = RoundedRectangleBorder( @@ -355,86 +350,106 @@ class _GFButtonState extends State { } BoxDecoration getBoxShadow() { - if(widget.type != GFType.transparent){ - if(widget.boxShadow == null && widget.buttonBoxShadow != true){ + if (widget.type != GFType.transparent) { + if (widget.boxShadow == null && widget.buttonBoxShadow != true) { return null; - }else{ + } else { return BoxDecoration( - color: widget.type == GFType.transparent || widget.type == GFType.outline ? Colors.transparent : this.color, - borderRadius: widget.shape == GFButtonShape.pills ? BorderRadius.circular(50.0) : - widget.shape == GFButtonShape.standard ? BorderRadius.circular(5.0) : BorderRadius.zero, + color: widget.type == GFType.transparent || + widget.type == GFType.outline + ? Colors.transparent + : this.color, + borderRadius: widget.shape == GFButtonShape.pills + ? BorderRadius.circular(50.0) + : widget.shape == GFButtonShape.standard + ? BorderRadius.circular(5.0) + : BorderRadius.zero, boxShadow: [ - widget.boxShadow == null && widget.buttonBoxShadow == true ? BoxShadow( - color: themeColor, - blurRadius: 1.5, - spreadRadius: 2.0, - offset: Offset.zero, - ) : - widget.boxShadow != null ? widget.boxShadow : - BoxShadow( - color: Theme.of(context).canvasColor, - blurRadius: 0.0, - spreadRadius: 0.0, - offset: Offset.zero, - ) - ] - ); + widget.boxShadow == null && widget.buttonBoxShadow == true + ? BoxShadow( + color: themeColor, + blurRadius: 1.5, + spreadRadius: 2.0, + offset: Offset.zero, + ) + : widget.boxShadow != null + ? widget.boxShadow + : BoxShadow( + color: Theme.of(context).canvasColor, + blurRadius: 0.0, + spreadRadius: 0.0, + offset: Offset.zero, + ), + ]); } } + return null; } - final Widget result = Container( - constraints: this.icon == null ? BoxConstraints(minHeight: 26.0, minWidth: 88.0) : - BoxConstraints(minHeight: 26.0, minWidth: 98.0), + constraints: this.icon == null + ? BoxConstraints(minHeight: 26.0, minWidth: 88.0) + : BoxConstraints(minHeight: 26.0, minWidth: 98.0), decoration: getBoxShadow(), child: Material( - textStyle: widget.textStyle == null ? TextStyle(color: this.textColor, fontSize: 14) : widget.textStyle, - shape: widget.type == GFType.transparent ? null : widget.borderShape == null ? shape : widget.borderShape, - color: widget.type == GFType.transparent || widget.type == GFType.outline ? Colors.transparent : this.color, - type: this.color == null ? MaterialType.transparency : MaterialType.button, + textStyle: widget.textStyle == null + ? TextStyle(color: this.textColor, fontSize: 14) + : widget.textStyle, + shape: widget.type == GFType.transparent + ? null + : widget.borderShape == null ? shape : widget.borderShape, + color: + widget.type == GFType.transparent || widget.type == GFType.outline + ? Colors.transparent + : this.color, + type: this.color == null + ? MaterialType.transparency + : MaterialType.button, animationDuration: widget.animationDuration, clipBehavior: widget.clipBehavior, child: InkWell( onHighlightChanged: _handleHighlightChanged, - splashColor: widget.splashColor, - highlightColor: widget.highlightColor, - focusColor: widget.focusColor, - hoverColor: widget.hoverColor, + splashColor: getGFColor(widget.splashColor), + highlightColor: getGFColor(widget.highlightColor), + focusColor: getGFColor(widget.focusColor), + hoverColor: getGFColor(widget.hoverColor), onHover: _handleHoveredChanged, onTap: widget.onPressed, - customBorder: widget.type == GFType.transparent ? null : widget.borderShape == null ? shape : widget.borderShape, + customBorder: widget.type == GFType.transparent + ? null + : widget.borderShape == null ? shape : widget.borderShape, child: IconTheme.merge( data: IconThemeData(color: effectiveTextColor), child: Container( - height: widget.blockButton == true ? BLOCK - : widget.fullWidthButton == true ? BLOCK - : this.size, + height: widget.blockButton == true + ? BLOCK + : widget.fullWidthButton == true ? BLOCK : this.size, width: buttonWidth(), padding: widget.padding, child: Center( widthFactor: 1.0, heightFactor: 1.0, - child: this.icon != null && (this.position == GFPosition.start || this.position == null)? - Row( - mainAxisSize: MainAxisSize.min, - children: [ - this.icon, - const SizedBox(width: 8.0), - this.child - ], - ) - : this.icon != null && - (this.position == GFPosition.end) + child: this.icon != null && + (this.position == GFPosition.start || + this.position == null) ? Row( - mainAxisSize: MainAxisSize.min, - children: [ - this.child, - const SizedBox(width: 8.0), - this.icon - ], - ) - : this.child, + mainAxisSize: MainAxisSize.min, + children: [ + this.icon, + const SizedBox(width: 8.0), + this.child + ], + ) + : this.icon != null && (this.position == GFPosition.end) + ? Row( + mainAxisSize: MainAxisSize.min, + children: [ + this.child, + const SizedBox(width: 8.0), + this.icon + ], + ) + : this.child, ), ), ), @@ -489,7 +504,8 @@ class _InputPadding extends SingleChildRenderObjectWidget { } @override - void updateRenderObject(BuildContext context, covariant _RenderInputPadding renderObject) { + void updateRenderObject( + BuildContext context, covariant _RenderInputPadding renderObject) { renderObject.minSize = minSize; } } @@ -500,8 +516,7 @@ class _RenderInputPadding extends RenderShiftedBox { Size get minSize => _minSize; Size _minSize; set minSize(Size value) { - if (_minSize == value) - return; + if (_minSize == value) return; _minSize = value; markNeedsLayout(); } @@ -549,7 +564,7 @@ class _RenderInputPadding extends RenderShiftedBox { } @override - bool hitTest(BoxHitTestResult result, { Offset position }) { + bool hitTest(BoxHitTestResult result, {Offset position}) { if (super.hitTest(result, position: position)) { return true; } @@ -563,4 +578,4 @@ class _RenderInputPadding extends RenderShiftedBox { }, ); } -} \ No newline at end of file +} diff --git a/lib/components/button/gf_icon_button.dart b/lib/components/button/gf_icon_button.dart index 8f7c5acc..573b68a6 100644 --- a/lib/components/button/gf_icon_button.dart +++ b/lib/components/button/gf_icon_button.dart @@ -35,14 +35,14 @@ class GFIconButton extends StatefulWidget { /// Pass [GFColor] or [Color] final dynamic color; - /// The primary color of the button when the button is in the down (pressed) state. - final Color splashColor; + /// Pass [GFColor] or [Color]. The primary color of the button when the button is in the down (pressed) state. + final dynamic splashColor; - /// The secondary color of the button when the button is in the down (pressed) state. - final Color highlightColor; + /// Pass [GFColor] or [Color]. The secondary color of the button when the button is in the down (pressed) state. + final dynamic highlightColor; - /// The color to use for the icon inside the button, if the icon is disabled. - final Color disabledColor; + /// Pass [GFColor] or [Color]. The color to use for the icon inside the button, if the icon is disabled. + final dynamic disabledColor; /// The callback that is called when the button is tapped or otherwise activated. final VoidCallback onPressed; @@ -185,7 +185,8 @@ class _GFIconButtonState extends State { } Widget result = Container( - height: widget.shape == GFButtonShape.pills ? this.height + 6 : this.height, + height: + widget.shape == GFButtonShape.pills ? this.height + 6 : this.height, width: widget.shape == GFButtonShape.pills ? this.width + 6 : this.width, padding: widget.padding, child: IconTheme.merge( @@ -205,32 +206,40 @@ class _GFIconButtonState extends State { } BoxDecoration getBoxShadow() { - if(widget.type != GFType.transparent){ - if(widget.boxShadow == null && widget.buttonBoxShadow != true){ + if (widget.type != GFType.transparent) { + if (widget.boxShadow == null && widget.buttonBoxShadow != true) { return null; - }else{ + } else { return BoxDecoration( - color: widget.type == GFType.transparent || widget.type == GFType.outline ? Colors.transparent : this.color, - borderRadius: widget.shape == GFButtonShape.pills ? BorderRadius.circular(50.0) : - widget.shape == GFButtonShape.standard ? BorderRadius.circular(5.0) : BorderRadius.zero, + color: widget.type == GFType.transparent || + widget.type == GFType.outline + ? Colors.transparent + : this.color, + borderRadius: widget.shape == GFButtonShape.pills + ? BorderRadius.circular(50.0) + : widget.shape == GFButtonShape.standard + ? BorderRadius.circular(5.0) + : BorderRadius.zero, boxShadow: [ - widget.boxShadow == null && widget.buttonBoxShadow == true ? BoxShadow( - color: themeColor, - blurRadius: 1.5, - spreadRadius: 2.0, - offset: Offset.zero, - ) : - widget.boxShadow != null ? widget.boxShadow : - BoxShadow( - color: Theme.of(context).canvasColor, - blurRadius: 0.0, - spreadRadius: 0.0, - offset: Offset.zero, - ) - ] - ); + widget.boxShadow == null && widget.buttonBoxShadow == true + ? BoxShadow( + color: themeColor, + blurRadius: 1.5, + spreadRadius: 2.0, + offset: Offset.zero, + ) + : widget.boxShadow != null + ? widget.boxShadow + : BoxShadow( + color: Theme.of(context).canvasColor, + blurRadius: 0.0, + spreadRadius: 0.0, + offset: Offset.zero, + ) + ]); } } + return null; } return Semantics( @@ -242,27 +251,39 @@ class _GFIconButtonState extends State { child: ConstrainedBox( constraints: BoxConstraints(maxWidth: 60.0, maxHeight: 60.0), child: Container( - height: - widget.shape == GFButtonShape.pills ? this.height + 6 : this.height, - width: widget.shape == GFButtonShape.pills ? this.width + 6 : this.width, + height: widget.shape == GFButtonShape.pills + ? this.height + 6 + : this.height, + width: widget.shape == GFButtonShape.pills + ? this.width + 6 + : this.width, decoration: getBoxShadow(), child: Material( shape: widget.type == GFType.transparent ? null : widget.borderShape == null ? shape : widget.borderShape, - color: widget.type == GFType.transparent || widget.type == GFType.outline ? Colors.transparent : this.color, + color: widget.type == GFType.transparent || + widget.type == GFType.outline + ? Colors.transparent + : this.color, type: widget.type == GFType.transparent ? MaterialType.transparency : MaterialType.button, child: InkResponse( onTap: widget.onPressed, child: result, - focusColor: widget.focusColor ?? Theme.of(context).focusColor, - hoverColor: widget.hoverColor ?? Theme.of(context).hoverColor, - highlightColor: - widget.highlightColor ?? Theme.of(context).highlightColor, - splashColor: - widget.splashColor ?? Theme.of(context).splashColor, + focusColor: widget.focusColor != null + ? getGFColor(widget.focusColor) + : Theme.of(context).focusColor, + hoverColor: widget.hoverColor != null + ? getGFColor(widget.hoverColor) + : Theme.of(context).hoverColor, + highlightColor: widget.highlightColor != null + ? getGFColor(widget.highlightColor) + : Theme.of(context).highlightColor, + splashColor: widget.splashColor != null + ? getGFColor(widget.splashColor) + : Theme.of(context).splashColor, radius: math.max( Material.defaultSplashRadius, (widget.iconSize + diff --git a/lib/components/drawer/gf_drawer.dart b/lib/components/drawer/gf_drawer.dart index d56f3412..1ebdaa3c 100644 --- a/lib/components/drawer/gf_drawer.dart +++ b/lib/components/drawer/gf_drawer.dart @@ -17,9 +17,6 @@ enum GFDrawerAlignment { end, } -// TODO(eseidel): Draw width should vary based on device size: -// https://material.io/design/components/navigation-drawer.html#specs - // Mobile: // Width = Screen width − 56 dp // Maximum width: 320dp @@ -31,9 +28,9 @@ enum GFDrawerAlignment { // The right nav can vary depending on content. const double _kWidth = 304.0; -const double _kEdgeDragWidth = 20.0; -const double _kMinFlingVelocity = 365.0; -const Duration _kBaseSettleDuration = Duration(milliseconds: 246); +// const double _kEdgeDragWidth = 20.0; +// const double _kMinFlingVelocity = 365.0; +// const Duration _kBaseSettleDuration = Duration(milliseconds: 246); /// A material design panel that slides in horizontally from the edge of a /// [Scaffold] to show navigation links in an application. @@ -125,15 +122,15 @@ class GFDrawer extends StatelessWidget { /// Typically used in the [Scaffold.drawer] property. /// /// The [elevation] must be non-negative. - const GFDrawer({ - Key key, - this.elevation = 16.0, - this.child, - this.semanticLabel, - this.backgroundImage, - this.colorFilter, - this.gradient - }) : assert(elevation != null && elevation >= 0.0), + const GFDrawer( + {Key key, + this.elevation = 16.0, + this.child, + this.semanticLabel, + this.backgroundImage, + this.colorFilter, + this.gradient}) + : assert(elevation != null && elevation >= 0.0), super(key: key); /// The z-coordinate at which to place this drawer relative to its parent. @@ -198,17 +195,17 @@ class GFDrawer extends StatelessWidget { decoration: new BoxDecoration( color: Colors.teal, gradient: gradient, - image: backgroundImage != null ? new DecorationImage( - image: backgroundImage, - fit: BoxFit.cover, - colorFilter: colorFilter, - ) : null, + image: backgroundImage != null + ? new DecorationImage( + image: backgroundImage, + fit: BoxFit.cover, + colorFilter: colorFilter, + ) + : null, ), - child: child - ), + child: child), ), ), ); } } - diff --git a/lib/components/drawer/gf_drawer_header.dart b/lib/components/drawer/gf_drawer_header.dart index c6d92c84..c56722c3 100644 --- a/lib/components/drawer/gf_drawer_header.dart +++ b/lib/components/drawer/gf_drawer_header.dart @@ -1,4 +1,3 @@ -import 'dart:math' as math; import 'package:flutter/widgets.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @@ -21,7 +20,9 @@ class DrawerHeaderPictures extends StatelessWidget { top: 0.0, end: 0.0, child: Row( - children: (otherAccountsPictures ?? []).take(3).map((Widget picture) { + children: (otherAccountsPictures ?? []) + .take(3) + .map((Widget picture) { return Padding( padding: const EdgeInsetsDirectional.only(start: 8.0), child: Semantics( @@ -111,7 +112,6 @@ class GFDrawerHeader extends StatefulWidget { } class _GFDrawerHeaderState extends State { - @override Widget build(BuildContext context) { assert(debugCheckHasMaterial(context)); @@ -120,9 +120,10 @@ class _GFDrawerHeaderState extends State { container: true, label: MaterialLocalizations.of(context).signedInLabel, child: DrawerHeader( - decoration: widget.decoration ?? BoxDecoration( - color: Theme.of(context).primaryColor, - ), + decoration: widget.decoration ?? + BoxDecoration( + color: Theme.of(context).primaryColor, + ), margin: widget.margin, padding: const EdgeInsetsDirectional.only(top: 16.0, start: 16.0), child: SafeArea( @@ -140,11 +141,10 @@ class _GFDrawerHeaderState extends State { ), ), AnimatedContainer( - padding: EdgeInsets.only(bottom: 16.0), - duration: widget.duration, - curve: widget.curve, - child: widget.child - ), + padding: EdgeInsets.only(bottom: 16.0), + duration: widget.duration, + curve: widget.curve, + child: widget.child), ], ), ), diff --git a/lib/components/slider/gf_items_slider.dart b/lib/components/slider/gf_items_slider.dart index 3702ef7b..e54d32d1 100644 --- a/lib/components/slider/gf_items_slider.dart +++ b/lib/components/slider/gf_items_slider.dart @@ -8,7 +8,8 @@ import 'package:flutter/material.dart'; /// /// The `details` object provides the position of the touch when it first /// touched the surface. -typedef GFItemsSliderSlideStartCallback = void Function(DragStartDetails details); +typedef GFItemsSliderSlideStartCallback = void Function( + DragStartDetails details); /// Signature for when a pointer that is in contact with the screen and moving /// has moved again. @@ -33,39 +34,39 @@ typedef GFItemsSliderSlideEndCallback = void Function(DragEndDetails details); /// Set left/right arrows [leftArrow], [rightArrow] class GFItemsSlider extends StatefulWidget { /// Count of visible cells - int rowCount; + final int rowCount; - List children; + final List children; /// Signature for when a pointer has contacted the screen and has begun to move. - GFItemsSliderSlideStartCallback onSlideStart; + final GFItemsSliderSlideStartCallback onSlideStart; /// Signature for when a pointer that is in contact with the screen and moving /// has moved again. - GFItemsSliderSlideCallback onSlide; + final GFItemsSliderSlideCallback onSlide; /// Signature for when a pointer that was previously in contact with the screen /// and moving is no longer in contact with the screen. - GFItemsSliderSlideEndCallback onSlideEnd; + final GFItemsSliderSlideEndCallback onSlideEnd; - GFItemsSlider({ - this.rowCount, - this.children, - this.onSlideStart, - this.onSlide, - this.onSlideEnd - }); + GFItemsSlider( + {this.rowCount, + this.children, + this.onSlideStart, + this.onSlide, + this.onSlideEnd}); @override _GFItemsSliderState createState() => new _GFItemsSliderState(); } -class _GFItemsSliderState extends State with TickerProviderStateMixin { +class _GFItemsSliderState extends State + with TickerProviderStateMixin { /// In milliseconds - static final int DRAG_ANIMATION_DURATION = 1000; + static final int dragAnimationDuration = 1000; /// In milliseconds - static final int SHIFT_ANIMATION_DURATION = 300; + static final int shiftAnimationDuration = 300; /// Size of cell double size = 0; @@ -85,13 +86,11 @@ class _GFItemsSliderState extends State with TickerProviderStateM this.offset = 0; this.animationController = AnimationController( - duration: new Duration(milliseconds: DRAG_ANIMATION_DURATION), - vsync: this - ); + duration: new Duration(milliseconds: dragAnimationDuration), + vsync: this); new Future.delayed(Duration.zero, () { this.setState(() { - double width = MediaQuery.of(context).size.width; this.width = width; this.size = this.width / widget.rowCount; @@ -115,7 +114,7 @@ class _GFItemsSliderState extends State with TickerProviderStateM onSlideStart(DragStartDetails details) { this.animationController.stop(); - widget.onSlideStart != null ? widget.onSlideStart(details) : null; + if (widget.onSlideStart != null) widget.onSlideStart(details); } onSlide(DragUpdateDetails details) { @@ -123,7 +122,7 @@ class _GFItemsSliderState extends State with TickerProviderStateM this.offset = this.calculateOffset(3 * details.delta.dx); }); - widget.onSlide != null ? widget.onSlide(details) : null; + if (widget.onSlide != null) widget.onSlide(details); } onSlideEnd(DragEndDetails details) { @@ -134,21 +133,16 @@ class _GFItemsSliderState extends State with TickerProviderStateM } this.animationController = new AnimationController( - duration: new Duration(milliseconds: DRAG_ANIMATION_DURATION), - vsync: this - ); + duration: new Duration(milliseconds: dragAnimationDuration), + vsync: this); Tween tween = new Tween( - begin: this.offset, - end: this.calculateOffset(0.5 * dx) - ); + begin: this.offset, end: this.calculateOffset(0.5 * dx)); - Animation animation = tween.animate( - new CurvedAnimation( - parent: this.animationController, - curve: Curves.easeOut, - ) - ); + Animation animation = tween.animate(new CurvedAnimation( + parent: this.animationController, + curve: Curves.easeOut, + )); animation.addStatusListener((AnimationStatus status) { if (status == AnimationStatus.completed) { @@ -163,7 +157,7 @@ class _GFItemsSliderState extends State with TickerProviderStateM }); this.animationController.forward(); - widget.onSlideEnd != null ? widget.onSlideEnd(details) : null; + if (widget.onSlideEnd != null) widget.onSlideEnd(details); } runShiftAnimation() { @@ -172,9 +166,8 @@ class _GFItemsSliderState extends State with TickerProviderStateM this.size * (this.offset / this.size).round().toDouble(); this.animationController = new AnimationController( - duration: new Duration(milliseconds: SHIFT_ANIMATION_DURATION), - vsync: this - ); + duration: new Duration(milliseconds: shiftAnimationDuration), + vsync: this); Tween tween = new Tween(begin: beginAnimation, end: endAnimation); Animation animation = tween.animate(this.animationController); @@ -196,22 +189,20 @@ class _GFItemsSliderState extends State with TickerProviderStateM child: Container( width: double.infinity, height: this.size, - child: Stack( - children: [ - Positioned( - left: this.offset, - child: Row( - children: widget.children.map((child) { - return Container( - width: this.size, - height: this.size, - child: child, - ); - }).toList(), - ), - ), - ] - ), + child: Stack(children: [ + Positioned( + left: this.offset, + child: Row( + children: widget.children.map((child) { + return Container( + width: this.size, + height: this.size, + child: child, + ); + }).toList(), + ), + ), + ]), ), ); } diff --git a/lib/components/slider/gf_slider.dart b/lib/components/slider/gf_slider.dart index fe9cf857..52304775 100644 --- a/lib/components/slider/gf_slider.dart +++ b/lib/components/slider/gf_slider.dart @@ -1,5 +1,4 @@ import 'dart:async'; -//import 'dart:ffi'; import 'package:flutter/material.dart'; List map(List list, Function handler) { @@ -32,7 +31,7 @@ class GFSlider extends StatefulWidget { this.enlargeMainPage = false, this.onPageChanged, this.scrollPhysics, - this.rowCount, + this.rowCount, this.scrollDirection: Axis.horizontal}) : this.realPage = enableInfiniteScroll ? realPage + initialPage : initialPage, @@ -43,7 +42,7 @@ class GFSlider extends StatefulWidget { ); /// Count of visible cells - int rowCount; + final int rowCount; /// The pagination dots size can be defined using [double]. final double pagerSize; @@ -178,7 +177,6 @@ class _GFSliderState extends State with TickerProviderStateMixin { void initState() { super.initState(); timer = getPlayTimer(); - } Timer getPlayTimer() { @@ -224,13 +222,10 @@ class _GFSliderState extends State with TickerProviderStateMixin { int _current = 0; - @override Widget build(BuildContext context) { - return Stack( children: [ - getPageWrapper(PageView.builder( physics: widget.scrollPhysics, scrollDirection: widget.scrollDirection, @@ -275,16 +270,15 @@ class _GFSliderState extends State with TickerProviderStateMixin { if (widget.scrollDirection == Axis.horizontal) { return Center( - child: SizedBox( - height: distortionValue * height, child: child), - + child: SizedBox( + height: distortionValue * height, child: child), ); } else { return Center( - child: SizedBox( - width: distortionValue * - MediaQuery.of(context).size.width, - child: child), + child: SizedBox( + width: + distortionValue * MediaQuery.of(context).size.width, + child: child), ); } }, diff --git a/lib/components/toast/gf_floating_widget.dart b/lib/components/toast/gf_floating_widget.dart index 300981a2..ad46e41c 100644 --- a/lib/components/toast/gf_floating_widget.dart +++ b/lib/components/toast/gf_floating_widget.dart @@ -1,5 +1,4 @@ import 'package:flutter/material.dart'; -import 'package:ui_kit/components/toast/gf_toast.dart'; class GFFloatingWidget extends StatefulWidget { const GFFloatingWidget( @@ -34,11 +33,13 @@ class _GFFloatingWidgetState extends State { fit: StackFit.loose, children: [ Container( - height: MediaQuery.of(context).size.height, + height: MediaQuery.of(context).size.height, child: widget.body ?? Container(), ), Positioned( - top: widget.horizontalPosition != null ? widget.horizontalPosition : 0, + top: widget.horizontalPosition != null + ? widget.horizontalPosition + : 0, left: widget.verticalPosition != null ? widget.verticalPosition : 0, child: Container( width: MediaQuery.of(context).size.width, diff --git a/lib/components/toast/gf_toast.dart b/lib/components/toast/gf_toast.dart index a8669e4f..c4b1f294 100644 --- a/lib/components/toast/gf_toast.dart +++ b/lib/components/toast/gf_toast.dart @@ -3,7 +3,6 @@ import 'dart:async'; import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import 'package:ui_kit/colors/gf_color.dart'; -import 'gf_floating_widget.dart'; class GFToast extends StatefulWidget { /// @@ -35,7 +34,6 @@ class GFToast extends StatefulWidget { /// width od type [double] used to control the width od the [GFToast] final double width; - @override _GFToastState createState() => _GFToastState(); } @@ -71,13 +69,12 @@ class _GFToastState extends State with TickerProviderStateMixin { @override Widget build(BuildContext context) { - return FadeTransition( + return FadeTransition( opacity: animation, - child: - Column( + child: Column( children: [ Container( - width: widget.width != null? widget.width: null, + width: widget.width != null ? widget.width : null, constraints: BoxConstraints(minHeight: 50.0), // width: 100, margin: EdgeInsets.only(left: 10, right: 10), @@ -102,12 +99,12 @@ class _GFToastState extends State with TickerProviderStateMixin { ), widget.button != null ? Flexible( - flex: 4, - fit: FlexFit.tight, - child: Align( - alignment: Alignment.topRight, - child: widget.button, - )) + flex: 4, + fit: FlexFit.tight, + child: Align( + alignment: Alignment.topRight, + child: widget.button, + )) : Container() ], ), diff --git a/lib/components/toggle/gf_toggle.dart b/lib/components/toggle/gf_toggle.dart index 3c0ae9bb..1b02b34a 100644 --- a/lib/components/toggle/gf_toggle.dart +++ b/lib/components/toggle/gf_toggle.dart @@ -55,7 +55,7 @@ class GFToggle extends StatefulWidget { final Duration duration; /// Button type of [GFToggleType] i.e, android, ios, custom, sqaure - GFToggleType type; + final GFToggleType type; /// This property must not be null. Used to set the current state of toggle final bool value; @@ -85,9 +85,9 @@ class _GFToggleState extends State with TickerProviderStateMixin { @override void dispose() { - animationController.dispose(); + if(animationController!=null) animationController.dispose(); + if(controller!=null) controller.dispose(); super.dispose(); - controller.dispose(); } diff --git a/lib/shape/gf_badge_shape.dart b/lib/shape/gf_badge_shape.dart index 4610635a..f2f18678 100644 --- a/lib/shape/gf_badge_shape.dart +++ b/lib/shape/gf_badge_shape.dart @@ -1 +1 @@ -enum GFBadgeShape { standard, pills, square, circle} +enum GFBadgeShape { standard, pills, square, circle } diff --git a/lib/shape/gf_button_shape.dart b/lib/shape/gf_button_shape.dart index 34bfd4a2..0febabbf 100644 --- a/lib/shape/gf_button_shape.dart +++ b/lib/shape/gf_button_shape.dart @@ -1 +1 @@ -enum GFButtonShape { standard, pills, square, circle } +enum GFButtonShape { standard, pills, square } diff --git a/lib/size/gf_size.dart b/lib/size/gf_size.dart index d96e132b..e254a5f1 100644 --- a/lib/size/gf_size.dart +++ b/lib/size/gf_size.dart @@ -1,8 +1,8 @@ enum GFSize { small, medium, large } -const double SMALL = 28.0; -const double MEDIUM = 36.0; -const double LARGE = 48.0; +const double SMALL = 35.0; +const double MEDIUM = 50.0; +const double LARGE = 65.0; const double BLOCK = 40.0; /// Pass [GFSize] or [double] diff --git a/lib/types/gf_toggle_type.dart b/lib/types/gf_toggle_type.dart index a64cd145..f34acd17 100644 --- a/lib/types/gf_toggle_type.dart +++ b/lib/types/gf_toggle_type.dart @@ -1 +1 @@ -enum GFToggleType { android, ios, custom ,square } \ No newline at end of file +enum GFToggleType { android, ios, custom, square }