From 71b94e3aec1a6ccf0ea7de12a76c0daeca92224f Mon Sep 17 00:00:00 2001 From: deepikahr Date: Fri, 27 Dec 2019 11:07:26 +0530 Subject: [PATCH 01/21] continue on tabs --- example/lib/main.dart | 37 +++++++++++++++++++++++++++++++++++-- 1 file changed, 35 insertions(+), 2 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 578306fb..5dc85653 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -15,6 +15,7 @@ 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/colors/gf_color.dart'; final List imageList = [ "https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg", @@ -60,9 +61,41 @@ class _MyHomePageState extends State { child: Scaffold( appBar: AppBar( bottom: TabBar( +indicatorColor: Colors.lightGreen, + labelColor: Colors.orange, tabs: [ - Tab(icon: Icon(Icons.directions_car)), - Tab(icon: Icon(Icons.directions_transit)), + Container( + child: Column( + children: [ + Text("dcec"), + ], + ), + ), + + + 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: Colors.red, +// textColor: GFColor.secondary, +// icon: Icon(Icons.error, color: Colors.white,), +// position: GFIconPosition.start, +// boxShadow: BoxShadow( + color: GFColor.danger, +// blurRadius: 2.0, +// spreadRadius: 1.0, +// offset: Offset.zero, +// ), +// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), +// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), + ), Tab(icon: Icon(Icons.directions_bike)), ], ), From 06682ea39d9c0c434f0d72d2e7f5ea16d687ec22 Mon Sep 17 00:00:00 2001 From: deepikahr Date: Fri, 27 Dec 2019 14:45:54 +0530 Subject: [PATCH 02/21] GFTabs component created --- example/lib/main.dart | 493 ++++++++++++------------------- lib/components/tabs/gf_tabs.dart | 95 ++++++ 2 files changed, 282 insertions(+), 306 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 7321ee2d..2113cc13 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -27,6 +27,7 @@ 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'; final List imageList = [ "https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg", @@ -65,168 +66,48 @@ class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( - appBar: AppBar( - title: Text(widget.title), - ), - body: - - - SingleChildScrollView( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - - Container( - height: MediaQuery.of(context).size.height*0.5, - child: DefaultTabController( - length: 3, - child: Scaffold( - appBar: AppBar( - backgroundColor: Colors.blueGrey, - bottom: TabBar( - - tabs: [ - Tab(icon: Icon(Icons.directions_car)), - GFButton( - onPressed: null, - child: Text("share"), - icon: Icon(Icons.share), - type: GFType.outline, - shape: GFShape.pills, - ), - Tab(icon: Icon(Icons.directions_bike)), - ], - ), - ), - body: TabBarView( - children: [ - Icon(Icons.directions_car), - Icon(Icons.directions_transit), - Icon(Icons.directions_bike), - ], - ), - ), - ), - ), - - GFSlider( + appBar: AppBar( + title: Text(widget.title), + ), + body: 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, + 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, - ), + 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; - }); + ), + ); }, - ), + ).toList(), + onPageChanged: (index) { + setState(() { + index; + }); + }, + ), - Container( - width: MediaQuery.of(context).size.height * 0.5, - child: DefaultTabController( - initialIndex: 0, - length: 3, - child: Container( - height: MediaQuery.of(context).size.height * 0.5, - width: MediaQuery.of(context).size.height * 0.5, - child: Column( - children: [ - Container( -// color: Colors.teal, -// height: 5.0, - child: Material( - type: MaterialType.button, - color: Colors.teal, - child: TabBar( - indicatorColor: Colors.pink, - indicatorSize: TabBarIndicatorSize.tab, - 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', - ), - tabs: [ - GFButton( - onPressed: null, - child: Text("share"), - icon: Icon(Icons.share), - type: GFType.outline, - shape: GFShape.pills, - ), - Tab( - icon: Icon(Icons.error), - child: Text( - "Orders", - ), - ), - Tab( - child: Text( - "Pastry", - ), - ), - ], - ), - ), - ), - Expanded( - child: TabBarView( - children: [ - Container( - color: Colors.red, - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Icon(Icons.directions_railway), - GFButton( - onPressed: null, - child: Text("share"), - icon: Icon(Icons.share), - type: GFType.outline, - shape: GFShape.pills, - ), - ], - ), - ), - Icon(Icons.directions_car), - Icon(Icons.directions_transit), - ], - ), - ), - ], - ), - ), - ), - ), +GFTabs( + +), @@ -255,69 +136,47 @@ 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"), + 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, - ), + titlePosition: GFPosition.end, + title: GFTitleBar( + avatar: GFAvatar( + child: Text("tb"), ), - content: Text( - "Flutter " - "Flutter is Google's mobile UI framework for crafting" - " high-quality native interfaces on iOS and Android in " - "Flutter ", + title: Text( + 'title', 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, - ), - ], + subTitle: Text( + 'subtitle', + style: TextStyle(color: Colors.grey), + ), + icon: GFIconButton( + onPressed: null, + icon: Icon(Icons.favorite_border), + type: GFType.transparent, ), ), - GFButtonBar( + 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("like"), + child: Text("favorite"), icon: Icon(Icons.favorite_border), type: GFType.transparent, ), - GFButton( - onPressed: null, - child: Text("comment"), - ), GFButton( onPressed: null, child: Text("share"), @@ -326,87 +185,109 @@ class _MyHomePageState extends State { ), ], ), - GFTitleBar( - avatar: GFAvatar( - child: Text("tb"), - ), - title: Text('title'), - subTitle: Text('subtitle'), - icon: GFIconButton( + ), + GFButtonBar( + mainAxisSize: MainAxisSize.min, + children: [ + GFButton( onPressed: null, - type: GFType.transparent, + child: Text("like"), icon: Icon(Icons.favorite_border), + type: GFType.transparent, ), - ), - 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), - ), - ], + GFButton( + onPressed: null, + child: Text("comment"), ), + GFButton( + onPressed: null, + child: Text("share"), + icon: Icon(Icons.share), + type: GFType.outline, + ), + ], + ), + GFTitleBar( + avatar: GFAvatar( + child: Text("tb"), + ), + title: Text('title'), + subTitle: Text('subtitle'), + icon: GFIconButton( + onPressed: null, + type: GFType.transparent, + icon: Icon(Icons.favorite_border), + ), + ), + 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), - ), - GFAvatar( - // radius: 20.0, + ), + GFAvatar( + // radius: 20.0, // maxRadius: 50, - child: Text("de"), + child: Text("de"), // backgroundColor: Colors.pink, // @@ -419,15 +300,15 @@ class _MyHomePageState extends State { // size: GFSize.medium, // // borderRadius: BorderRadius.circular(20.0), - ), - GFIconBadges( + ), + GFIconBadges( + onPressed: null, + child: GFIconButton( onPressed: null, - child: GFIconButton( - onPressed: null, - icon: Icon(Icons.ac_unit), - ), - counterChild: GFBadge( - text: '12', + icon: Icon(Icons.ac_unit), + ), + counterChild: GFBadge( + text: '12', // color: GFColor.dark, // @@ -442,11 +323,11 @@ class _MyHomePageState extends State { // 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), + ), + GFIconButton( + onPressed: null, + icon: Icon(Icons.ac_unit), // iconSize: 12.0, // type: GFType.solid, // shape: GFShape.pills, @@ -461,41 +342,41 @@ 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), - ), - GFButtonBadge( - onPressed: null, + ), + 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', + text: 'goodies', // color: GFColor.danger, // 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', + ), + 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( + ), + GFButton( // type: GFType.solid, // shape: GFShape.pills, - text: 'goodies', - onPressed: () {}, + text: 'goodies', + onPressed: () {}, // textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), // size: GFSize.large, // buttonBoxShadow: true, @@ -513,10 +394,10 @@ 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/components/tabs/gf_tabs.dart b/lib/components/tabs/gf_tabs.dart index 8e5db810..e36e7887 100644 --- a/lib/components/tabs/gf_tabs.dart +++ b/lib/components/tabs/gf_tabs.dart @@ -1,3 +1,98 @@ +import 'package:flutter/material.dart'; + +class GFTabs extends StatefulWidget { + + @override + _GFTabsState createState() => _GFTabsState(); +} + +class _GFTabsState extends State { + @override + Widget build(BuildContext context) { + return Container( + width: MediaQuery.of(context).size.height * 0.5, + child: DefaultTabController( + initialIndex: 0, + length: 2, + child: Container( + height: MediaQuery.of(context).size.height * 0.5, + width: MediaQuery.of(context).size.height * 0.5, + child: Column( + children: [ + Material( + type: MaterialType.button, + color: Colors.teal, + child: TabBar( + indicatorColor: Colors.pink, + indicatorSize: TabBarIndicatorSize.tab, + 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', + ), + tabs: [ +// GFButton( +// onPressed: null, +// child: Text("share"), +// icon: Icon(Icons.share), +// type: GFType.outline, +// shape: GFShape.pills, +// ), + Tab( + icon: Icon(Icons.error), + child: Text( + "Orders", + ), + ), + Tab( + child: Text( + "Pastry", + ), + ), + ], + ), + ), + Expanded( + child: TabBarView( + children: [ +// Container( +// color: Colors.red, +// child: Column( +// mainAxisAlignment: MainAxisAlignment.center, +// crossAxisAlignment: CrossAxisAlignment.center, +// children: [ +// Icon(Icons.directions_railway), +//// GFButton( +//// onPressed: null, +//// child: Text("share"), +//// icon: Icon(Icons.share), +//// type: GFType.outline, +//// shape: GFShape.pills, +//// ), +// ], +// ), +// ), + Icon(Icons.directions_car), + Icon(Icons.directions_transit), + ], + ), + ), + ], + ), + ), + ), + ); + } +} From 6bb5121caa2e9aa37da7e495eac8cbc8d8b7726b Mon Sep 17 00:00:00 2001 From: deepikahr Date: Fri, 27 Dec 2019 16:06:01 +0530 Subject: [PATCH 03/21] GFTabs animation completed --- example/lib/main.dart | 59 +++++++- lib/components/tabs/gf_tabs.dart | 224 ++++++++++++++++++++++--------- 2 files changed, 217 insertions(+), 66 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 2113cc13..d34937ac 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -74,6 +74,7 @@ class _MyHomePageState extends State { mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ + GFSlider( // pagerSize: 12.0, // activeIndicator: Colors.pink, @@ -106,7 +107,63 @@ class _MyHomePageState extends State { ), GFTabs( - + initialIndex: 0, + length: 3, + tabs: [ + GFButton( + onPressed: null, + child: Text("share"), + icon: Icon(Icons.share), + ), + Tab( + icon: Icon(Icons.error), + child: Text( + "Orders", + ), + ), + Tab( + child: Text( + "Pastry", + ), + ), + ], + tabBarViewChild: TabBarView( + children: [ + Container( + color: Colors.red, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Icon(Icons.directions_railway), + GFButton( + onPressed: null, + child: Text("share"), + icon: Icon(Icons.share), + type: GFType.outline, + shape: GFShape.pills, + ), + ], + ), + ), + Icon(Icons.directions_car), + Icon(Icons.directions_transit), + ], + ), + 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', + ), ), diff --git a/lib/components/tabs/gf_tabs.dart b/lib/components/tabs/gf_tabs.dart index e36e7887..2bb9fb99 100644 --- a/lib/components/tabs/gf_tabs.dart +++ b/lib/components/tabs/gf_tabs.dart @@ -1,6 +1,150 @@ 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.tabBarViewChild, + 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 tabBarViewChild; + + /// 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(); @@ -10,81 +154,31 @@ class _GFTabsState extends State { @override Widget build(BuildContext context) { return Container( - width: MediaQuery.of(context).size.height * 0.5, child: DefaultTabController( - initialIndex: 0, - length: 2, + initialIndex: widget.initialIndex, + length: widget.length, child: Container( - height: MediaQuery.of(context).size.height * 0.5, - width: MediaQuery.of(context).size.height * 0.5, + height: widget.height == null ? MediaQuery.of(context).size.height * 0.5 : widget.height, child: Column( children: [ Material( type: MaterialType.button, - color: Colors.teal, + color: widget.tabBarColor ?? Theme.of(context).primaryColor, child: TabBar( - indicatorColor: Colors.pink, - indicatorSize: TabBarIndicatorSize.tab, - 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', - ), - tabs: [ -// GFButton( -// onPressed: null, -// child: Text("share"), -// icon: Icon(Icons.share), -// type: GFType.outline, -// shape: GFShape.pills, -// ), - Tab( - icon: Icon(Icons.error), - child: Text( - "Orders", - ), - ), - Tab( - child: Text( - "Pastry", - ), - ), - ], + 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: TabBarView( - children: [ -// Container( -// color: Colors.red, -// child: Column( -// mainAxisAlignment: MainAxisAlignment.center, -// crossAxisAlignment: CrossAxisAlignment.center, -// children: [ -// Icon(Icons.directions_railway), -//// GFButton( -//// onPressed: null, -//// child: Text("share"), -//// icon: Icon(Icons.share), -//// type: GFType.outline, -//// shape: GFShape.pills, -//// ), -// ], -// ), -// ), - Icon(Icons.directions_car), - Icon(Icons.directions_transit), - ], - ), + child: widget.tabBarViewChild ), ], ), From 2bc27188f97604cd3f0bfae49f24a4973fa26b95 Mon Sep 17 00:00:00 2001 From: deepikahr Date: Fri, 27 Dec 2019 17:13:33 +0530 Subject: [PATCH 04/21] GFTabs completed --- example/lib/main.dart | 147 ++++++++++++++++++------------- lib/components/card/gf_card.dart | 4 +- lib/components/tabs/gf_tabs.dart | 6 +- 3 files changed, 92 insertions(+), 65 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index d34937ac..7ada1eaf 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -74,6 +74,33 @@ class _MyHomePageState extends State { 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") +// ], +// ), +// ), +// ), +// ), GFSlider( // pagerSize: 12.0, @@ -106,67 +133,67 @@ class _MyHomePageState extends State { }, ), -GFTabs( - initialIndex: 0, - length: 3, - tabs: [ - GFButton( - onPressed: null, - child: Text("share"), - icon: Icon(Icons.share), - ), - Tab( - icon: Icon(Icons.error), - child: Text( - "Orders", - ), - ), - Tab( - child: Text( - "Pastry", - ), - ), - ], - tabBarViewChild: TabBarView( - children: [ - Container( - color: Colors.red, - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Icon(Icons.directions_railway), - GFButton( - onPressed: null, - child: Text("share"), - icon: Icon(Icons.share), - type: GFType.outline, - shape: GFShape.pills, + GFTabs( + initialIndex: 0, + length: 3, + tabs: [ + GFButton( + onPressed: null, + child: Text("share"), + icon: Icon(Icons.share), + ), + Tab( + icon: Icon(Icons.error), + child: Text( + "Orders", + ), + ), + Tab( + child: Text( + "Pastry", + ), + ), + ], + tabBarView: TabBarView( + children: [ + Container( + color: Colors.red, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Icon(Icons.directions_railway), + GFButton( + onPressed: null, + child: Text("share"), + icon: Icon(Icons.share), + type: GFType.transparent, + shape: GFShape.pills, + ), + ], + ), + ), + 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', +// ), ), - ], - ), - ), - Icon(Icons.directions_car), - Icon(Icons.directions_transit), - ], - ), - 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', - ), -), - - // GFSlider( // autoPlay: true, diff --git a/lib/components/card/gf_card.dart b/lib/components/card/gf_card.dart index 93ca4e30..90fada4b 100644 --- a/lib/components/card/gf_card.dart +++ b/lib/components/card/gf_card.dart @@ -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/tabs/gf_tabs.dart b/lib/components/tabs/gf_tabs.dart index 2bb9fb99..6226d7cf 100644 --- a/lib/components/tabs/gf_tabs.dart +++ b/lib/components/tabs/gf_tabs.dart @@ -22,7 +22,7 @@ class GFTabs extends StatefulWidget { this.labelPadding, this.unselectedLabelColor, this.unselectedLabelStyle, - this.tabBarViewChild, + this.tabBarView, this.tabs, }): assert(length != null && length >= 0), @@ -137,7 +137,7 @@ class GFTabs extends StatefulWidget { /// 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 tabBarViewChild; + final TabBarView tabBarView; /// Typically a list of two or more [Tab] widgets. /// @@ -178,7 +178,7 @@ class _GFTabsState extends State { ), ), Expanded( - child: widget.tabBarViewChild + child: widget.tabBarView ), ], ), From 6c9c07efc68c24f51c791efd8fd062a282cc02b6 Mon Sep 17 00:00:00 2001 From: deepikahr Date: Fri, 27 Dec 2019 18:00:46 +0530 Subject: [PATCH 05/21] GFTabs completed --- example/lib/main.dart | 2 ++ 1 file changed, 2 insertions(+) diff --git a/example/lib/main.dart b/example/lib/main.dart index 7ada1eaf..775b1ef8 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -162,6 +162,8 @@ class _MyHomePageState extends State { 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, From 428fc9e09d4bbb157779bf353209c4eba1aadb65 Mon Sep 17 00:00:00 2001 From: "Shravya.ckm" Date: Mon, 30 Dec 2019 10:21:41 +0530 Subject: [PATCH 06/21] list tile is in progress --- lib/components/card/gf_card.dart | 4 ++-- lib/components/list_tile/gf_list_tile.dart | 22 ++++++++++++++++------ lib/components/slider/gf_slider.dart | 2 +- 3 files changed, 19 insertions(+), 9 deletions(-) diff --git a/lib/components/card/gf_card.dart b/lib/components/card/gf_card.dart index b46b59b3..a1709bab 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; diff --git a/lib/components/list_tile/gf_list_tile.dart b/lib/components/list_tile/gf_list_tile.dart index 900f352e..d39b3d07 100644 --- a/lib/components/list_tile/gf_list_tile.dart +++ b/lib/components/list_tile/gf_list_tile.dart @@ -2,28 +2,32 @@ 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; - /// 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( + const GFListTile( {Key key, this.color, this.avatar, this.title, this.subTitle, + this.description, this.icon}) : super(key: key); @@ -32,7 +36,13 @@ class GFListItem extends StatelessWidget { return ListTile( leading: avatar, title: title, - subtitle: subTitle, + subtitle: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + subTitle ?? Container(), + description ?? Container() + ], + ), trailing: icon, ); } diff --git a/lib/components/slider/gf_slider.dart b/lib/components/slider/gf_slider.dart index ce04c443..aabdfa94 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) { From 3403ab097a95bbb21ea67346caf48a7dee286b7c Mon Sep 17 00:00:00 2001 From: "Shravya.ckm" Date: Mon, 30 Dec 2019 11:42:14 +0530 Subject: [PATCH 07/21] types of headers is in progress --- example/lib/main.dart | 20 +++++++++- lib/components/header/gf_header.dart | 6 +++ lib/components/list_tile/gf_list_tile.dart | 45 ++++++++++++++-------- lib/types/gf_header_type.dart | 1 + 4 files changed, 56 insertions(+), 16 deletions(-) create mode 100644 lib/types/gf_header_type.dart diff --git a/example/lib/main.dart b/example/lib/main.dart index 84b8e635..b3989475 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -126,9 +126,27 @@ class _MyHomePageState extends State { // // ), + + + + + GFListTile( +// avatar: Icon(Icons.format_align_center), +// icon:Icon(Icons.format_align_center), + title: Text('Header'), + ), + GFListTile( +// avatar: Icon(Icons.format_align_center), +// icon:Icon(Icons.format_align_center), + title: Text('Header'), + showDivider: false, + ), + + + GFListTile( avatar: GFAvatar(), - + icon: Icon(Icons.description), title: Text('Header'), subTitle: Text('Sub Header'), diff --git a/lib/components/header/gf_header.dart b/lib/components/header/gf_header.dart index 1aadb06d..6ee324a2 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_header_type.dart'; class GFHeader extends StatelessWidget { const GFHeader( {Key key, + this.type, this.child, this.text, this.icon, @@ -18,6 +20,10 @@ class GFHeader extends StatelessWidget { : super(key: key); + + + final GFHeaderType type; + /// child of type [Widget] is alternative to text key. text will get priority over child final Widget child; diff --git a/lib/components/list_tile/gf_list_tile.dart b/lib/components/list_tile/gf_list_tile.dart index d39b3d07..071795c6 100644 --- a/lib/components/list_tile/gf_list_tile.dart +++ b/lib/components/list_tile/gf_list_tile.dart @@ -6,8 +6,8 @@ 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 [GFListTile]. see [Text] final Widget title; @@ -21,29 +21,44 @@ class GFListTile extends StatelessWidget { /// The icon to display inside the [GFListTile]. see [Icon] final Widget icon; + final bool showDivider; + const GFListTile( {Key key, this.color, this.avatar, this.title, this.subTitle, - this.description, - this.icon}) + this.description, + this.icon, + this.showDivider = true + }) : super(key: key); @override Widget build(BuildContext context) { - return ListTile( - leading: avatar, - title: title, - subtitle: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - subTitle ?? Container(), - description ?? Container() - ], - ), - 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/types/gf_header_type.dart b/lib/types/gf_header_type.dart new file mode 100644 index 00000000..b7c95642 --- /dev/null +++ b/lib/types/gf_header_type.dart @@ -0,0 +1 @@ +enum GFHeaderType { typo1, typo2, typo3, typo4, typo5, typo6 } \ No newline at end of file From d880219c0e094e92c549ffc97da304eb09be78d4 Mon Sep 17 00:00:00 2001 From: "Shravya.ckm" Date: Mon, 30 Dec 2019 12:16:48 +0530 Subject: [PATCH 08/21] adding typograpy to the gf_header --- lib/components/header/gf_header.dart | 8 ++++---- lib/components/list_tile/gf_list_tile.dart | 1 + lib/types/gf_header_type.dart | 1 - lib/types/gf_heading_type.dart | 1 + 4 files changed, 6 insertions(+), 5 deletions(-) delete mode 100644 lib/types/gf_header_type.dart create mode 100644 lib/types/gf_heading_type.dart diff --git a/lib/components/header/gf_header.dart b/lib/components/header/gf_header.dart index 6ee324a2..65b295af 100644 --- a/lib/components/header/gf_header.dart +++ b/lib/components/header/gf_header.dart @@ -1,6 +1,6 @@ import 'package:flutter/material.dart'; import 'package:ui_kit/colors/gf_color.dart'; -import 'package:ui_kit/types/gf_header_type.dart'; +import 'package:ui_kit/types/gf_heading_type.dart'; class GFHeader extends StatelessWidget { const GFHeader( @@ -21,8 +21,8 @@ class GFHeader extends StatelessWidget { - - final GFHeaderType type; + /// Button type of [GFHeaderType] i.e, typo1, typo2, typo3, typo4, typo5, typo6 + final GFHeadingType type; /// child of type [Widget] is alternative to text key. text will get priority over child final Widget child; @@ -89,7 +89,7 @@ class GFHeader extends StatelessWidget { : backgroundImage != null ? Colors.white : Colors.black, - fontSize: 16, + fontSize: 16, letterSpacing: 0.3, fontWeight: FontWeight.w500), ) diff --git a/lib/components/list_tile/gf_list_tile.dart b/lib/components/list_tile/gf_list_tile.dart index 071795c6..34fb92f5 100644 --- a/lib/components/list_tile/gf_list_tile.dart +++ b/lib/components/list_tile/gf_list_tile.dart @@ -21,6 +21,7 @@ class GFListTile extends StatelessWidget { /// The icon to display inside the [GFListTile]. see [Icon] final Widget icon; + ///type of [bool] corresponds to true or false to show or hide the divider final bool showDivider; const GFListTile( diff --git a/lib/types/gf_header_type.dart b/lib/types/gf_header_type.dart deleted file mode 100644 index b7c95642..00000000 --- a/lib/types/gf_header_type.dart +++ /dev/null @@ -1 +0,0 @@ -enum GFHeaderType { typo1, typo2, typo3, typo4, typo5, typo6 } \ No newline at end of file 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 From c257c7d81da5cd00110b73d92a3c89fba88945d2 Mon Sep 17 00:00:00 2001 From: "Shravya.ckm" Date: Mon, 30 Dec 2019 12:50:04 +0530 Subject: [PATCH 09/21] typograpy done in gf_header --- example/lib/main.dart | 50 +++++++++++++++++++--------- lib/components/header/gf_header.dart | 29 +++++++++++++--- 2 files changed, 59 insertions(+), 20 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index b3989475..20d7c2c6 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -33,6 +33,7 @@ import 'package:ui_kit/components/header/gf_header.dart'; import 'package:ui_kit/position/gf_position.dart'; import 'package:ui_kit/components/toast/gf_toast.dart'; +import 'package:ui_kit/types/gf_heading_type.dart'; final List imageList = [ "https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg", @@ -144,6 +145,8 @@ class _MyHomePageState extends State { + + GFListTile( avatar: GFAvatar(), @@ -203,25 +206,42 @@ class _MyHomePageState extends State { 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, + child: Column( + children: [ + GFHeader( + text: 'GET FLUTTER HEADER', + type: GFHeadingType.typo1, + + ), + GFHeader( + text: 'GET FLUTTER HEADER', + type: GFHeadingType.typo2, + + ), + GFHeader( + text: 'GET FLUTTER HEADER', + type: GFHeadingType.typo3, +// dividerWidth: 20, + ), + GFHeader( + text: 'GET FLUTTER HEADER', + type: GFHeadingType.typo4, -// textColor: Colors.black, -// dividerColor: Colors.red, -//dividerAlignment: Alignment.center, + ), + GFHeader( + text: 'GET FLUTTER HEADER', + type: GFHeadingType.typo5, + ), + GFHeader( + text: 'GET FLUTTER HEADER', + type: GFHeadingType.typo6, + ), + ], + ) + ), -// child: Text('GF HEADER ', ), -// dividercolor: GFColor.warning, -// dividerBorderRadius: BorderRadius.all(Radius.circular(0)), - ), - ) ], ), diff --git a/lib/components/header/gf_header.dart b/lib/components/header/gf_header.dart index 65b295af..a164024c 100644 --- a/lib/components/header/gf_header.dart +++ b/lib/components/header/gf_header.dart @@ -21,8 +21,6 @@ class GFHeader extends StatelessWidget { - /// Button type of [GFHeaderType] i.e, typo1, typo2, typo3, typo4, typo5, typo6 - final GFHeadingType type; /// child of type [Widget] is alternative to text key. text will get priority over child final Widget child; @@ -57,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( @@ -89,7 +108,7 @@ class GFHeader extends StatelessWidget { : backgroundImage != null ? Colors.white : Colors.black, - fontSize: 16, + fontSize: fontSize, letterSpacing: 0.3, fontWeight: FontWeight.w500), ) @@ -98,11 +117,11 @@ class GFHeader extends StatelessWidget { ), 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) From 8fd677ab71be152d7d9f8b47f95811a113ffb2b0 Mon Sep 17 00:00:00 2001 From: deepikahr Date: Mon, 30 Dec 2019 12:51:08 +0530 Subject: [PATCH 10/21] transparent button color fixing --- example/lib/main.dart | 2 +- lib/colors/gf_color.dart | 2 ++ lib/components/button/gf_button.dart | 22 +++++++++++++++++----- 3 files changed, 20 insertions(+), 6 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index daf6be8c..6d399c58 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -170,8 +170,8 @@ class _MyHomePageState extends State { onPressed: null, child: Text("share"), icon: Icon(Icons.share), - type: GFType.transparent, shape: GFShape.pills, + type: GFType.transparent, ), ], ), 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/button/gf_button.dart b/lib/components/button/gf_button.dart index 6e2b1628..e3ea63a2 100644 --- a/lib/components/button/gf_button.dart +++ b/lib/components/button/gf_button.dart @@ -116,6 +116,18 @@ 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; + /// Create buttons of all types. check out [GFIconButton] for icon buttons, and [GFBadge] for badges const GFButton({ Key key, @@ -144,7 +156,7 @@ class GFButton extends StatefulWidget { this.child, this.type = GFType.solid, this.shape = GFShape.standard, - this.color = GFColor.primary, + this.color, this.textColor = GFColor.dark, this.position = GFPosition.start, this.size = GFSize.medium, @@ -153,6 +165,7 @@ class GFButton extends StatefulWidget { this.icon, this.blockButton, this.fullWidthButton, + this.colorScheme, }) : materialTapTargetSize = materialTapTargetSize ?? MaterialTapTargetSize.padded, assert(shape != null, 'Button shape can not be null'), @@ -333,7 +346,6 @@ class _GFButtonState extends State { borderRadius: BorderRadius.circular(50.0), side: shapeBorder); } - return Semantics( container: true, button: true, @@ -368,9 +380,9 @@ class _GFButtonState extends State { ), 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, + shape: widget.type == GFType.transparent ? null : widget.borderShape == null ? shape : widget.borderShape, + color: widget.type != GFType.transparent ? this.color : null, +// type: widget.type == GFType.transparent ? null : MaterialType.button, animationDuration: widget.animationDuration, clipBehavior: widget.clipBehavior, child: InkWell( From 83207a0cb913c9cd55a930785dae0abe33956594 Mon Sep 17 00:00:00 2001 From: deepikahr Date: Mon, 30 Dec 2019 14:36:42 +0530 Subject: [PATCH 11/21] working on button color transparency --- example/lib/main.dart | 701 ++++++++++++++------------- lib/components/button/gf_button.dart | 11 +- 2 files changed, 362 insertions(+), 350 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 6d399c58..40be896a 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -67,6 +67,7 @@ class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( + backgroundColor: Colors.grey, appBar: AppBar( title: Text(widget.title), ), @@ -103,100 +104,108 @@ class _MyHomePageState extends State { // ), // ), - 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( +//// 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; +// }); +// }, +// ), - GFTabs( - initialIndex: 0, - length: 3, - tabs: [ - GFButton( - onPressed: null, - child: Text("share"), - icon: Icon(Icons.share), - ), - Tab( - icon: Icon(Icons.error), - child: Text( - "Orders", - ), - ), - 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', -// ), + GFButton( + onPressed: null, + child: Text("share"), + icon: Icon(Icons.share), +// shape: GFShape.pills, +// type: GFType.transparent, ), +// +// GFTabs( +// initialIndex: 0, +// length: 3, +// tabs: [ +// GFButton( +// onPressed: null, +// child: Text("share"), +// icon: Icon(Icons.share), +// ), +// Tab( +// icon: Icon(Icons.error), +// child: Text( +// "Orders", +// ), +// ), +// 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', +//// ), +// ), // GFSlider( // autoPlay: true, @@ -223,265 +232,265 @@ 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: 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, - ), - ), - 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"), - ), - title: Text('title'), - subTitle: Text('subtitle'), - icon: GFIconButton( - onPressed: null, - type: GFType.transparent, - icon: Icon(Icons.favorite_border), - ), - ), - GFImageOverlay( - width: MediaQuery.of(context).size.width, - margin: EdgeInsets.all(16.0), - padding: EdgeInsets.all(16.0), - child: Column( - children: [ - new Text( - 'Hello world', - style: TextStyle(color: Colors.white), - ), - new Text( - 'Hello world', - style: TextStyle(color: Colors.white), - ), - new Text( - 'Hello world', - style: TextStyle(color: Colors.white), - ), - new Text( - 'Hello world', - style: TextStyle(color: Colors.white), - ), - new Text( - 'Hello world', - style: TextStyle(color: Colors.white), - ), - new Text( - 'Hello world', - style: TextStyle(color: Colors.white), - ), - new Text( - 'Hello world', - style: TextStyle(color: Colors.white), - ), - new Text( - 'Hello world', - style: TextStyle(color: Colors.white), - ), - new Text( - 'Hello world', - style: TextStyle(color: Colors.white), - ), - new Text( - 'Hello world', - style: TextStyle(color: Colors.white), - ), - new Text( - 'Hello world', - style: TextStyle(color: Colors.white), - ), - new Text( - 'Hello world', - style: TextStyle(color: Colors.white), - ), - ], - ), -// color: Colors.orange, - image: AssetImage("lib/assets/food.jpeg"), - boxFit: BoxFit.cover, - colorFilter: new ColorFilter.mode( - Colors.black.withOpacity(0.6), BlendMode.darken), - borderRadius: new BorderRadius.circular(5.0), -// border: Border.all(color: Colors.pink, width: 2.0), - ), - GFAvatar( - // radius: 20.0, -// maxRadius: 50, - - 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), +// 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, +// ), +// ), +// 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"), +// ), +// title: Text('title'), +// subTitle: Text('subtitle'), +// icon: GFIconButton( +// onPressed: null, +// type: GFType.transparent, +// icon: Icon(Icons.favorite_border), +// ), +// ), +// GFImageOverlay( +// width: MediaQuery.of(context).size.width, +// margin: EdgeInsets.all(16.0), +// padding: EdgeInsets.all(16.0), +// child: Column( +// children: [ +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// new Text( +// 'Hello world', +// style: TextStyle(color: Colors.white), +// ), +// ], +// ), +//// color: Colors.orange, +// image: AssetImage("lib/assets/food.jpeg"), +// boxFit: BoxFit.cover, +// colorFilter: new ColorFilter.mode( +// Colors.black.withOpacity(0.6), BlendMode.darken), +// borderRadius: new BorderRadius.circular(5.0), +//// border: Border.all(color: Colors.pink, width: 2.0), +// ), +// GFAvatar( +// // radius: 20.0, +//// maxRadius: 50, // -// textColor: GFColor.white, +// child: Text("de"), // -// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), +//// 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', // -// 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, +//// color: GFColor.dark, +//// +//// shape: GFShape.circle, +//// +//// size: GFSize.small, +//// +//// border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), +//// +//// textColor: GFColor.white, +//// +//// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), +//// +//// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.orange, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), // ), -// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), -// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), - ), - 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, +// ), +// GFIconButton( +// onPressed: null, +// icon: Icon(Icons.ac_unit), +//// iconSize: 12.0, +//// type: GFType.solid, +//// shape: GFShape.pills, +//// size: GFSize.large, +//// buttonBoxShadow: true, +//// color: GFColor.primary, +//// boxShadow: BoxShadow( +//// color: Colors.pink, +//// blurRadius: 2.0, +//// spreadRadius: 1.0, +//// offset: Offset.zero, +//// ), +//// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), +//// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), +// ), +// GFButtonBadge( +// onPressed: null, +//// position: GFIconPosition.start, +//// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), +//// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), +// text: 'goodies', +//// color: GFColor.danger, +//// shape: GFShape.pills, +//// type: GFType.outline, +//// size: GFSize.small, +// counterChild: GFBadge( +// child: Text("12"), +//// color: GFColor.dark, +//// shape: GFShape.circle, +//// size: GFSize.small, +//// border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), +//// textColor: GFColor.white, +//// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), // ), -// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), -// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), - ), +// ), +// GFBadge( +// text: '12', +//// color: GFColor.dark, +//// shape: GFShape.circle, +//// size: GFSize.small, +//// border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), +//// textColor: GFColor.white, +//// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), +// ), +// GFButton( +//// type: GFType.solid, +//// shape: GFShape.pills, +// text: 'goodies', +// onPressed: () {}, +//// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), +//// size: GFSize.large, +//// buttonBoxShadow: true, +//// blockButton: true, +//// fullWidthButton: true, +//// color: GFColor.primary, +//// textColor: GFColor.secondary, +//// icon: Icon(Icons.error, color: Colors.white,), +//// position: GFIconPosition.start, +//// boxShadow: BoxShadow( +//// color: Colors.pink, +//// blurRadius: 2.0, +//// spreadRadius: 1.0, +//// offset: Offset.zero, +//// ), +//// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), +//// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), +// ), ], ), ), diff --git a/lib/components/button/gf_button.dart b/lib/components/button/gf_button.dart index e3ea63a2..5c9b48ce 100644 --- a/lib/components/button/gf_button.dart +++ b/lib/components/button/gf_button.dart @@ -156,7 +156,7 @@ class GFButton extends StatefulWidget { this.child, this.type = GFType.solid, this.shape = GFShape.standard, - this.color, + this.color = GFColor.primary, this.textColor = GFColor.dark, this.position = GFPosition.start, this.size = GFSize.medium, @@ -346,6 +346,9 @@ class _GFButtonState extends State { borderRadius: BorderRadius.circular(50.0), side: shapeBorder); } + print("ccccccccccccccccccccc ${widget.type}"); + + return Semantics( container: true, button: true, @@ -381,8 +384,8 @@ class _GFButtonState extends State { 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 ? this.color : null, -// type: widget.type == GFType.transparent ? null : MaterialType.button, + color: widget.type == null ? this.color : Colors.teal , + type: widget.type == GFType.transparent ? MaterialType.transparency : MaterialType.button, animationDuration: widget.animationDuration, clipBehavior: widget.clipBehavior, child: InkWell( @@ -393,7 +396,7 @@ class _GFButtonState extends State { hoverColor: widget.hoverColor, onHover: _handleHoveredChanged, onTap: widget.onPressed, - customBorder: 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( From 45df68b0d85c5aef23fca9b04e13c24480e05bf5 Mon Sep 17 00:00:00 2001 From: "Shravya.ckm" Date: Mon, 30 Dec 2019 15:33:31 +0530 Subject: [PATCH 12/21] checking all the components --- example/lib/main.dart | 145 +++++++++++++++------ lib/components/header/gf_header.dart | 24 ++-- lib/components/image/gf_image_overlay.dart | 46 +++---- lib/components/toast/gf_toast.dart | 70 ++++++---- 4 files changed, 179 insertions(+), 106 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 20d7c2c6..28ce208d 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -90,6 +90,7 @@ class _MyHomePageState extends State { child: Column( children: [ + // GFCard( //// boxFit: BoxFit.cover, //// colorFilter: new ColorFilter.mode( @@ -97,7 +98,7 @@ class _MyHomePageState extends State { // image: Image.asset("lib/assets/food.jpeg"), //// imageOverlay: AssetImage("lib/assets/food.jpeg"), // titlePosition: GFPosition.end, -// title: GFListItem( +// title: GFListTile( // avatar: GFAvatar( // child: Text("tb"), // ), @@ -117,56 +118,72 @@ class _MyHomePageState extends State { // ), // ), -// -// GFCard( -// title: GFListItem( -// title: Text('dcrfvjn'), -// subTitle: Text('fghjk'), -// -// ), -// -// ), - + GFAvatar(), + GFBadge( + child: Text('1')), +GFButton(onPressed: null, +type: GFType.solid, + text: 'CLICK', +// position: GFPosition.end, + icon: Icon(Icons.face), + textStyle: TextStyle(color: Colors.black), +), + + GFButtonBar( + children: [ + Text('jk'), + Icon(Icons.face) + ], + ), - - - GFListTile( -// avatar: Icon(Icons.format_align_center), -// icon:Icon(Icons.format_align_center), - title: Text('Header'), - ), + GFListTile( -// avatar: Icon(Icons.format_align_center), -// icon:Icon(Icons.format_align_center), - title: Text('Header'), + avatar: Icon(Icons.format_align_center), + icon:Icon(Icons.format_align_center), + title: GFHeader( + type: GFHeadingType.typo3, + text: 'GFHeader in GFListTile', + + backgroundImage: NetworkImage('https://cdn.pixabay.com/photo/2019/12/22/19/14/christmas-4713177_960_720.jpg') + ), + subTitle: Text('Sub Header'), + description: Text('Lorem ipsum gf header used to show the header of the list tile'), showDivider: false, ), - - - - 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( + backgroundColor: GFColor.primary, + + button: GFToggle( + onChanged: null, + value: null, + type: GFToggleType.ios, + duration: Duration(milliseconds: 400), + ), +// text: 'hjkk', + child: GFHeader( + text: 'GFHEADER inside GFTOAST ', + type: GFHeadingType.typo5, + ), + ), ), + Container( margin: EdgeInsets.only(top:10), child: GFToast( -// -// -// -// button: GFButton( -// onPressed: null, -// type: GFType.outline, -// text: 'Accept', -// ), - text: 'Marked as Favorite.', + backgroundColor: GFColor.primary, + + button: GFButton( + type: GFType.outline, + text: 'CLICK', + onPressed: null, +// position: GFPosition.end, + ), + text: 'Marked as Favorite ', ), ), Container( @@ -241,6 +258,54 @@ class _MyHomePageState extends State { ], ) ), + + GFImageOverlay( + height: 250, +// colorFilter: ColorFilter.mode(Colors.black, BlendMode.colorBurn), + child: Column( + children: [ + GFHeader( + text: 'GET FLUTTER HEADER', + type: GFHeadingType.typo3, + textColor: GFColor.white, +dividerColor: GFColor.white, +// dividerWidth: 20, + ), + GFListTile( + avatar: GFAvatar( + backgroundColor: Colors.white, + ), + icon:Icon(Icons.keyboard_arrow_right, color: Colors.white,), + title: GFHeader( + type: GFHeadingType.typo3, + text: 'GFHeader in GFListTile', + + backgroundImage: NetworkImage('https://cdn.pixabay.com/photo/2019/12/22/19/14/christmas-4713177_960_720.jpg') + ), + subTitle: Text('Sub Header', style: TextStyle(color: Colors.white),), + description: Text('Lorem ipsum gf header used to show the header of the list tile', style: TextStyle(color: Colors.white),), + showDivider: false, + ), + + GFToast( + backgroundColor: GFColor.primary, + + button: GFButton( + type: GFType.outline, + text: 'CLICK', + onPressed: null, +// position: GFPosition.end, + ), + text: 'Marked as Favorite ', + ), + ], + ), +// height: screenHeight, +//width: screenWidth, +// image: NetworkImage('https://cdn.pixabay.com/photo/2019/12/22/19/14/christmas-4713177_960_720.jpg'), + + image: AssetImage('lib/assets/food.jpeg') + ) ], diff --git a/lib/components/header/gf_header.dart b/lib/components/header/gf_header.dart index a164024c..20f1709f 100644 --- a/lib/components/header/gf_header.dart +++ b/lib/components/header/gf_header.dart @@ -100,18 +100,18 @@ 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: fontSize, - 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 ], ), diff --git a/lib/components/image/gf_image_overlay.dart b/lib/components/image/gf_image_overlay.dart index d373e7a8..3cceae5b 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, + this.boxFit, + this.border}) + : super(key: key); /// define image's [double] height final double height; @@ -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: colorFilter, image: image), ), ); } } - - - diff --git a/lib/components/toast/gf_toast.dart b/lib/components/toast/gf_toast.dart index b3d0af01..4eb35e50 100644 --- a/lib/components/toast/gf_toast.dart +++ b/lib/components/toast/gf_toast.dart @@ -2,21 +2,21 @@ import 'package:flutter/material.dart'; import 'package:ui_kit/colors/gf_color.dart'; class GFToast extends StatelessWidget { - /// - GFToast({Key key, + GFToast({ + Key key, this.child, this.button, this.backgroundColor, this.text, - this.textStyle = const TextStyle(color: Colors.white70), - }) :super(key: key); + this.textStyle = const TextStyle(color: Colors.white70), + }) : super(key: key); /// child of type [Widget]is alternative to text key. text will get priority over child final Widget child; /// button of type [Widget],or you can use [GFButton] for easy implementation with [GFToast] - final Widget button; + final Widget button; ///pass color of type [Color] or [GFColor] for background of [GFToast] final dynamic backgroundColor; @@ -27,32 +27,46 @@ class GFToast extends StatelessWidget { /// textStyle will be applicable to text only and not for the child final TextStyle textStyle; - @override Widget build(BuildContext context) { - return - ConstrainedBox(constraints: BoxConstraints(minHeight: 50.0,), child: Container( - margin: EdgeInsets.only(left: 10, right: 10), - padding: EdgeInsets.all(10), - decoration: BoxDecoration( - borderRadius: BorderRadius.all(Radius.circular(3)), - color: backgroundColor!=null ?getGFColor(backgroundColor):Color(0xff323232), + return ConstrainedBox( + constraints: BoxConstraints( + minHeight: 50.0, ), - child: Row( - children: [ - Flexible( - flex: 7, - fit: FlexFit.tight, - child: text!=null ? Text(text , style: textStyle):(child??Container()),), - SizedBox( - width: 10, - ), - button!=null?Flexible( - flex: 4, + child: Container( + margin: EdgeInsets.only(left: 10, right: 10), + padding: EdgeInsets.all(10), + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(3)), + color: backgroundColor != null + ? getGFColor(backgroundColor) + : Color(0xff323232), + ), + child: Row( +// mainAxisAlignment: MainAxisAlignment.end, + children: [ + Flexible( + flex: 7, fit: FlexFit.tight, - child: button):Container() - ], + child: text != null + ? Text(text, style: textStyle) + : (child ?? Container()), + ), + SizedBox( + width: 10, + ), + button != null + ? Flexible( + flex: 4, + fit: FlexFit.tight, + child: Align( + alignment: Alignment.topRight, + child: button, + )) + : Container() + ], + ), ), - ),); + ); } -} \ No newline at end of file +} From ce843969b9f77bea0fff04e9298696912f2ab4c6 Mon Sep 17 00:00:00 2001 From: "Shravya.ckm" Date: Mon, 30 Dec 2019 15:49:08 +0530 Subject: [PATCH 13/21] overlay image modified --- example/lib/main.dart | 2 +- lib/components/image/gf_image_overlay.dart | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 28ce208d..b22fded9 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -261,7 +261,7 @@ type: GFType.solid, GFImageOverlay( height: 250, -// colorFilter: ColorFilter.mode(Colors.black, BlendMode.colorBurn), + child: Column( children: [ GFHeader( diff --git a/lib/components/image/gf_image_overlay.dart b/lib/components/image/gf_image_overlay.dart index 3cceae5b..9733d742 100644 --- a/lib/components/image/gf_image_overlay.dart +++ b/lib/components/image/gf_image_overlay.dart @@ -15,7 +15,7 @@ class GFImageOverlay extends StatelessWidget { this.child, this.alignment, this.borderRadius, - this.colorFilter, + this.colorFilter= const ColorFilter.mode(Colors.black26, BlendMode.colorBurn), this.boxFit, this.border}) : super(key: key); @@ -50,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; @@ -72,7 +72,7 @@ class GFImageOverlay extends StatelessWidget { border: border, color: color, image: new DecorationImage( - fit: BoxFit.fill, colorFilter: colorFilter, image: image), + fit: BoxFit.fill, colorFilter: child != null? colorFilter: null, image: image), ), ); } From f892292c0bf9b3b5ad8c5baeb9b40ddb3651c474 Mon Sep 17 00:00:00 2001 From: "Shravya.ckm" Date: Mon, 30 Dec 2019 16:44:45 +0530 Subject: [PATCH 14/21] different positions of toast is in progress --- lib/components/toast/gf_floating_widget.dart | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 lib/components/toast/gf_floating_widget.dart diff --git a/lib/components/toast/gf_floating_widget.dart b/lib/components/toast/gf_floating_widget.dart new file mode 100644 index 00000000..af2a036a --- /dev/null +++ b/lib/components/toast/gf_floating_widget.dart @@ -0,0 +1,14 @@ +import 'package:flutter/material.dart'; + + +class FloatingWidget extends StatefulWidget { + @override + _FloatingWidgetState createState() => _FloatingWidgetState(); +} + +class _FloatingWidgetState extends State { + @override + Widget build(BuildContext context) { + return Container(); + } +} From e5d976ccd4a3a5dbeb69f0b22258a403f3e7aafa Mon Sep 17 00:00:00 2001 From: deepikahr Date: Mon, 30 Dec 2019 16:47:35 +0530 Subject: [PATCH 15/21] transparent button problem fixed --- example/lib/main.dart | 10 +- lib/components/badge/gf_button_badge.dart | 23 +- lib/components/button/gf_button.dart | 826 +++++++++++++++++++--- 3 files changed, 743 insertions(+), 116 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 40be896a..65e9547f 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -135,12 +135,16 @@ class _MyHomePageState extends State { // }, // ), + RawMaterialButton(onPressed: null, child: Text("fv"),), + FlatButton(onPressed: null, child: Text("cds")), + + GFButton( + color: Colors.orange, onPressed: null, child: Text("share"), - icon: Icon(Icons.share), -// shape: GFShape.pills, -// type: GFType.transparent, + type: GFType.outline, + shape: GFShape.standard, ), // // GFTabs( diff --git a/lib/components/badge/gf_button_badge.dart b/lib/components/badge/gf_button_badge.dart index 3dd55974..9b0eeca6 100644 --- a/lib/components/badge/gf_button_badge.dart +++ b/lib/components/badge/gf_button_badge.dart @@ -101,17 +101,18 @@ class _GFButtonBadgeState extends State { 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), +// 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/button/gf_button.dart b/lib/components/button/gf_button.dart index 5c9b48ce..7fa2d67f 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; @@ -128,6 +129,25 @@ class GFButton extends StatefulWidget { /// (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, @@ -154,9 +174,9 @@ class GFButton extends StatefulWidget { this.autofocus = false, MaterialTapTargetSize materialTapTargetSize, this.child, - this.type = GFType.solid, + this.type, this.shape = GFShape.standard, - this.color = GFColor.primary, + this.color, this.textColor = GFColor.dark, this.position = GFPosition.start, this.size = GFSize.medium, @@ -166,8 +186,10 @@ class GFButton extends StatefulWidget { 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), @@ -185,7 +207,7 @@ class GFButton extends StatefulWidget { } class _GFButtonState extends State { - Color color; +// Color color; Color textColor; Widget child; Widget icon; @@ -199,7 +221,7 @@ class _GFButtonState extends State { @override void initState() { - this.color = getGFColor(widget.color); +// this.color = getGFColor(widget.color); this.textColor = getGFColor(widget.textColor); this.child = widget.text != null ? Text(widget.text) : widget.child; this.icon = widget.icon; @@ -279,6 +301,8 @@ class _GFButtonState extends State { super.didUpdateWidget(oldWidget); } + + // double get _effectiveElevation { // // These conditionals are in order of precedence, so be careful about // // reorganizing them. @@ -297,12 +321,36 @@ class _GFButtonState extends State { // 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, @@ -324,13 +372,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: widget.color == null ? themeColor : widget.color, + width: 0.0, + ); + - ShapeBorder shape; if (this.shape == GFShape.pills) { shape = RoundedRectangleBorder( @@ -346,101 +394,134 @@ class _GFButtonState extends State { borderRadius: BorderRadius.circular(50.0), side: shapeBorder); } - print("ccccccccccccccccccccc ${widget.type}"); - - - 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 == null ? this.color : Colors.teal , - 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, - ), - ), - ), +// 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; + } + + + + final Widget result = ConstrainedBox( + 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: widget.type == GFType.transparent || widget.type == GFType.outline ? Colors.transparent : widget.color, + type: widget.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, @@ -456,8 +537,7 @@ class _InputPadding extends SingleChildRenderObjectWidget { } @override - void updateRenderObject( - BuildContext context, covariant _RenderInputPadding renderObject) { + void updateRenderObject(BuildContext context, covariant _RenderInputPadding renderObject) { renderObject.minSize = minSize; } } @@ -467,9 +547,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(); } @@ -517,7 +597,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; } @@ -532,3 +612,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); +// }, +// ); +// } +//} From 606096257beb0b3ff682d7ec4679ba3104577bee Mon Sep 17 00:00:00 2001 From: deepikahr Date: Mon, 30 Dec 2019 17:41:43 +0530 Subject: [PATCH 16/21] button outline with boxshadow fixed --- example/lib/main.dart | 278 +++++++++++----------- lib/components/button/gf_button.dart | 100 +++----- lib/components/button/gf_icon_button.dart | 57 +++-- 3 files changed, 211 insertions(+), 224 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 65e9547f..5403bbf9 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -67,7 +67,7 @@ class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( - backgroundColor: Colors.grey, + backgroundColor: Colors.orange, appBar: AppBar( title: Text(widget.title), ), @@ -145,71 +145,79 @@ class _MyHomePageState extends State { child: Text("share"), type: GFType.outline, shape: GFShape.standard, + buttonBoxShadow: true, +// boxShadow: BoxShadow( +// color: Colors.pink.withOpacity(0.4), +// blurRadius: 1.5, +// spreadRadius: 2.0, +// offset: Offset.zero, +// ), ), -// -// GFTabs( -// initialIndex: 0, -// length: 3, -// tabs: [ -// GFButton( -// onPressed: null, -// child: Text("share"), -// icon: Icon(Icons.share), -// ), -// Tab( -// icon: Icon(Icons.error), -// child: Text( -// "Orders", -// ), -// ), -// 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), -// ], + + GFTabs( + initialIndex: 0, + length: 3, + tabs: [ + GFButton( + onPressed: null, + child: Text("share"), + icon: Icon(Icons.share), + buttonBoxShadow: true, + ), + Tab( + icon: Icon(Icons.error), + child: Text( + "Orders", + ), + ), + Tab( + child: Text( + "Pastry", + ), + ), + ], + tabBarView: 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', // ), -//// 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', -//// ), -// ), +// unselectedLabelStyle: TextStyle( +// fontWeight: FontWeight.w500, +// fontSize: 13.0, +// color: Colors.black, +// fontFamily: 'OpenSansBold', +// ), + ), // GFSlider( // autoPlay: true, @@ -236,77 +244,77 @@ 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: 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, -// ), -// ), -// 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, -// ), -// ], -// ), + 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, + ), + ), + 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"), diff --git a/lib/components/button/gf_button.dart b/lib/components/button/gf_button.dart index 7fa2d67f..58a86555 100644 --- a/lib/components/button/gf_button.dart +++ b/lib/components/button/gf_button.dart @@ -174,9 +174,9 @@ class GFButton extends StatefulWidget { this.autofocus = false, MaterialTapTargetSize materialTapTargetSize, this.child, - this.type, + this.type = GFType.solid, this.shape = GFShape.standard, - this.color, + this.color = GFColor.primary, this.textColor = GFColor.dark, this.position = GFPosition.start, this.size = GFSize.medium, @@ -207,7 +207,7 @@ class GFButton extends StatefulWidget { } class _GFButtonState extends State { -// Color color; + Color color; Color textColor; Widget child; Widget icon; @@ -221,7 +221,7 @@ class _GFButtonState extends State { @override void initState() { -// this.color = getGFColor(widget.color); + this.color = getGFColor(widget.color); this.textColor = getGFColor(widget.textColor); this.child = widget.text != null ? Text(widget.text) : widget.child; this.icon = widget.icon; @@ -302,25 +302,6 @@ class _GFButtonState extends State { } - - // 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. @@ -374,7 +355,7 @@ class _GFButtonState extends State { : widget.borderSide != null ? widget.borderSide : BorderSide( - color: widget.color == null ? themeColor : widget.color, + color: this.color == null ? themeColor : this.color, width: 0.0, ); @@ -394,53 +375,46 @@ class _GFButtonState extends State { 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; + 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, + ) + ] + ); + } + } } - - final Widget result = ConstrainedBox( + final Widget result = 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, -// ) -// ] -// ), + 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 : widget.color, - type: widget.color == null ? MaterialType.transparency : MaterialType.button, + 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( 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, From f5d6cbce84ecf08d632a88e5ee24c758ebf5d4bf Mon Sep 17 00:00:00 2001 From: deepikahr Date: Mon, 30 Dec 2019 17:54:52 +0530 Subject: [PATCH 17/21] button boxshadow fixed --- example/lib/main.dart | 29 ++++++++++++++++------- lib/components/badge/gf_button_badge.dart | 22 ++++++++--------- 2 files changed, 32 insertions(+), 19 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 5403bbf9..53010060 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -138,20 +138,33 @@ class _MyHomePageState extends State { 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"),)), +// +// GFButton( color: Colors.orange, onPressed: null, child: Text("share"), type: GFType.outline, - shape: GFShape.standard, + shape: GFShape.pills, buttonBoxShadow: true, -// boxShadow: BoxShadow( -// color: Colors.pink.withOpacity(0.4), -// blurRadius: 1.5, -// spreadRadius: 2.0, -// offset: Offset.zero, -// ), + boxShadow: BoxShadow( + color: Colors.pink.withOpacity(0.4), + blurRadius: 1.5, + spreadRadius: 2.0, + offset: Offset.zero, + ), ), GFTabs( diff --git a/lib/components/badge/gf_button_badge.dart b/lib/components/badge/gf_button_badge.dart index 9b0eeca6..7d706fa3 100644 --- a/lib/components/badge/gf_button_badge.dart +++ b/lib/components/badge/gf_button_badge.dart @@ -101,17 +101,17 @@ class _GFButtonBadgeState extends State { 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 + 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 ), ), ); From 376bc8000aec580eb5e2e780bc72ab528a042807 Mon Sep 17 00:00:00 2001 From: "Shravya.ckm" Date: Mon, 30 Dec 2019 18:00:37 +0530 Subject: [PATCH 18/21] different positions of toast done --- example/lib/main.dart | 371 ++++++++++--------- lib/components/toast/gf_floating_widget.dart | 64 +++- lib/components/toast/gf_toast.dart | 72 ++-- lib/components/toggle/gf_toggle.dart | 54 +-- 4 files changed, 315 insertions(+), 246 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index b22fded9..4d45f016 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -34,6 +34,8 @@ import 'package:ui_kit/position/gf_position.dart'; import 'package:ui_kit/components/toast/gf_toast.dart'; import 'package:ui_kit/types/gf_heading_type.dart'; +import 'package:ui_kit/components/toast/gf_floating_widget.dart'; + final List imageList = [ "https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg", @@ -85,10 +87,20 @@ class _MyHomePageState extends State { ), body: - - SingleChildScrollView( - child: Column( - children: [ + GFFloatingWidget( +// horizontalPosition: screenHeight * 0.1, +// verticalPosition: screenWidth* 0.2, +//child: GFToast( +// text: 'hello', +//), + child: GFToggle(onChanged: null, value: null, + type: GFToggleType.ios, + ), + body: SingleChildScrollView( + child: + + Column( + children: [ // GFCard( @@ -118,176 +130,68 @@ class _MyHomePageState extends State { // ), // ), - GFAvatar(), - GFBadge( - child: Text('1')), -GFButton(onPressed: null, -type: GFType.solid, - text: 'CLICK', + + GFFloatingWidget( + horizontalPosition: 30, + ), + + GFAvatar(), + GFBadge( + child: Text('1')), + GFButton(onPressed: null, + type: GFType.solid, + text: 'CLICK', // position: GFPosition.end, - icon: Icon(Icons.face), - textStyle: TextStyle(color: Colors.black), -), - - GFButtonBar( - children: [ - Text('jk'), - Icon(Icons.face) - ], - ), - - - - GFListTile( - avatar: Icon(Icons.format_align_center), - icon:Icon(Icons.format_align_center), - title: GFHeader( - type: GFHeadingType.typo3, - text: 'GFHeader in GFListTile', - - backgroundImage: NetworkImage('https://cdn.pixabay.com/photo/2019/12/22/19/14/christmas-4713177_960_720.jpg') - ), - subTitle: Text('Sub Header'), - description: Text('Lorem ipsum gf header used to show the header of the list tile'), - showDivider: false, - ), - - - Container( - margin: EdgeInsets.only(top:10), - child: GFToast( - backgroundColor: GFColor.primary, - - button: GFToggle( - onChanged: null, - value: null, - type: GFToggleType.ios, - duration: Duration(milliseconds: 400), - ), -// text: 'hjkk', - child: GFHeader( - text: 'GFHEADER inside GFTOAST ', - type: GFHeadingType.typo5, - ), - ), - ), - - Container( - margin: EdgeInsets.only(top:10), - child: GFToast( - backgroundColor: GFColor.primary, - - button: GFButton( - type: GFType.outline, - text: 'CLICK', - onPressed: null, -// position: GFPosition.end, - ), - text: 'Marked as Favorite ', - ), - ), - 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), - ), - GFToggle( - onChanged: null, - value: null, - type: GFToggleType.custom, - duration: Duration(milliseconds: 400), - ), - GFToggle( - onChanged: (val) { - print(val); - }, - value: null, - type: GFToggleType.square, - duration: Duration(milliseconds: 400), - ), - ], - ), - ), - - Container( -// padding: EdgeInsets.only(left: 20, right: 20), - child: Column( - children: [ - GFHeader( - text: 'GET FLUTTER HEADER', - type: GFHeadingType.typo1, - - ), - GFHeader( - text: 'GET FLUTTER HEADER', - type: GFHeadingType.typo2, - - ), - GFHeader( - text: 'GET FLUTTER HEADER', - type: GFHeadingType.typo3, -// dividerWidth: 20, - ), - GFHeader( - text: 'GET FLUTTER HEADER', - type: GFHeadingType.typo4, - - ), - GFHeader( - text: 'GET FLUTTER HEADER', - type: GFHeadingType.typo5, - - ), - GFHeader( - text: 'GET FLUTTER HEADER', - type: GFHeadingType.typo6, - - ), - ], - ) - ), - - GFImageOverlay( - height: 250, - - child: Column( - children: [ - GFHeader( - text: 'GET FLUTTER HEADER', - type: GFHeadingType.typo3, - textColor: GFColor.white, -dividerColor: GFColor.white, -// dividerWidth: 20, + icon: Icon(Icons.face), + textStyle: TextStyle(color: Colors.black), + ), + + GFButtonBar( + children: [ + Text('jk'), + Icon(Icons.face) + ], + ), + + + + GFListTile( + avatar: Icon(Icons.format_align_center), + icon:Icon(Icons.format_align_center), + title: GFHeader( + type: GFHeadingType.typo3, + text: 'GFHeader in GFListTile', + + backgroundImage: NetworkImage('https://cdn.pixabay.com/photo/2019/12/22/19/14/christmas-4713177_960_720.jpg') ), - GFListTile( - avatar: GFAvatar( - backgroundColor: Colors.white, - ), - icon:Icon(Icons.keyboard_arrow_right, color: Colors.white,), - title: GFHeader( - type: GFHeadingType.typo3, - text: 'GFHeader in GFListTile', + subTitle: Text('Sub Header'), + description: Text('Lorem ipsum gf header used to show the header of the list tile'), + showDivider: false, + ), + - backgroundImage: NetworkImage('https://cdn.pixabay.com/photo/2019/12/22/19/14/christmas-4713177_960_720.jpg') + Container( + margin: EdgeInsets.only(top:10), + child: GFToast( + backgroundColor: GFColor.primary, + + button: GFToggle( + onChanged: null, + value: null, + type: GFToggleType.ios, + duration: Duration(milliseconds: 400), + ), +// text: 'hjkk', + child: GFHeader( + text: 'GFHEADER inside GFTOAST ', + type: GFHeadingType.typo5, ), - subTitle: Text('Sub Header', style: TextStyle(color: Colors.white),), - description: Text('Lorem ipsum gf header used to show the header of the list tile', style: TextStyle(color: Colors.white),), - showDivider: false, ), + ), - GFToast( + Container( + margin: EdgeInsets.only(top:10), + child: GFToast( backgroundColor: GFColor.primary, button: GFButton( @@ -298,19 +202,134 @@ dividerColor: GFColor.white, ), text: 'Marked as Favorite ', ), - ], - ), + ), + 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), + ), + GFToggle( + onChanged: null, + value: null, + type: GFToggleType.custom, + duration: Duration(milliseconds: 400), + ), + GFToggle( + onChanged: (val) { + print(val); + }, + value: null, + type: GFToggleType.square, + duration: Duration(milliseconds: 400), + ), + ], + ), + ), + + Container( +// padding: EdgeInsets.only(left: 20, right: 20), + child: Column( + children: [ + GFHeader( + text: 'GET FLUTTER HEADER', + type: GFHeadingType.typo1, + + ), + GFHeader( + text: 'GET FLUTTER HEADER', + type: GFHeadingType.typo2, + + ), + GFHeader( + text: 'GET FLUTTER HEADER', + type: GFHeadingType.typo3, +// dividerWidth: 20, + ), + GFHeader( + text: 'GET FLUTTER HEADER', + type: GFHeadingType.typo4, + + ), + GFHeader( + text: 'GET FLUTTER HEADER', + type: GFHeadingType.typo5, + + ), + GFHeader( + text: 'GET FLUTTER HEADER', + type: GFHeadingType.typo6, + + ), + ], + ) + ), + + GFImageOverlay( + height: 250, + + child: Column( + children: [ + GFHeader( + text: 'GET FLUTTER HEADER', + type: GFHeadingType.typo3, + textColor: GFColor.white, + dividerColor: GFColor.white, +// dividerWidth: 20, + ), + GFListTile( + avatar: GFAvatar( + backgroundColor: Colors.white, + ), + icon:Icon(Icons.keyboard_arrow_right, color: Colors.white,), + title: GFHeader( + type: GFHeadingType.typo3, + text: 'GFHeader in GFListTile', + + backgroundImage: NetworkImage('https://cdn.pixabay.com/photo/2019/12/22/19/14/christmas-4713177_960_720.jpg') + ), + subTitle: Text('Sub Header', style: TextStyle(color: Colors.white),), + description: Text('Lorem ipsum gf header used to show the header of the list tile', style: TextStyle(color: Colors.white),), + showDivider: false, + ), + + GFToast( + backgroundColor: GFColor.primary, + + button: GFButton( + type: GFType.outline, + text: 'CLICK', + onPressed: null, +// position: GFPosition.end, + ), + text: 'Marked as Favorite ', + ), + ], + ), // height: screenHeight, //width: screenWidth, // image: NetworkImage('https://cdn.pixabay.com/photo/2019/12/22/19/14/christmas-4713177_960_720.jpg'), - image: AssetImage('lib/assets/food.jpeg') - ) + image: AssetImage('lib/assets/food.jpeg') + ) - ], - ), - ) + ], + ), + ), + ) + ); // body: DefaultTabController( // length: 3, // child: Scaffold( @@ -858,6 +877,6 @@ dividerColor: GFColor.white, // ), // ) // ) - ); + } } diff --git a/lib/components/toast/gf_floating_widget.dart b/lib/components/toast/gf_floating_widget.dart index af2a036a..1b86af6d 100644 --- a/lib/components/toast/gf_floating_widget.dart +++ b/lib/components/toast/gf_floating_widget.dart @@ -1,14 +1,70 @@ import 'package:flutter/material.dart'; +import 'package:ui_kit/components/toast/gf_toast.dart'; -class FloatingWidget extends StatefulWidget { + +class GFFloatingWidget extends StatefulWidget { + + const GFFloatingWidget({ + Key key, + this.child, + this.horizontalPosition, + this.verticalPosition, + this.body + + }) : super(key: key); + + + final Widget child; + + final Widget body; + + final double horizontalPosition; + + + final double verticalPosition; + @override - _FloatingWidgetState createState() => _FloatingWidgetState(); + _GFFloatingWidgetState createState() => _GFFloatingWidgetState(); } -class _FloatingWidgetState extends State { +class _GFFloatingWidgetState extends State { @override Widget build(BuildContext context) { - return Container(); + var screenWidth = MediaQuery.of(context).size.width; + var screenHeight = MediaQuery.of(context).size.height; + return Stack( + children: [ +// widget.child != null? widget.child : MyHomePage(), +// Container( +// height: screenHeight, +// width: screenWidth, +// color: Colors.orange, +// ), + Container( +// height: screenHeight, +// width: screenWidth, + child: widget.body ?? Container(), + ), + Positioned( + top: widget.horizontalPosition != null ? widget.horizontalPosition : 0, +left: widget.verticalPosition != null ? widget.verticalPosition : 0, + +// top:20, + child: widget.child ?? Container() + ), + + +// Positioned( +// top:MediaQuery.of(context).size.height * 0.3, +//// top:30, +// child: GFToast( +// text: 'hi', +// ) +// ) + + + ], + ); } } diff --git a/lib/components/toast/gf_toast.dart b/lib/components/toast/gf_toast.dart index 4eb35e50..ed216932 100644 --- a/lib/components/toast/gf_toast.dart +++ b/lib/components/toast/gf_toast.dart @@ -2,21 +2,21 @@ import 'package:flutter/material.dart'; import 'package:ui_kit/colors/gf_color.dart'; class GFToast extends StatelessWidget { + /// - GFToast({ - Key key, + GFToast({Key key, this.child, this.button, this.backgroundColor, this.text, - this.textStyle = const TextStyle(color: Colors.white70), - }) : super(key: key); + this.textStyle = const TextStyle(color: Colors.white70), + }) :super(key: key); /// child of type [Widget]is alternative to text key. text will get priority over child final Widget child; /// button of type [Widget],or you can use [GFButton] for easy implementation with [GFToast] - final Widget button; + final Widget button; ///pass color of type [Color] or [GFColor] for background of [GFToast] final dynamic backgroundColor; @@ -27,46 +27,36 @@ class GFToast extends StatelessWidget { /// textStyle will be applicable to text only and not for the child final TextStyle textStyle; + @override Widget build(BuildContext context) { - return ConstrainedBox( - constraints: BoxConstraints( - minHeight: 50.0, + return + ConstrainedBox(constraints: BoxConstraints(minHeight: 50.0,), child: Container( + margin: EdgeInsets.only(left: 10, right: 10), + padding: EdgeInsets.all(10), + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(3)), + color: backgroundColor!=null ?getGFColor(backgroundColor):Color(0xff323232), ), - child: Container( - margin: EdgeInsets.only(left: 10, right: 10), - padding: EdgeInsets.all(10), - decoration: BoxDecoration( - borderRadius: BorderRadius.all(Radius.circular(3)), - color: backgroundColor != null - ? getGFColor(backgroundColor) - : Color(0xff323232), - ), - child: Row( + child: Row( // mainAxisAlignment: MainAxisAlignment.end, - children: [ - Flexible( - flex: 7, + children: [ + Flexible( + flex: 7, + fit: FlexFit.tight, + child: text!=null ? Text(text , style: textStyle):(child??Container()),), + SizedBox( + width: 10, + ), + button!=null?Flexible( + flex: 4, fit: FlexFit.tight, - child: text != null - ? Text(text, style: textStyle) - : (child ?? Container()), - ), - SizedBox( - width: 10, - ), - button != null - ? Flexible( - flex: 4, - fit: FlexFit.tight, - child: Align( - alignment: Alignment.topRight, - child: button, - )) - : Container() - ], - ), + child: Align( + alignment: Alignment.topRight, + child: button, + )):Container() + ], ), - ); + ),); } -} +} \ No newline at end of file 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), ]), ), - ) - ) - ), + ))), ], ), ); From f10df4e3e812c314dda25285faa335010ea8a245 Mon Sep 17 00:00:00 2001 From: "Shravya.ckm" Date: Tue, 31 Dec 2019 10:32:53 +0530 Subject: [PATCH 19/21] floating toggle done --- example/lib/main.dart | 27 ++++++++++++-------- lib/components/toast/gf_floating_widget.dart | 6 ++++- lib/components/toast/gf_toast.dart | 7 ++--- 3 files changed, 25 insertions(+), 15 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 4d45f016..7a608c56 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -90,12 +90,20 @@ class _MyHomePageState extends State { GFFloatingWidget( // horizontalPosition: screenHeight * 0.1, // verticalPosition: screenWidth* 0.2, -//child: GFToast( -// text: 'hello', -//), - child: GFToggle(onChanged: null, value: null, - type: GFToggleType.ios, - ), +child: GFToast( + backgroundColor: GFColor.warning, + + button: GFButton( + type: GFType.outline, + text: 'CLICK', + onPressed: null, +// position: GFPosition.end, + ), + text: 'Marked as Favorite ', +), +// child: GFToggle(onChanged: null, value: null, +// type: GFToggleType.ios, +// ), body: SingleChildScrollView( child: @@ -182,10 +190,7 @@ class _MyHomePageState extends State { duration: Duration(milliseconds: 400), ), // text: 'hjkk', - child: GFHeader( - text: 'GFHEADER inside GFTOAST ', - type: GFHeadingType.typo5, - ), + text: 'who hbdi h nedj bdj vcej vcbejb yhjycen bcekj bcen bdjn bcenk jhcnekj', ), ), @@ -200,7 +205,7 @@ class _MyHomePageState extends State { onPressed: null, // position: GFPosition.end, ), - text: 'Marked as Favorite ', + text: 'Marked', ), ), Container( diff --git a/lib/components/toast/gf_floating_widget.dart b/lib/components/toast/gf_floating_widget.dart index 1b86af6d..87c4db18 100644 --- a/lib/components/toast/gf_floating_widget.dart +++ b/lib/components/toast/gf_floating_widget.dart @@ -51,7 +51,11 @@ class _GFFloatingWidgetState extends State { left: widget.verticalPosition != null ? widget.verticalPosition : 0, // top:20, - child: widget.child ?? Container() + child: Container( + height: 60, + 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 ed216932..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( @@ -39,7 +40,6 @@ class GFToast extends StatelessWidget { color: backgroundColor!=null ?getGFColor(backgroundColor):Color(0xff323232), ), child: Row( -// mainAxisAlignment: MainAxisAlignment.end, children: [ Flexible( flex: 7, @@ -54,7 +54,8 @@ class GFToast extends StatelessWidget { child: Align( alignment: Alignment.topRight, child: button, - )):Container() + ) + ):Container() ], ), ),); From 3adf8804aa1f1ff6f00dcaf31a69b0309d1b4f33 Mon Sep 17 00:00:00 2001 From: "Shravya.ckm" Date: Tue, 31 Dec 2019 10:39:59 +0530 Subject: [PATCH 20/21] adding comments to gfFloatingWidget --- example/lib/main.dart | 5 ++-- lib/components/toast/gf_floating_widget.dart | 25 +------------------- 2 files changed, 3 insertions(+), 27 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 7a608c56..33efc34c 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -88,16 +88,15 @@ class _MyHomePageState extends State { body: GFFloatingWidget( -// horizontalPosition: screenHeight * 0.1, + horizontalPosition: screenHeight * 0.1, // verticalPosition: screenWidth* 0.2, child: GFToast( backgroundColor: GFColor.warning, button: GFButton( type: GFType.outline, - text: 'CLICK', + text: 'OK', onPressed: null, -// position: GFPosition.end, ), text: 'Marked as Favorite ', ), diff --git a/lib/components/toast/gf_floating_widget.dart b/lib/components/toast/gf_floating_widget.dart index 87c4db18..26d07c6b 100644 --- a/lib/components/toast/gf_floating_widget.dart +++ b/lib/components/toast/gf_floating_widget.dart @@ -11,7 +11,6 @@ class GFFloatingWidget extends StatefulWidget { this.horizontalPosition, this.verticalPosition, this.body - }) : super(key: key); @@ -35,39 +34,17 @@ class _GFFloatingWidgetState extends State { var screenHeight = MediaQuery.of(context).size.height; return Stack( children: [ -// widget.child != null? widget.child : MyHomePage(), -// Container( -// height: screenHeight, -// width: screenWidth, -// color: Colors.orange, -// ), Container( -// height: screenHeight, -// width: screenWidth, child: widget.body ?? Container(), ), Positioned( top: widget.horizontalPosition != null ? widget.horizontalPosition : 0, -left: widget.verticalPosition != null ? widget.verticalPosition : 0, - -// top:20, + left: widget.verticalPosition != null ? widget.verticalPosition : 0, child: Container( - height: 60, width: MediaQuery.of(context).size.width, child: widget.child ?? Container(), ) ), - - -// Positioned( -// top:MediaQuery.of(context).size.height * 0.3, -//// top:30, -// child: GFToast( -// text: 'hi', -// ) -// ) - - ], ); } From 9f85445c33341d6490f2ca57759a83e6d50833d2 Mon Sep 17 00:00:00 2001 From: "Shravya.ckm" Date: Tue, 31 Dec 2019 10:46:50 +0530 Subject: [PATCH 21/21] comments added to gfFloatingWidget --- lib/components/toast/gf_floating_widget.dart | 42 ++++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/lib/components/toast/gf_floating_widget.dart b/lib/components/toast/gf_floating_widget.dart index 26d07c6b..bb2c59de 100644 --- a/lib/components/toast/gf_floating_widget.dart +++ b/lib/components/toast/gf_floating_widget.dart @@ -1,26 +1,25 @@ 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); - - + 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 @@ -34,17 +33,18 @@ class _GFFloatingWidgetState extends State { var screenHeight = MediaQuery.of(context).size.height; return Stack( children: [ - Container( - child: widget.body ?? Container(), - ), + Container( + child: widget.body ?? Container(), + ), Positioned( - top: widget.horizontalPosition != null ? widget.horizontalPosition : 0, - left: widget.verticalPosition != null ? widget.verticalPosition : 0, + 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(), - ) - ), + child: widget.child ?? Container(), + )), ], ); }