diff --git a/example/lib/main.dart b/example/lib/main.dart index 84b8e635..f7154474 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -21,18 +21,15 @@ 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/list_tile/gf_list_tile.dart'; + import 'package:ui_kit/types/gf_type.dart'; -import 'package:ui_kit/components/image/gf_image_overlay.dart'; import 'package:ui_kit/shape/gf_shape.dart'; import 'package:ui_kit/components/slider/gf_slider.dart'; -import 'package:ui_kit/shape/gf_shape.dart'; -import 'package:ui_kit/components/toggle/gf_toggle.dart'; -import 'package:ui_kit/types/gf_toggle_type.dart'; import 'package:flutter/cupertino.dart'; -import 'package:ui_kit/components/header/gf_header.dart'; +import 'package:ui_kit/size/gf_size.dart'; import 'package:ui_kit/position/gf_position.dart'; - -import 'package:ui_kit/components/toast/gf_toast.dart'; +import 'package:ui_kit/components/tabs/gf_tabs.dart'; final List imageList = [ "https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg", @@ -50,14 +47,9 @@ class MyApp extends StatelessWidget { title: 'UI_KIT_EXAMPLE', theme: ThemeData( primarySwatch: Colors.blue, - - ), -debugShowCheckedModeBanner: false, - -// home: MyHomePage(title: 'UI_KIT_EXAMPLE'), - home: MyHomePage( - title: 'UI KIT', ), + debugShowCheckedModeBanner: false, + home: MyHomePage(title: 'UI_KIT_EXAMPLE'), ); } } @@ -75,203 +67,184 @@ class _MyHomePageState extends State { bool switchValue = true; @override Widget build(BuildContext context) { - var screenWidth = MediaQuery.of(context).size.width; - var screenHeight = MediaQuery.of(context).size.height; - return Scaffold( + backgroundColor: Colors.orange, appBar: AppBar( title: Text(widget.title), ), + body: SingleChildScrollView( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ +// Container( +// height: 300.0, +// child: DefaultTabController( +// length: 2, +// child: Scaffold( +// appBar: AppBar( +// bottom: TabBar( +// indicator: UnderlineTabIndicator( +// borderSide: BorderSide(color: Color(0xDD613896), width: 2.0), +// insets: EdgeInsets.fromLTRB(5.0, 0.0, 5.0, 4.0), +// ), +// tabs: [ +// Tab(icon: Icon(Icons.directions_car), text: "Non persistent",), +// Tab(icon: Icon(Icons.directions_transit), text: "Persistent"), +// ], +// ), +// title: Text('Persistent Tab Demo'), +// ), +// body: TabBarView( +// children: [ +// Text("cdx"), +// Text("cdv") +// ], +// ), +// ), +// ), +// ), - body: - - SingleChildScrollView( - child: Column( - children: [ - -// GFCard( -//// boxFit: BoxFit.cover, -//// 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: GFListItem( -// 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, -// ), -// ), -// ), - -// -// GFCard( -// title: GFListItem( -// title: Text('dcrfvjn'), -// subTitle: Text('fghjk'), -// -// ), -// -// ), +// GFSlider( +//// pagerSize: 12.0, +//// activeIndicator: Colors.pink, +//// passiveIndicator: Colors.pink.withOpacity(0.4), +// viewportFraction: 0.9, +// 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; +// }); +// }, +// ), - GFListTile( - avatar: GFAvatar(), - - icon: Icon(Icons.description), - title: Text('Header'), - subTitle: Text('Sub Header'), - description: Text('Lorem ipsum gf header used to show the header of the list tile'), - ), - Container( - margin: EdgeInsets.only(top:10), - child: GFToast( -// + RawMaterialButton( + onPressed: null, + child: Text("fv"), + ), + FlatButton(onPressed: null, child: Text("cds")), + +// Container( +// decoration: BoxDecoration( +// color: Colors.teal, +// boxShadow: [BoxShadow( +// color: Colors.pink, +// blurRadius: 1.5, +// spreadRadius: 2.0, +// offset: Offset.zero, +// ) +// ] +// ), +// child: OutlineButton(child: Text("Fvd"),)), // // -// button: GFButton( -// onPressed: null, -// type: GFType.outline, -// text: 'Accept', -// ), - text: 'Marked as Favorite.', + GFButton( + color: Colors.orange, + onPressed: null, + child: Text("share"), + type: GFType.outline, + shape: GFShape.pills, + buttonBoxShadow: true, + boxShadow: BoxShadow( + color: Colors.pink.withOpacity(0.4), + blurRadius: 1.5, + spreadRadius: 2.0, + offset: Offset.zero, + ), ), - ), - Container( - margin: EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 10), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - GFToggle( - onChanged: null, - value: null, - type: GFToggleType.android, - duration: Duration(milliseconds: 400), - ), - GFToggle( - onChanged: null, - value: null, - type: GFToggleType.ios, - duration: Duration(milliseconds: 400), + + GFTabs( + initialIndex: 0, + length: 3, + tabs: [ + GFButton( + onPressed: null, + child: Text("share"), + icon: Icon(Icons.share), + buttonBoxShadow: true, ), - GFToggle( - onChanged: null, - value: null, - type: GFToggleType.custom, - duration: Duration(milliseconds: 400), + Tab( + icon: Icon(Icons.error), + child: Text( + "Orders", + ), ), - GFToggle( - onChanged: (val) { - print(val); - }, - value: null, - type: GFToggleType.square, - duration: Duration(milliseconds: 400), + Tab( + child: Text( + "Pastry", + ), ), ], + tabBarView: TabBarView( + children: [ + Container( + color: Colors.red, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + 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: GFShape.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', +// ), ), - ), - - Container( -// padding: EdgeInsets.only(left: 20, right: 20), - child: GFHeader( -// icon: Icon(Icons.image, color: Colors.white,), - text: 'GET FLUTTER HEADER', -//textColor: Colors.red, - dividerWidth: 20, -//backgroundImage: NetworkImage('https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg'), -//showDivider: false, - -// textColor: Colors.black, -// dividerColor: Colors.red, -//dividerAlignment: Alignment.center, - - - -// child: Text('GF HEADER ', ), -// dividercolor: GFColor.warning, -// dividerBorderRadius: BorderRadius.all(Radius.circular(0)), - ), - ) - - ], - ), - ) - // body: DefaultTabController( - // length: 3, - // child: Scaffold( - // appBar: AppBar( - // bottom: TabBar( - // tabs: [ - // Tab(icon: Icon(Icons.directions_car)), - // Tab(icon: Icon(Icons.directions_transit)), - // Tab(icon: Icon(Icons.directions_bike)), - // ], - // ), - // title: Text('Tabs Demo'), - // ), - // body: TabBarView( - // children: [ - // Icon(Icons.directions_car), - // Icon(Icons.directions_transit), - // Icon(Icons.directions_bike), - // ], - // ), - // ), - // ), -// SingleChildScrollView( -// child: Column( -// mainAxisAlignment: MainAxisAlignment.center, -// crossAxisAlignment: CrossAxisAlignment.center, -// children: [ - -// GFSlider( -//// pagerSize: 12.0, -//// activeIndicator: Colors.pink, -//// passiveIndicator: Colors.pink.withOpacity(0.4), -// viewportFraction: 0.9, -// 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; -// }); -// }, -// ), // GFSlider( // autoPlay: true, // viewportFraction: 1.0, // aspectRatio: MediaQuery.of(context).size.aspectRatio, -// items: imageList.map((url) { +// items: imageList.map( +// (url) { // return Container( // margin: EdgeInsets.all(5.0), // child: ClipRRect( @@ -291,68 +264,78 @@ class _MyHomePageState extends State { // }); // }, // ), - -// GFCard( -// boxFit: BoxFit.cover, -// 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: GFTitleBar( -// avatar: GFAvatar( -// child: Text("tb"), -// ), -// title: Text( -// 'title', -// style: TextStyle(color: Colors.grey), -// ), -// subTitle: Text( -// 'subtitle', -// style: TextStyle(color: Colors.grey), -// ), -// icon: GFIconButton( -// onPressed: null, -// icon: Icon(Icons.favorite_border), -// type: GFType.transparent, -// ), -// ), -// content: Text( -// "Flutter " -// "Flutter is Google's mobile UI framework for crafting" -// " high-quality native interfaces on iOS and Android in " -// "Flutter ", -// 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(onPressed: null, child: Text("share"), icon: Icon(Icons.share), type: GFType.outline,), -// ], -// ), -// -// GFTitleBar( + GFCard( + boxFit: BoxFit.cover, + 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( + onPressed: null, + child: Text("share"), + icon: Icon(Icons.share), + type: GFType.outline, + ), + ], + ), +// GFListItem( // avatar: GFAvatar( // child: Text("tb"), // ), @@ -364,321 +347,110 @@ class _MyHomePageState extends State { // 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), -// ), -// ], -// ), +// GFImageOverlay( +// width: MediaQuery.of(context).size.width, +// margin: EdgeInsets.all(16.0), +// padding: EdgeInsets.all(16.0), +// child: Column( +// children: [ +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// ], +// ), //// color: Colors.orange, -// image: AssetImage("lib/assets/food.jpeg"), -// boxFit: BoxFit.cover, -// colorFilter: new ColorFilter.mode( -// Colors.black.withOpacity(0.6), BlendMode.darken), -// borderRadius: new BorderRadius.circular(5.0), +// 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), -// ), - - // Card( - // child: Column( - // children: [ - // Text("czsd"), - // Row( - // children: [ - // OutlineButton( - // onPressed: null, - // child: Text("dscds"), - // color: Colors.orange, - // ), - // FlatButton(onPressed: null, child: Text("dchbvj")) - // ], - // ) - // ], - // ), - // ), - - // GFButtonBar( - // mainAxisSize: MainAxisSize.min, - // children: [ - // GFButton( - // onPressed: null, - // child: Text("like"), - // icon: Icon(Icons.favorite_border), - // type: GFType.transparent, - // ), - // GFButton( - // onPressed: null, - // child: Text("comment"), - // ), - // GFButton( - // onPressed: null, - // child: Text("share"), - // icon: Icon(Icons.share), - // type: GFType.outline, - // ), - // ], - // ), - - // GFTitleBar( - // avatar: GFAvatar( - // child: Text("tb"), - // ), - // title: Text('title'), - // subTitle: Text('subtitle'), - // icon: GFIconButton( - // type: GFType.transparent, - // icon: Icon(Icons.favorite_border), - // ), - // ), - -// GFCard( - -// headertype: GFAtb(), - -// po - -// image - -// overlaytext - -// content: Text("content"), - -// buttonbar: gfbb() - // ), - +// GFAvatar( +// // radius: 20.0, +//// maxRadius: 50, // - -// gfbb( - -// children[ - +// child: Text("de"), // - -// ] - -// ) - -// GFimageoverlay() - -// GFAvatar( -// // radius: 20.0, -// maxRadius: 50, - -// child: Text("de"), - -// backgroundColor: Colors.pink, - -// backgroundImage: , - -// foregroundColor: Colors.deepOrangeAccent, - - // shape: GFShape.square, - -// size: GFSize.medium, - -// borderRadius: BorderRadius.circular(20.0), - // ), - - // GFIconBadges( - // onPressed: null, - // child: GFIconButton( - // onPressed: null, - // icon: Icon(Icons.ac_unit), - // ), - // counterChild: GFBadge( - // text: '12', - -// color: GFColor.dark, - -// shape: GFShape.circle, - -// size: GFSize.small, - -// border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), - -// textColor: GFColor.white, - -// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), - -// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.orange, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), - // ), - // ), - - // GFIconButton( - // onPressed: null, - - // icon: Icon(Icons.ac_unit), - -// iconSize: 12.0, - -// type: GFType.solid, - -// shape: GFShape.pills, - -// size: GFSize.large, - -// buttonBoxShadow: true, - -// color: GFColor.primary, - -// boxShadow: BoxShadow( - -// color: Colors.pink, - -// blurRadius: 2.0, - -// spreadRadius: 1.0, - -// offset: Offset.zero, - +//// backgroundColor: Colors.pink, +//// +////// backgroundImage: , +//// +//// foregroundColor: Colors.deepOrangeAccent, +//// +//// shape: GFShape.square, +//// +//// size: GFSize.medium, +//// +//// borderRadius: BorderRadius.circular(20.0), +// ), +// GFIconBadges( +// onPressed: null, +// child: GFIconButton( +// onPressed: null, +// icon: Icon(Icons.ac_unit), // ), - -// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), - -// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), - // ), - -// GFButtonBadge( -// onPressed: null, - -// // position: GFIconPosition.start, - -// // borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), - -// // borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), - -// text: 'goodies', - -// // color: GFColor.danger, - -// // shape: GFShape.pills, - -// // type: GFType.outline, - -// // size: GFSize.small, - -// counterChild: GFBadge( -// child: Text("12"), - -// // color: GFColor.dark, - -// // shape: GFShape.circle, - -// // size: GFSize.small, - -// // border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), - -// // textColor: GFColor.white, - -// // textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), -// ), -// ), - -// GFBadge( -// text: '12', - -// // color: GFColor.dark, - -// // shape: GFShape.circle, - -// // size: GFSize.small, - -// // border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), - -// // textColor: GFColor.white, - -// // textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), -// ), - -// GFButton( -// // type: GFType.solid, - -// // shape: GFShape.pills, - -// text: 'goodies', - -// onPressed: () {}, - -// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), - -// size: GFSize.large, - -// buttonBoxShadow: true, - -// blockButton: true, - -// fullWidthButton: true, - -// color: GFColor.primary, - -// textColor: GFColor.secondary, - -// icon: Icon(Icons.error, color: Colors.white,), - -// position: GFIconPosition.start, - -// boxShadow: BoxShadow( - -// color: Colors.pink, - -// blurRadius: 2.0, - -// spreadRadius: 1.0, - -// offset: Offset.zero, - +// counterChild: GFBadge( +// text: '12', +// +//// color: GFColor.dark, +//// +//// shape: GFShape.circle, +//// +//// size: GFSize.small, +//// +//// border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), +//// +//// textColor: GFColor.white, +//// +//// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), +//// +//// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.orange, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), // ), // ), // GFIconButton( @@ -709,15 +481,15 @@ class _MyHomePageState extends State { //// shape: GFShape.pills, //// type: GFType.outline, //// size: GFSize.small, -// counterChild: GFBadge( -// child: Text("12"), +// counterChild: GFBadge( +// child: Text("12"), //// color: GFColor.dark, //// shape: GFShape.circle, //// size: GFSize.small, //// border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), //// textColor: GFColor.white, //// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), -// ), +// ), // ), // GFBadge( // text: '12', @@ -751,10 +523,9 @@ 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), // ), -// ], -// ), -// ) - // ) + ], + ), + ), ); } } diff --git a/lib/colors/gf_color.dart b/lib/colors/gf_color.dart index 002b98d5..f7a256d2 100644 --- a/lib/colors/gf_color.dart +++ b/lib/colors/gf_color.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; + enum GFColor { primary, secondary, @@ -15,6 +16,7 @@ enum GFColor { transparent } + const PRIMARY = Color(0xff3f6ad8); const SECONDARY = Color(0xff6c757c); const SUCCESS =Color(0xff3ac47c); diff --git a/lib/components/badge/gf_button_badge.dart b/lib/components/badge/gf_button_badge.dart index 3dd55974..7d706fa3 100644 --- a/lib/components/badge/gf_button_badge.dart +++ b/lib/components/badge/gf_button_badge.dart @@ -111,7 +111,8 @@ class _GFButtonBadgeState extends State { position: this.position, size: this.size, borderShape: widget.borderShape, - icon: widget.counterChild), + icon: widget.counterChild + ), ), ); } diff --git a/lib/components/button/gf_button.dart b/lib/components/button/gf_button.dart index 6e2b1628..58a86555 100644 --- a/lib/components/button/gf_button.dart +++ b/lib/components/button/gf_button.dart @@ -10,6 +10,7 @@ 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; @@ -116,6 +117,37 @@ class GFButton extends StatefulWidget { /// on true state default box shadow appears around button final bool buttonBoxShadow; + /// A set of thirteen colors that can be used to derive the button theme's + /// colors. + /// + /// This property was added much later than the theme's set of highly + /// specific colors, like [ThemeData.buttonColor], [ThemeData.highlightColor], + /// [ThemeData.splashColor] etc. + /// + /// The colors for new button classes can be defined exclusively in terms + /// of [colorScheme]. When it's possible, the existing buttons will + /// (continue to) gradually migrate to it. + final ColorScheme colorScheme; + + /// Whether detected gestures should provide acoustic and/or haptic feedback. + /// + /// For example, on Android a tap will produce a clicking sound and a + /// long-press will produce a short vibration, when feedback is enabled. + /// + /// See also: + /// + /// * [Feedback] for providing platform-specific feedback to certain actions. + final bool enableFeedback; + + /// Called when the button is long-pressed. + /// + /// If this callback and [onPressed] are null, then the button will be disabled. + /// + /// See also: + /// + /// * [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 const GFButton({ Key key, @@ -153,8 +185,11 @@ class GFButton extends StatefulWidget { this.icon, this.blockButton, this.fullWidthButton, + this.colorScheme, + this.enableFeedback, + this.onLongPress }) : materialTapTargetSize = - materialTapTargetSize ?? MaterialTapTargetSize.padded, + materialTapTargetSize ?? MaterialTapTargetSize.padded, assert(shape != null, 'Button shape can not be null'), assert(elevation != null && elevation >= 0.0), assert(focusElevation != null && focusElevation >= 0.0), @@ -266,30 +301,37 @@ class _GFButtonState extends State { super.didUpdateWidget(oldWidget); } - // double get _effectiveElevation { - // // These conditionals are in order of precedence, so be careful about - // // reorganizing them. - // if (_disabled) { - // return widget.disabledElevation; - // } - // if (_pressed) { - // return widget.highlightElevation; - // } - // if (_hovered) { - // return widget.hoverElevation; - // } - // if (_focused) { - // return widget.focusElevation; - // } - // return widget.elevation; - // } + + double get _effectiveElevation { + // These conditionals are in order of precedence, so be careful about + // reorganizing them. + if (_disabled) { + return widget.disabledElevation; + } + if (_pressed) { + return widget.highlightElevation; + } + if (_hovered) { + return widget.hoverElevation; + } + if (_focused) { + return widget.focusElevation; + } + return widget.elevation; + } + @override Widget build(BuildContext context) { + + ShapeBorder shape; + + final ShapeBorder effectiveShape = MaterialStateProperty.resolveAs(shape, _states); + 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: widget.borderSide == null ? themeColor : widget.borderSide.color, width: widget.borderSide?.width ?? 1.0, @@ -311,13 +353,13 @@ class _GFButtonState extends State { final BorderSide shapeBorder = widget.type == GFType.outline ? outlineBorder : widget.borderSide != null - ? widget.borderSide - : BorderSide( - color: this.color, - width: 0.0, - ); + ? widget.borderSide + : BorderSide( + color: this.color == null ? themeColor : this.color, + width: 0.0, + ); + - ShapeBorder shape; if (this.shape == GFShape.pills) { shape = RoundedRectangleBorder( @@ -333,99 +375,127 @@ class _GFButtonState extends State { borderRadius: BorderRadius.circular(50.0), side: shapeBorder); } + BoxDecoration getBoxShadow() { + if(widget.type != GFType.transparent){ + if(widget.boxShadow == null && widget.buttonBoxShadow != true){ + return null; + }else{ + return BoxDecoration( + color: widget.type == GFType.transparent || widget.type == GFType.outline ? Colors.transparent : this.color, + borderRadius: widget.shape == GFShape.pills ? BorderRadius.circular(50.0) : + widget.shape == GFShape.standard ? BorderRadius.circular(5.0) : BorderRadius.zero, + boxShadow: [ + widget.boxShadow == null && widget.buttonBoxShadow == true ? BoxShadow( + color: 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 Semantics( - container: true, - button: true, - enabled: widget.enabled, - child: _InputPadding( - minSize: minSize, - child: Focus( - focusNode: widget.focusNode, - onFocusChange: _handleFocusedChanged, - autofocus: widget.autofocus, - child: Container( - constraints: this.icon == null ? BoxConstraints(minHeight: 26.0, minWidth: 88.0) : - BoxConstraints(minHeight: 26.0, minWidth: 98.0), - decoration: BoxDecoration( - borderRadius: widget.shape == GFShape.pills ? BorderRadius.circular(50.0) : - widget.shape == GFShape.standard ? BorderRadius.circular(5.0) : BorderRadius.zero, - boxShadow: [ - widget.boxShadow == null && widget.buttonBoxShadow == true ? BoxShadow( - color: this.color.withOpacity(0.4), - blurRadius: 1.5, - spreadRadius: 2.0, - offset: Offset.zero, - ) : - widget.boxShadow != null ? widget.boxShadow : - BoxShadow( - color: Theme.of(context).canvasColor, - blurRadius: 0.0, - spreadRadius: 0.0, - offset: Offset.zero, - ) - ] - ), - child: Material( - textStyle: widget.textStyle == null ? TextStyle(color: this.textColor, fontSize: 14) : widget.textStyle, - shape: widget.type == GFType.transparent ? null : widget.borderShape== null ? shape : widget.borderShape, - color: widget.type != GFType.outline || widget.type == null ? this.color : Theme.of(context).canvasColor, - type: widget.type == GFType.transparent ? MaterialType.transparency : MaterialType.button, - animationDuration: widget.animationDuration, - clipBehavior: widget.clipBehavior, - child: InkWell( - onHighlightChanged: _handleHighlightChanged, - splashColor: widget.splashColor, - highlightColor: widget.highlightColor, - focusColor: widget.focusColor, - hoverColor: widget.hoverColor, - onHover: _handleHoveredChanged, - onTap: widget.onPressed, - customBorder: widget.borderShape == null ? shape : widget.borderShape, - child: IconTheme.merge( - data: IconThemeData(color: effectiveTextColor), - child: Container( - height: widget.blockButton == true ? BLOCK - : widget.fullWidthButton == true ? BLOCK - : this.size, - width: buttonWidth(), - padding: widget.padding, - child: Center( - widthFactor: 1.0, - heightFactor: 1.0, - child: this.icon != null && (this.position == GFPosition.start || this.position == null)? - Row( - mainAxisSize: MainAxisSize.min, - children: [ - this.icon, - 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, - ), - ), - ), + + final Widget result = Container( + constraints: this.icon == null ? BoxConstraints(minHeight: 26.0, minWidth: 88.0) : + BoxConstraints(minHeight: 26.0, minWidth: 98.0), + decoration: getBoxShadow(), + child: Material( + elevation: _effectiveElevation, + 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, + onHover: _handleHoveredChanged, + onTap: widget.onPressed, + 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, + 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) + ? Row( + mainAxisSize: MainAxisSize.min, + children: [ + this.child, + const SizedBox(width: 8.0), + this.icon + ], + ) + : this.child, ), ), ), ), ), ); + + return Semantics( + container: true, + button: true, + enabled: widget.enabled, + child: _InputPadding( + minSize: minSize, + child: result, + ), + ); + +// return Semantics( +// container: true, +// button: true, +// enabled: widget.enabled, +// child: _InputPadding( +// minSize: minSize, +// child: Focus( +// focusNode: widget.focusNode, +// onFocusChange: _handleFocusedChanged, +// autofocus: widget.autofocus, +// child: +// ), +// ), +// ); } } /// A widget to pad the area around a [MaterialButton]'s inner [Material]. +/// +/// Redirect taps that occur in the padded area around the child to the center +/// of the child. This increases the size of the button and the button's +/// "tap target", but not its material or its ink splashes. class _InputPadding extends SingleChildRenderObjectWidget { const _InputPadding({ Key key, @@ -441,8 +511,7 @@ class _InputPadding extends SingleChildRenderObjectWidget { } @override - void updateRenderObject( - BuildContext context, covariant _RenderInputPadding renderObject) { + void updateRenderObject(BuildContext context, covariant _RenderInputPadding renderObject) { renderObject.minSize = minSize; } } @@ -452,9 +521,9 @@ 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(); } @@ -502,7 +571,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; } @@ -517,3 +586,545 @@ class _RenderInputPadding extends RenderShiftedBox { ); } } + + + +//class GFButton extends StatefulWidget { +// /// Called when the button is tapped or otherwise activated. +// final VoidCallback onPressed; +// +// /// Called by the underlying [InkWell] widget's [InkWell.onHighlightChanged] callback. +// final ValueChanged onHighlightChanged; +// +// /// Defines the default text style, with [Material.textStyle], for the button's [child]. +// final TextStyle textStyle; +// +// /// The border side for the button's [Material]. +// final BorderSide borderSide; +// +// /// 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; +// +// /// The color for the button's [Material] when a pointer is hovering over it. +// final Color hoverColor; +// +// /// The highlight color for the button's [InkWell]. +// final Color highlightColor; +// +// /// The splash color for the button's [InkWell]. +// final Color splashColor; +// +// /// The elevation for the button's [Material] when the button is [enabled] but not pressed. +// final double elevation; +// +// /// The elevation for the button's [Material] when the button is [enabled] and a pointer is hovering over it. +// final double hoverElevation; +// +// /// The elevation for the button's [Material] when the button is [enabled] and has the input focus. +// final double focusElevation; +// +// /// The elevation for the button's [Material] when the button is [enabled] and pressed. +// final double highlightElevation; +// +// /// The elevation for the button's [Material] when the button is not [enabled]. +// final double disabledElevation; +// +// /// The internal padding for the button's [child]. +// final EdgeInsetsGeometry padding; +// +// /// Defines the button's size. +// final BoxConstraints constraints; +// +// /// The shape of the button's [Material]. +// final ShapeBorder borderShape; +// +// /// 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; +// +// /// Configures the minimum size of the tap target. +// final MaterialTapTargetSize materialTapTargetSize; +// +// /// {@macro flutter.widgets.Focus.focusNode} +// final FocusNode focusNode; +// +// /// {@macro flutter.widgets.Focus.autofocus} +// final bool autofocus; +// +// /// {@macro flutter.widgets.Clip} +// final Clip clipBehavior; +// +// /// Button type of [GFType] i.e, solid, outline, dashed +// final GFType type; +// +// /// Button type of [GFShape] i.e, standard, pills, square, shadow, icons +// final GFShape shape; +// +// /// Pass [GFColor] or [Color] +// final dynamic color; +// +// /// Pass [GFColor] or [Color] +// final dynamic textColor; +// +// /// 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 +// final String text; +// +// /// icon of type [Widget] +// final Widget icon; +// +// /// icon type of [GFIconPosition] i.e, start, end +// final GFPosition position; +// +// /// on true state blockButton gives block size button +// final bool blockButton; +// +// /// on true state full width Button gives full width button +// final bool fullWidthButton; +// +// /// on true state default box shadow appears around button +// final bool buttonBoxShadow; +// +// /// A set of thirteen colors that can be used to derive the button theme's +// /// colors. +// /// +// /// This property was added much later than the theme's set of highly +// /// specific colors, like [ThemeData.buttonColor], [ThemeData.highlightColor], +// /// [ThemeData.splashColor] etc. +// /// +// /// The colors for new button classes can be defined exclusively in terms +// /// of [colorScheme]. When it's possible, the existing buttons will +// /// (continue to) gradually migrate to it. +// final ColorScheme colorScheme; +// +// /// 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, +// this.shape = GFShape.standard, +// this.color, +// this.textColor = GFColor.dark, +// this.position = GFPosition.start, +// this.size = GFSize.medium, +// this.borderSide, +// this.text, +// this.icon, +// this.blockButton, +// this.fullWidthButton, +// this.colorScheme, +// }) : 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), +// assert(hoverElevation != null && hoverElevation >= 0.0), +// assert(highlightElevation != null && highlightElevation >= 0.0), +// assert(disabledElevation != null && disabledElevation >= 0.0), +// assert(padding != null), +// assert(animationDuration != null), +// assert(clipBehavior != null), +// assert(autofocus != null), +// super(key: key); +// +// @override +// _GFButtonState createState() => _GFButtonState(); +//} +// +//class _GFButtonState extends State { +//// Color color; +// Color textColor; +// Widget child; +// Widget icon; +// Function onPressed; +// GFType type; +// GFShape shape; +// double size; +// GFPosition position; +// BoxShadow boxShadow; +// final Set _states = {}; +// +// @override +// void initState() { +//// this.color = getGFColor(widget.color); +// this.textColor = getGFColor(widget.textColor); +// this.child = widget.text != null ? Text(widget.text) : widget.child; +// this.icon = widget.icon; +// this.onPressed = widget.onPressed; +// this.type = widget.type; +// 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 _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); +// } else if (widget.fullWidthButton == true) { +// return fullWidth(context); +// } else { +// return null; +// } +// } +// +// void _updateState(MaterialState state, bool value) { +// value ? _states.add(state) : _states.remove(state); +// } +// +// void _handleHighlightChanged(bool value) { +// if (_pressed != value) { +// setState(() { +// _updateState(MaterialState.pressed, value); +// if (widget.onHighlightChanged != null) { +// widget.onHighlightChanged(value); +// } +// }); +// } +// } +// +// void _handleHoveredChanged(bool value) { +// if (_hovered != value) { +// setState(() { +// _updateState(MaterialState.hovered, value); +// }); +// } +// } +// +// void _handleFocusedChanged(bool value) { +// if (_focused != value) { +// setState(() { +// _updateState(MaterialState.focused, value); +// }); +// } +// } +// +// @override +// void didUpdateWidget(GFButton oldWidget) { +// _updateState(MaterialState.disabled, !widget.enabled); +// // If the button is disabled while a press gesture is currently ongoing, +// // InkWell makes a call to handleHighlightChanged. This causes an exception +// // because it calls setState in the middle of a build. To preempt this, we +// // manually update pressed to false when this situation occurs. +// if (_disabled && _pressed) { +// _handleHighlightChanged(false); +// } +// super.didUpdateWidget(oldWidget); +// } +// +// // double get _effectiveElevation { +// // // These conditionals are in order of precedence, so be careful about +// // // reorganizing them. +// // if (_disabled) { +// // return widget.disabledElevation; +// // } +// // if (_pressed) { +// // return widget.highlightElevation; +// // } +// // if (_hovered) { +// // return widget.hoverElevation; +// // } +// // if (_focused) { +// // return widget.focusElevation; +// // } +// // return widget.elevation; +// // } +// +// @override +// Widget build(BuildContext context) { +// final Color effectiveTextColor = MaterialStateProperty.resolveAs( +// widget.textStyle?.color, _states); +// final Color themeColor = +// Theme.of(context).colorScheme.onSurface.withOpacity(0.12); +// final BorderSide outlineBorder = BorderSide( +// color: widget.borderSide == null ? themeColor : widget.borderSide.color, +// width: widget.borderSide?.width ?? 1.0, +// ); +// +// Size minSize; +// switch (widget.materialTapTargetSize) { +// case MaterialTapTargetSize.padded: +// minSize = const Size(48.0, 48.0); +// break; +// case MaterialTapTargetSize.shrinkWrap: +// minSize = Size.zero; +// break; +// default: +// minSize = Size.zero; +// break; +// } +// +// final BorderSide shapeBorder = widget.type == GFType.outline +// ? outlineBorder +// : widget.borderSide != null +// ? widget.borderSide +// : BorderSide( +// color: widget.color, +// width: 0.0, +// ); +// +// ShapeBorder shape; +// +// if (this.shape == GFShape.pills) { +// shape = RoundedRectangleBorder( +// borderRadius: BorderRadius.circular(50.0), side: shapeBorder); +// } else if (this.shape == GFShape.square) { +// shape = RoundedRectangleBorder( +// borderRadius: BorderRadius.circular(0.0), side: shapeBorder); +// } else if (this.shape == GFShape.standard) { +// shape = RoundedRectangleBorder( +// borderRadius: BorderRadius.circular(5.0), side: shapeBorder); +// } else { +// shape = RoundedRectangleBorder( +// borderRadius: BorderRadius.circular(50.0), side: shapeBorder); +// } +// +//// print("ccccccccccccccccccccc ${MaterialButton}"); +// +// Color getFillColor(MaterialButton button) { +// final Color color = button.enabled ? button.color : button.disabledColor; +// if (color != null) +// return color; +// +// if (button is FlatButton || button is OutlineButton || button.runtimeType == MaterialButton) +// return null; +// +// if (button.enabled && button is RaisedButton && widget.color != null) +// return widget.color; +// +// +// assert(false); +// return null; +// } +// +// print('ffffffffff ${ThemeData.disabledColor}'); +// +// return Semantics( +// container: true, +// button: true, +// enabled: widget.enabled, +// child: _InputPadding( +// minSize: minSize, +// child: Focus( +// focusNode: widget.focusNode, +// onFocusChange: _handleFocusedChanged, +// autofocus: widget.autofocus, +// child: Container( +// constraints: this.icon == null ? BoxConstraints(minHeight: 26.0, minWidth: 88.0) : +// BoxConstraints(minHeight: 26.0, minWidth: 98.0), +// decoration: BoxDecoration( +// borderRadius: widget.shape == GFShape.pills ? BorderRadius.circular(50.0) : +// widget.shape == GFShape.standard ? BorderRadius.circular(5.0) : BorderRadius.zero, +// boxShadow: [ +// widget.boxShadow == null && widget.buttonBoxShadow == true ? BoxShadow( +// color: widget.color.withOpacity(0.4), +// blurRadius: 1.5, +// spreadRadius: 2.0, +// offset: Offset.zero, +// ) : +// widget.boxShadow != null ? widget.boxShadow : +// BoxShadow( +// color: Theme.of(context).canvasColor, +// blurRadius: 0.0, +// spreadRadius: 0.0, +// offset: Offset.zero, +// ) +// ] +// ), +// child: Material( +// textStyle: widget.textStyle == null ? TextStyle(color: this.textColor, fontSize: 14) : widget.textStyle, +// shape: widget.type == GFType.transparent ? null : widget.borderShape == null ? shape : widget.borderShape, +// color: ThemeData.disabledColor, +// type: widget.type == GFType.transparent ? MaterialType.transparency : MaterialType.button, +// animationDuration: widget.animationDuration, +// clipBehavior: widget.clipBehavior, +// child: InkWell( +// onHighlightChanged: _handleHighlightChanged, +// splashColor: widget.splashColor, +// highlightColor: widget.highlightColor, +// focusColor: widget.focusColor, +// hoverColor: widget.hoverColor, +// onHover: _handleHoveredChanged, +// onTap: widget.onPressed, +// customBorder: widget.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, +// 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) +// ? Row( +// mainAxisSize: MainAxisSize.min, +// children: [ +// this.child, +// const SizedBox(width: 8.0), +// this.icon +// ], +// ) +// : this.child, +// ), +// ), +// ), +// ), +// ), +// ), +// ), +// ), +// ); +// } +//} +// +///// A widget to pad the area around a [MaterialButton]'s inner [Material]. +//class _InputPadding extends SingleChildRenderObjectWidget { +// const _InputPadding({ +// Key key, +// Widget child, +// this.minSize, +// }) : super(key: key, child: child); +// +// final Size minSize; +// +// @override +// RenderObject createRenderObject(BuildContext context) { +// return _RenderInputPadding(minSize); +// } +// +// @override +// void updateRenderObject( +// BuildContext context, covariant _RenderInputPadding renderObject) { +// renderObject.minSize = minSize; +// } +//} +// +//class _RenderInputPadding extends RenderShiftedBox { +// _RenderInputPadding(this._minSize, [RenderBox child]) : super(child); +// +// Size get minSize => _minSize; +// Size _minSize; +// +// set minSize(Size value) { +// if (_minSize == value) return; +// _minSize = value; +// markNeedsLayout(); +// } +// +// @override +// double computeMinIntrinsicWidth(double height) { +// if (child != null) +// return math.max(child.getMinIntrinsicWidth(height), minSize.width); +// return 0.0; +// } +// +// @override +// double computeMinIntrinsicHeight(double width) { +// if (child != null) +// return math.max(child.getMinIntrinsicHeight(width), minSize.height); +// return 0.0; +// } +// +// @override +// double computeMaxIntrinsicWidth(double height) { +// if (child != null) +// return math.max(child.getMaxIntrinsicWidth(height), minSize.width); +// return 0.0; +// } +// +// @override +// double computeMaxIntrinsicHeight(double width) { +// if (child != null) +// return math.max(child.getMaxIntrinsicHeight(width), minSize.height); +// return 0.0; +// } +// +// @override +// void performLayout() { +// if (child != null) { +// child.layout(constraints, parentUsesSize: true); +// final double height = math.max(child.size.width, minSize.width); +// final double width = math.max(child.size.height, minSize.height); +// size = constraints.constrain(Size(height, width)); +// final BoxParentData childParentData = child.parentData; +// childParentData.offset = Alignment.center.alongOffset(size - child.size); +// } else { +// size = Size.zero; +// } +// } +// +// @override +// bool hitTest(BoxHitTestResult result, {Offset position}) { +// if (super.hitTest(result, position: position)) { +// return true; +// } +// final Offset center = child.size.center(Offset.zero); +// return result.addWithRawTransform( +// transform: MatrixUtils.forceToPoint(center), +// position: center, +// hitTest: (BoxHitTestResult result, Offset position) { +// assert(position == center); +// return child.hitTest(result, position: center); +// }, +// ); +// } +//} diff --git a/lib/components/button/gf_icon_button.dart b/lib/components/button/gf_icon_button.dart index c169bb99..560a8b35 100644 --- a/lib/components/button/gf_icon_button.dart +++ b/lib/components/button/gf_icon_button.dart @@ -204,6 +204,35 @@ class _GFIconButtonState extends State { ); } + BoxDecoration getBoxShadow() { + if(widget.type != GFType.transparent){ + if(widget.boxShadow == null && widget.buttonBoxShadow != true){ + return null; + }else{ + return BoxDecoration( + color: widget.type == GFType.transparent || widget.type == GFType.outline ? Colors.transparent : this.color, + borderRadius: widget.shape == GFShape.pills ? BorderRadius.circular(50.0) : + widget.shape == GFShape.standard ? BorderRadius.circular(5.0) : BorderRadius.zero, + boxShadow: [ + widget.boxShadow == null && widget.buttonBoxShadow == true ? BoxShadow( + color: 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 Semantics( button: true, enabled: widget.onPressed != null, @@ -216,36 +245,12 @@ class _GFIconButtonState extends State { height: widget.shape == GFShape.pills ? this.height + 6 : this.height, width: widget.shape == GFShape.pills ? this.width + 6 : this.width, - decoration: BoxDecoration( - borderRadius: widget.shape == GFShape.pills - ? BorderRadius.circular(50.0) - : widget.shape == GFShape.standard - ? BorderRadius.circular(5.0) - : BorderRadius.zero, - boxShadow: [ - widget.boxShadow == null && widget.buttonBoxShadow == true - ? BoxShadow( - color: this.color.withOpacity(0.4), - blurRadius: 1.5, - spreadRadius: 2.0, - offset: Offset.zero, - ) - : widget.boxShadow != null - ? widget.boxShadow - : BoxShadow( - color: Theme.of(context).canvasColor, - blurRadius: 0.0, - spreadRadius: 0.0, - offset: Offset.zero, - ) - ]), + decoration: getBoxShadow(), child: Material( shape: widget.type == GFType.transparent ? null : widget.borderShape == null ? shape : widget.borderShape, - color: widget.type != GFType.outline || widget.type == null - ? this.color - : Theme.of(context).canvasColor, + color: widget.type == GFType.transparent || widget.type == GFType.outline ? Colors.transparent : this.color, type: widget.type == GFType.transparent ? MaterialType.transparency : MaterialType.button, diff --git a/lib/components/card/gf_card.dart b/lib/components/card/gf_card.dart index b46b59b3..a99df63d 100644 --- a/lib/components/card/gf_card.dart +++ b/lib/components/card/gf_card.dart @@ -1,7 +1,7 @@ import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:ui_kit/components/button_bar/gf_button_bar.dart'; -import 'package:ui_kit/components/list_item/gf_list_item.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/position/gf_position.dart'; @@ -62,7 +62,7 @@ class GFCard extends StatelessWidget { final bool semanticContainer; /// The title to display inside the [GFTitleBar]. see [GFTitleBar] - final GFListItem title; + final GFListTile title; /// widget can be used to define content final Widget content; @@ -106,9 +106,9 @@ class GFCard extends StatelessWidget { titlePosition == GFPosition.start ? image != null ? image : Container(): title != null ? title : Container(), Padding( padding: padding, - child: content, + child: content != null ? content : Container(), ), - buttonBar, + buttonBar == null ? Container() : buttonBar, ], ); diff --git a/lib/components/header/gf_header.dart b/lib/components/header/gf_header.dart index 1aadb06d..20f1709f 100644 --- a/lib/components/header/gf_header.dart +++ b/lib/components/header/gf_header.dart @@ -1,9 +1,11 @@ import 'package:flutter/material.dart'; import 'package:ui_kit/colors/gf_color.dart'; +import 'package:ui_kit/types/gf_heading_type.dart'; class GFHeader extends StatelessWidget { const GFHeader( {Key key, + this.type, this.child, this.text, this.icon, @@ -18,6 +20,8 @@ class GFHeader extends StatelessWidget { : super(key: key); + + /// child of type [Widget] is alternative to text key. text will get priority over child final Widget child; @@ -51,8 +55,29 @@ class GFHeader extends StatelessWidget { ///backgroundImagecolorFilter of type [ColorFilter] to set the background color of [GFHeader] only when backgroundImage is available final ColorFilter backgroundImagecolorFilter; + + /// header type of [GFHeaderType] i.e, typo1, typo2, typo3, typo4, typo5, typo6 + final GFHeadingType type; + @override Widget build(BuildContext context) { + + double fontSize; + + if(type == GFHeadingType.typo1){ + fontSize = 25.0; + }else if(type == GFHeadingType.typo2){ + fontSize = 22.0; + }else if (type == GFHeadingType.typo3){ + fontSize = 19.0; + }else if(type == GFHeadingType.typo4){ + fontSize = 17.0; + }else if (type == GFHeadingType.typo5){ + fontSize = 15.0; + }else if(type == GFHeadingType.typo6){ + fontSize = 13.0; + } + return Container( padding: EdgeInsets.all(backgroundImage != null ? 10 : 0), decoration: BoxDecoration( @@ -75,28 +100,28 @@ class GFHeader extends StatelessWidget { ? Padding(padding: EdgeInsets.only(left: 10)) : Container(), text != null - ? Text( - text, - style: TextStyle( - color: textColor != null - ? getGFColor(textColor) - : backgroundImage != null - ? Colors.white - : Colors.black, - fontSize: 16, - letterSpacing: 0.3, - fontWeight: FontWeight.w500), - ) + ? Expanded(child: Text( + text, + style: TextStyle( + color: textColor != null + ? getGFColor(textColor) + : backgroundImage != null + ? Colors.white + : Colors.black, + fontSize: fontSize, + letterSpacing: 0.3, + fontWeight: FontWeight.w500), + )) : child ], ), showDivider ? Container( - margin: EdgeInsets.only(top: 5, bottom: 5), + margin: EdgeInsets.only(top: 3, bottom: 3), alignment: dividerAlignment, child: Container( width: dividerWidth != null ? dividerWidth : 70, - height: 4, + height: fontSize/5, decoration: BoxDecoration( color: dividerColor != null ? getGFColor(dividerColor) diff --git a/lib/components/image/gf_image_overlay.dart b/lib/components/image/gf_image_overlay.dart index d373e7a8..9733d742 100644 --- a/lib/components/image/gf_image_overlay.dart +++ b/lib/components/image/gf_image_overlay.dart @@ -1,23 +1,24 @@ +import 'dart:ui'; + import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class GFImageOverlay extends StatelessWidget { - - const GFImageOverlay({ - Key key, - this.height, - this.width, - this.color, - this.padding, - this.margin, - this.image, - this.child, - this.alignment, - this.borderRadius, - this.colorFilter, - this.boxFit, - this.border - }) : super(key: key); + const GFImageOverlay( + {Key key, + this.height, + this.width, + this.color, + this.padding, + this.margin, + this.image, + this.child, + this.alignment, + this.borderRadius, + this.colorFilter= const ColorFilter.mode(Colors.black26, BlendMode.colorBurn), + this.boxFit, + this.border}) + : super(key: key); /// define image's [double] height final double height; @@ -49,7 +50,7 @@ class GFImageOverlay extends StatelessWidget { final BoxFit boxFit; /// A color filter to apply to the image before painting it. - final ColorFilter colorFilter; + final ColorFilter colorFilter ; /// The corners of this [GFCard] are rounded by this [BorderRadius]. final BorderRadiusGeometry borderRadius; @@ -59,11 +60,10 @@ class GFImageOverlay extends StatelessWidget { @override Widget build(BuildContext context) { - return Container( alignment: alignment, - height: height, - width: width, + height: height ?? MediaQuery.of(context).size.height * 0.3, + width: width ?? MediaQuery.of(context).size.width, margin: margin, padding: padding, child: child, @@ -72,14 +72,8 @@ class GFImageOverlay extends StatelessWidget { border: border, color: color, image: new DecorationImage( - fit: boxFit, - colorFilter: colorFilter, - image: image - ), + fit: BoxFit.fill, colorFilter: child != null? colorFilter: null, image: image), ), ); } } - - - diff --git a/lib/components/list_tile/gf_list_tile.dart b/lib/components/list_tile/gf_list_tile.dart index 900f352e..34fb92f5 100644 --- a/lib/components/list_tile/gf_list_tile.dart +++ b/lib/components/list_tile/gf_list_tile.dart @@ -2,38 +2,64 @@ import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:ui_kit/components/avatar/gf_avatar.dart'; -class GFListItem extends StatelessWidget { +class GFListTile extends StatelessWidget { /// The card's background color. final Color color; - /// [GFAvatar] used to create rounded user profile - final GFAvatar avatar; + /// type of [Widget] or [GFAvatar] used to create rounded user profile + final Widget avatar; - /// The title to display inside the [GFListItem]. see [Text] + /// The title to display inside the [GFListTile]. see [Text] final Widget title; - /// The subTitle to display inside the [GFListItem]. see [Text] + /// The subTitle to display inside the [GFListTile]. see [Text] final Widget subTitle; - /// The icon to display inside the [GFListItem]. see [Icon] + /// The descriprion to display inside the [GFListTile]. see [Text] + final Widget description; + + /// The icon to display inside the [GFListTile]. see [Icon] final Widget icon; - const GFListItem( + ///type of [bool] corresponds to true or false to show or hide the divider + final bool showDivider; + + const GFListTile( {Key key, this.color, this.avatar, this.title, this.subTitle, - this.icon}) + this.description, + this.icon, + this.showDivider = true + }) : super(key: key); @override Widget build(BuildContext context) { - return ListTile( - leading: avatar, - title: title, - subtitle: subTitle, - trailing: icon, + 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 + ), + showDivider ? Divider() : Container() + ], ); } } \ No newline at end of file diff --git a/lib/components/slider/gf_slider.dart b/lib/components/slider/gf_slider.dart index ce04c443..fe3a4846 100644 --- a/lib/components/slider/gf_slider.dart +++ b/lib/components/slider/gf_slider.dart @@ -1,5 +1,5 @@ import 'dart:async'; -import 'dart:ffi'; +//import 'dart:ffi'; import 'package:flutter/material.dart'; List map(List list, Function handler) { @@ -13,30 +13,32 @@ List map(List list, Function handler) { class GFSlider extends StatefulWidget { GFSlider( {@required this.items, - this.pagerSize, - this.passiveIndicator, - this.activeIndicator, - this.pagination, - this.height, - this.aspectRatio: 16 / 9, - this.viewportFraction: 0.8, - this.initialPage: 0, - int realPage: 10000, - this.enableInfiniteScroll: true, - this.reverse: false, - this.autoPlay: false, - this.autoPlayInterval: const Duration(seconds: 4), - this.autoPlayAnimationDuration = const Duration(milliseconds: 800), - this.autoPlayCurve: Curves.fastOutSlowIn, - this.pauseAutoPlayOnTouch, - this.enlargeMainPage = false, - this.onPageChanged, - this.scrollPhysics, - this.scrollDirection: Axis.horizontal}) - : this.realPage = enableInfiniteScroll ? realPage + initialPage : initialPage, + this.pagerSize, + this.passiveIndicator, + this.activeIndicator, + this.pagination, + this.height, + this.aspectRatio: 16 / 9, + this.viewportFraction: 0.8, + this.initialPage: 0, + int realPage: 10000, + this.enableInfiniteScroll: true, + this.reverse: false, + this.autoPlay: false, + this.autoPlayInterval: const Duration(seconds: 4), + this.autoPlayAnimationDuration = const Duration(milliseconds: 800), + this.autoPlayCurve: Curves.fastOutSlowIn, + this.pauseAutoPlayOnTouch, + this.enlargeMainPage = false, + this.onPageChanged, + this.scrollPhysics, + this.scrollDirection: Axis.horizontal}) + : this.realPage = + enableInfiniteScroll ? realPage + initialPage : initialPage, this.pageController = PageController( viewportFraction: viewportFraction, - initialPage: enableInfiniteScroll ? realPage + initialPage : initialPage, + initialPage: + enableInfiniteScroll ? realPage + initialPage : initialPage, ); /// The pagination dots size can be defined using [double]. @@ -136,8 +138,10 @@ class GFSlider extends StatefulWidget { /// Jumps the page position from its current value to the given value, /// without animation, and without checking if the new value is in range. void jumpToPage(int page) { - final index = _getRealIndex(pageController.page.toInt(), realPage, items.length); - return pageController.jumpToPage(pageController.page.toInt() + page - index); + final index = + _getRealIndex(pageController.page.toInt(), realPage, items.length); + return pageController + .jumpToPage(pageController.page.toInt() + page - index); } /// Animates the controlled [GFSlider] from the current page to the given page. @@ -145,9 +149,12 @@ class GFSlider extends StatefulWidget { /// The animation lasts for the given duration and follows the given curve. /// The returned [Future] resolves when the animation completes. Future animateToPage(int page, {Duration duration, Curve curve}) { - final index = _getRealIndex(pageController.page.toInt(), realPage, items.length); - return pageController.animateToPage(pageController.page.toInt() + page - index, - duration: duration, curve: curve); + final index = + _getRealIndex(pageController.page.toInt(), realPage, items.length); + return pageController.animateToPage( + pageController.page.toInt() + page - index, + duration: duration, + curve: curve); } @override @@ -166,8 +173,9 @@ class _GFSliderState extends State with TickerProviderStateMixin { Timer getPlayTimer() { return Timer.periodic(widget.autoPlayInterval, (_) { if (widget.autoPlay) { - widget.pageController - .nextPage(duration: widget.autoPlayAnimationDuration, curve: widget.autoPlayCurve); + widget.pageController.nextPage( + duration: widget.autoPlayAnimationDuration, + curve: widget.autoPlayCurve); } }); } @@ -186,7 +194,8 @@ class _GFSliderState extends State with TickerProviderStateMixin { ? addGestureDetection(wrapper) : wrapper; } else { - final Widget wrapper = AspectRatio(aspectRatio: widget.aspectRatio, child: child); + final Widget wrapper = + AspectRatio(aspectRatio: widget.aspectRatio, child: child); return widget.autoPlay && widget.pauseAutoPlayOnTouch != null ? addGestureDetection(wrapper) : wrapper; @@ -215,8 +224,8 @@ class _GFSliderState extends State with TickerProviderStateMixin { reverse: widget.reverse, itemCount: widget.enableInfiniteScroll ? null : widget.items.length, onPageChanged: (int index) { - - int currentPage = _getRealIndex(index + widget.initialPage, widget.realPage, widget.items.length); + int currentPage = _getRealIndex(index + widget.initialPage, + widget.realPage, widget.items.length); if (widget.onPageChanged != null) { widget.onPageChanged(currentPage); _current = currentPage; @@ -224,8 +233,8 @@ class _GFSliderState extends State with TickerProviderStateMixin { _current = currentPage; }, itemBuilder: (BuildContext context, int i) { - final int index = - _getRealIndex(i + widget.initialPage, widget.realPage, widget.items.length); + final int index = _getRealIndex( + i + widget.initialPage, widget.realPage, widget.items.length); return AnimatedBuilder( animation: widget.pageController, @@ -243,48 +252,63 @@ class _GFSliderState extends State with TickerProviderStateMixin { double value = widget.pageController.page - i; value = (1 - (value.abs() * 0.3)).clamp(0.0, 1.0); - final double height = - widget.height ?? MediaQuery.of(context).size.width * (1 / widget.aspectRatio); - final double distortionValue = - widget.enlargeMainPage ? Curves.easeOut.transform(value) : 1.0; + final double height = widget.height ?? + MediaQuery.of(context).size.width * + (1 / widget.aspectRatio); + final double distortionValue = widget.enlargeMainPage + ? Curves.easeOut.transform(value) + : 1.0; if (widget.scrollDirection == Axis.horizontal) { - return Center(child: SizedBox(height: distortionValue * height, child: child)); + return Center( + child: SizedBox( + height: distortionValue * height, child: child)); } else { return Center( child: SizedBox( - width: distortionValue * MediaQuery.of(context).size.width, child: child)); + width: distortionValue * + MediaQuery.of(context).size.width, + child: child)); } }, ); }, )), - widget.pagination == true ? Positioned( - left: 0.0, - right: 0.0, - bottom: 0.0, - child: Container( - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: map( - widget.items, - (indexx, url) { - return Container( - width: widget.pagerSize == null ? 8.0 : widget.pagerSize, - height: widget.pagerSize == null ? 8.0 : widget.pagerSize, - margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0), - decoration: BoxDecoration( - shape: BoxShape.circle, - color: _current == indexx - ? widget.activeIndicator == null ? Color.fromRGBO(0, 0, 0, 0.9) : widget.activeIndicator - : widget.passiveIndicator == null ? Color.fromRGBO(0, 0, 0, 0.4) : widget.passiveIndicator, + widget.pagination == true + ? Positioned( + left: 0.0, + right: 0.0, + bottom: 0.0, + child: Container( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: map( + widget.items, + (indexx, url) { + return Container( + width: + widget.pagerSize == null ? 8.0 : widget.pagerSize, + height: + widget.pagerSize == null ? 8.0 : widget.pagerSize, + margin: EdgeInsets.symmetric( + vertical: 10.0, horizontal: 2.0), + decoration: BoxDecoration( + shape: BoxShape.circle, + color: _current == indexx + ? widget.activeIndicator == null + ? Color.fromRGBO(0, 0, 0, 0.9) + : widget.activeIndicator + : widget.passiveIndicator == null + ? Color.fromRGBO(0, 0, 0, 0.4) + : widget.passiveIndicator, + ), + ); + }, ), - ); - }, - ), - ), - ), - ) : Container(), + ), + ), + ) + : Container(), ], ); } @@ -311,4 +335,4 @@ int _getRealIndex(int position, int base, int length) { int _remainder(int input, int source) { final int result = input % source; return result < 0 ? source + result : result; -} \ No newline at end of file +} diff --git a/lib/components/tabs/gf_tabs.dart b/lib/components/tabs/gf_tabs.dart index e69de29b..6226d7cf 100644 --- a/lib/components/tabs/gf_tabs.dart +++ b/lib/components/tabs/gf_tabs.dart @@ -0,0 +1,206 @@ +import 'package:flutter/material.dart'; +import 'package:flutter/foundation.dart'; +import 'package:flutter/rendering.dart'; +import 'package:flutter/widgets.dart'; +import 'package:ui_kit/components/button/gf_button.dart'; + + +class GFTabs extends StatefulWidget { + GFTabs({ + Key key, + this.initialIndex = 0, + @required this.length, + this.height, + 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, + }): + 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 [GFTabs] height + final double height; + + /// 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 [GFTabs.tabs] + /// list, as well as the [controller]'s [GFTabs.length]. + final TabBarView 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; + + + @override + _GFTabsState createState() => _GFTabsState(); +} + +class _GFTabsState extends State { + @override + Widget build(BuildContext context) { + return Container( + child: DefaultTabController( + initialIndex: widget.initialIndex, + length: widget.length, + child: Container( + height: widget.height == null ? MediaQuery.of(context).size.height * 0.5 : widget.height, + child: Column( + children: [ + Material( + type: MaterialType.button, + color: widget.tabBarColor ?? Theme.of(context).primaryColor, + 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, + ), + ), + Expanded( + child: widget.tabBarView + ), + ], + ), + ), + ), + ); + } +} + + + + + + + + + + + + + + + + + diff --git a/lib/components/toast/gf_floating_widget.dart b/lib/components/toast/gf_floating_widget.dart new file mode 100644 index 00000000..bb2c59de --- /dev/null +++ b/lib/components/toast/gf_floating_widget.dart @@ -0,0 +1,51 @@ +import 'package:flutter/material.dart'; +import 'package:ui_kit/components/toast/gf_toast.dart'; + +class GFFloatingWidget extends StatefulWidget { + const GFFloatingWidget( + {Key key, + this.child, + this.horizontalPosition, + this.verticalPosition, + this.body}) + : super(key: key); + + ///child of type [Widget] which floats across the body based on horizontal and vertical position + final Widget child; + + ///body of type [Widget] which is same as Scaffold's body + final Widget body; + + /// horizontalPosition of type [double] which aligns the child horizontally across the body + final double horizontalPosition; + + /// verticalPosition of type [double] which aligns the child vertically across the body + final double verticalPosition; + + @override + _GFFloatingWidgetState createState() => _GFFloatingWidgetState(); +} + +class _GFFloatingWidgetState extends State { + @override + Widget build(BuildContext context) { + var screenWidth = MediaQuery.of(context).size.width; + var screenHeight = MediaQuery.of(context).size.height; + return Stack( + children: [ + Container( + child: widget.body ?? Container(), + ), + Positioned( + top: widget.horizontalPosition != null + ? widget.horizontalPosition + : 0, + left: widget.verticalPosition != null ? widget.verticalPosition : 0, + child: Container( + width: MediaQuery.of(context).size.width, + child: widget.child ?? Container(), + )), + ], + ); + } +} diff --git a/lib/components/toast/gf_toast.dart b/lib/components/toast/gf_toast.dart index b3d0af01..182e42c7 100644 --- a/lib/components/toast/gf_toast.dart +++ b/lib/components/toast/gf_toast.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:flutter/widgets.dart'; import 'package:ui_kit/colors/gf_color.dart'; class GFToast extends StatelessWidget { @@ -31,7 +32,7 @@ class GFToast extends StatelessWidget { @override Widget build(BuildContext context) { return - ConstrainedBox(constraints: BoxConstraints(minHeight: 50.0,), child: Container( + ConstrainedBox(constraints: BoxConstraints(minHeight: 50.0, minWidth: 340), child: Container( margin: EdgeInsets.only(left: 10, right: 10), padding: EdgeInsets.all(10), decoration: BoxDecoration( @@ -50,7 +51,11 @@ class GFToast extends StatelessWidget { button!=null?Flexible( flex: 4, fit: FlexFit.tight, - child: button):Container() + child: Align( + alignment: Alignment.topRight, + child: button, + ) + ):Container() ], ), ),); diff --git a/lib/components/toggle/gf_toggle.dart b/lib/components/toggle/gf_toggle.dart index bf86b7ae..8fdb3e6c 100644 --- a/lib/components/toggle/gf_toggle.dart +++ b/lib/components/toggle/gf_toggle.dart @@ -18,10 +18,9 @@ class GFToggle extends StatefulWidget { this.type, this.boxShape, this.borderRadius, - this.duration}) + this.duration = const Duration(milliseconds: 400)}) : super(key: key); - ///type [String] used to add custom text i.e, ON,ENABLE final String enabledText; @@ -37,7 +36,7 @@ class GFToggle extends StatefulWidget { // ///type of [Color] used for the active thumb color final Color enabledThumbColor; - ///type of [Color] used for the inactive thumb color + ///type of [Color] used for the inactive thumb color final Color disabledThumbColor; ///type of [Color] used for the active track color @@ -55,7 +54,7 @@ class GFToggle extends StatefulWidget { ///type of animation [Duration] called when the switch animates during the specific duration final Duration duration; - /// Button type of [GFToggleType] i.e, android, ios, custom, sqaure + /// Button type of [GFToggleType] i.e, android, ios, custom, sqaure GFToggleType type; /// This property must not be null. Used to set the current state of toggle @@ -64,7 +63,7 @@ class GFToggle extends StatefulWidget { /// Called when the user toggles the switch on or off. final ValueChanged onChanged; - @override + @override _GFToggleState createState() => _GFToggleState(); } @@ -80,7 +79,8 @@ class _GFToggleState extends State with TickerProviderStateMixin { void initState() { super.initState(); controller = AnimationController(vsync: this, duration: widget.duration); - offset = Tween(begin: Offset.zero, end: Offset(1.0, 0.0)).animate(controller); + offset = Tween(begin: Offset.zero, end: Offset(1.0, 0.0)) + .animate(controller); } @override @@ -105,10 +105,9 @@ class _GFToggleState extends State with TickerProviderStateMixin { break; default: } - if(widget.onChanged!=null){ + if (widget.onChanged != null) { widget.onChanged(isOn); } - }, child: Stack( children: [ @@ -130,25 +129,31 @@ class _GFToggleState extends State with TickerProviderStateMixin { : widget.borderRadius ?? BorderRadius.all(Radius.circular(20))), child: Padding( - padding: widget.type == GFToggleType.ios ? EdgeInsets.only(left: 3.5, right: 3.5, top: 5.4): EdgeInsets.only(left: 3, right: 3, top: 3.4), + padding: widget.type == GFToggleType.ios + ? EdgeInsets.only(left: 3.5, right: 3.5, top: 5.4) + : EdgeInsets.only(left: 3, right: 3, top: 3.4), child: isOn ? Text( widget.enabledText ?? - ( widget.type == GFToggleType.custom - ? 'ON' - : ''), + (widget.type == GFToggleType.custom + ? 'ON' + : ''), style: widget.enabledTextStyle ?? - ( widget.type == GFToggleType.ios ?TextStyle(color: Colors.white, fontSize: 12): TextStyle(color: Colors.white, fontSize: 8)) - ) + (widget.type == GFToggleType.ios + ? TextStyle( + color: Colors.white, fontSize: 12) + : TextStyle( + color: Colors.white, fontSize: 8))) : Text( widget.disabledText ?? - ( widget.type == GFToggleType.custom - ? 'OFF' - : ''), + (widget.type == GFToggleType.custom + ? 'OFF' + : ''), textAlign: TextAlign.end, style: widget.disabledTextStyle ?? - ( widget.type == GFToggleType.ios ?TextStyle(color: Colors.white, fontSize: 12): TextStyle(color: Colors.white, fontSize: 8)) - ))), + (widget.type == GFToggleType.ios + ? TextStyle(color: Colors.white, fontSize: 12) + : TextStyle(color: Colors.white, fontSize: 8))))), ), Positioned( top: widget.type == GFToggleType.ios ? 7.5 : 3, @@ -167,7 +172,7 @@ class _GFToggleState extends State with TickerProviderStateMixin { break; default: } - if(widget.onChanged!=null){ + if (widget.onChanged != null) { widget.onChanged(isOn); } }, @@ -181,8 +186,9 @@ class _GFToggleState extends State with TickerProviderStateMixin { shape: widget.type == GFToggleType.square ? BoxShape.rectangle : widget.boxShape ?? BoxShape.circle, - color: isOn ? widget.enabledThumbColor ?? Colors.white - : widget.disabledThumbColor ?? Colors.white, + color: isOn + ? widget.enabledThumbColor ?? Colors.white + : widget.disabledThumbColor ?? Colors.white, boxShadow: [ new BoxShadow( color: Colors.black.withOpacity(0.16), @@ -190,9 +196,7 @@ class _GFToggleState extends State with TickerProviderStateMixin { spreadRadius: 0.0), ]), ), - ) - ) - ), + ))), ], ), ); diff --git a/lib/types/gf_heading_type.dart b/lib/types/gf_heading_type.dart new file mode 100644 index 00000000..23d7cdc6 --- /dev/null +++ b/lib/types/gf_heading_type.dart @@ -0,0 +1 @@ +enum GFHeadingType { typo1, typo2, typo3, typo4, typo5, typo6 } \ No newline at end of file