diff --git a/example/lib/assets/img.png b/example/lib/assets/img.png new file mode 100644 index 00000000..ded2d46e Binary files /dev/null and b/example/lib/assets/img.png differ diff --git a/example/lib/main.dart b/example/lib/main.dart index 23268c83..f41cbb98 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -32,6 +32,9 @@ import 'package:ui_kit/shape/gf_icon_button_shape.dart'; import 'package:ui_kit/components/tabs/gf_tabBar.dart'; import 'package:ui_kit/components/typography/gf_typography.dart'; import 'package:ui_kit/types/gf_typography_type.dart'; +import 'package:ui_kit/components/toast/gf_floating_widget.dart'; +import 'package:ui_kit/components/toggle/gf_toggle.dart'; +import 'package:ui_kit/types/gf_toggle_type.dart'; final List imageList = [ "https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg", @@ -84,6 +87,7 @@ class _MyHomePageState extends State } bool switchValue = true; + bool showToast = false; @override Widget build(BuildContext context) { @@ -169,104 +173,159 @@ class _MyHomePageState extends State mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ + + Container( + height: 130.0, + width: 105.0, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(8.0), + gradient: LinearGradient( + begin: FractionalOffset.bottomLeft, + end: FractionalOffset.topRight, + colors: [ + const Color(0x5a0b486b), + const Color(0xFFF56217), + ] + ) + ), + ), + GFCard( content: Column( children: [ GFTypography( - text: 'GF Header Typo1', - type: GFTypographyType.typo1, - showDivider: false, - ), - GFTypography( - text: 'GF Header Typo2', - type: GFTypographyType.typo2, - showDivider: false, - ), - GFTypography( - text: 'GF Header Typo3', - type: GFTypographyType.typo3, - showDivider: false, - ), - GFTypography( - text: 'GF Header Typo4', - type: GFTypographyType.typo4, - showDivider: false, - ), - GFTypography( - text: 'GF Header Typo5', - type: GFTypographyType.typo5, - showDivider: false, - ), - GFTypography( - text: 'GF Header Typo6', + text: 'IOS', type: GFTypographyType.typo6, - showDivider: false, ), + SizedBox( + height: 10, + ), + GFToggle(onChanged: null, value: null, + type: GFToggleType.ios, + ) ], ), ), - GFCard( - content: Column( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - GFTypography( - text: 'GF Header Typo1', - type: GFTypographyType.typo1, - backgroundImage: NetworkImage( - 'https://cdn.pixabay.com/photo/2019/12/25/16/49/happy-new-year-4718894_960_720.png'), - ), - SizedBox( - height: 40, - ), - GFTypography( - icon: GFAvatar(), - text: 'GF Header Typo2', - type: GFTypographyType.typo2, - dividerColor: GFColor.primary, - dividerAlignment: Alignment.center, - ), - SizedBox( - height: 40, - ), - GFTypography( - icon: Icon(Icons.insert_emoticon), - text: 'GF Header Typo3', - type: GFTypographyType.typo3, - dividerWidth: 150, - dividerColor: GFColor.warning, - dividerBorderRadius: BorderRadius.all(Radius.circular(0)), - ), - SizedBox( - height: 40, - ), - GFTypography( - text: 'GF Header Typo4', - type: GFTypographyType.typo4, - dividerWidth: 345, - icon: Image.network( - 'https://cdn.pixabay.com/photo/2016/12/15/03/27/cocoa-1908020_960_720.jpg', - width: 50, - )), - SizedBox( - height: 40, - ), - GFTypography( - text: 'GF Header Typo5', - type: GFTypographyType.typo5, - dividerColor: GFColor.alt, - ), - SizedBox( - height: 40, - ), - GFTypography( - text: 'GF Header Typo6', - type: GFTypographyType.typo6, - dividerWidth: 20, - ), - ], - )), +// GFCard( +// content: Container( +// height: 300.0, +// child: new Stack( //if fit not specified then, it aligns to top left.... +// fit: StackFit.expand, +// children: [ +// Column( +// children: [ + GFTypography( + text: 'GF Header Typo1', + type: GFTypographyType.typo1, +// showDivider: false, + ), +// GFTypography( +// text: 'GF Header Typo2', +// type: GFTypographyType.typo2, +// showDivider: false, +// ), +// GFTypography( +// text: 'GF Header Typo3', +// type: GFTypographyType.typo3, +// showDivider: false, +// ), +// GFTypography( +// text: 'GF Header Typo4', +// type: GFTypographyType.typo4, +// showDivider: false, +// ), +// GFTypography( +// text: 'GF Header Typo5', +// type: GFTypographyType.typo5, +// showDivider: false, +// ), +// GFTypography( +// text: 'GF Header Typo6', +// type: GFTypographyType.typo6, +// showDivider: false, +// ), +// ], +// ), +// new DecoratedBox( +// decoration: new BoxDecoration( +// //color: Colors.lightGreen +// gradient: new LinearGradient( +// begin: FractionalOffset.bottomLeft, +// end: FractionalOffset.topRight, +// colors: [ +// const Color(0x5a0b486b), +// const Color(0xFFF56217), +// ] +// ) +// ), +// ), +// ], +// ), +// ), +// ), +// +// GFCard( +// content: Column( +// crossAxisAlignment: CrossAxisAlignment.center, +// mainAxisAlignment: MainAxisAlignment.spaceBetween, +// children: [ +// GFTypography( +// text: 'GF Header Typo1', +// type: GFTypographyType.typo1, +// backgroundImage: NetworkImage( +// 'https://cdn.pixabay.com/photo/2019/12/25/16/49/happy-new-year-4718894_960_720.png'), +// ), +// SizedBox( +// height: 40, +// ), +// GFTypography( +// icon: GFAvatar(), +// text: 'GF Header Typo2', +// type: GFTypographyType.typo2, +// dividerColor: GFColor.primary, +// dividerAlignment: Alignment.center, +// ), +// SizedBox( +// height: 40, +// ), +// GFTypography( +// icon: Icon(Icons.insert_emoticon), +// text: 'GF Header Typo3', +// type: GFTypographyType.typo3, +// dividerWidth: 150, +// dividerColor: GFColor.warning, +// dividerBorderRadius: BorderRadius.all(Radius.circular(0)), +// ), +// SizedBox( +// height: 40, +// ), +// GFTypography( +// text: 'GF Header Typo4', +// type: GFTypographyType.typo4, +// dividerWidth: 345, +// icon: Image.network( +// 'https://cdn.pixabay.com/photo/2016/12/15/03/27/cocoa-1908020_960_720.jpg', +// width: 50, +// )), +// SizedBox( +// height: 40, +// ), +// GFTypography( +// text: 'GF Header Typo5', +// type: GFTypographyType.typo5, +// dividerColor: GFColor.alt, +// ), +// SizedBox( +// height: 40, +// ), +// GFTypography( +// text: 'GF Header Typo6', +// type: GFTypographyType.typo6, +// dividerWidth: 20, +// ), +// ], +// )), // GFButton( // onPressed: (){}, @@ -279,103 +338,112 @@ class _MyHomePageState extends State // icon: Icon(Icons.directions_bike), // ), - GFListTile( -// padding: EdgeInsets.all(8.0), -// color: Colors.redAccent, +// GFListTile( +//// padding: EdgeInsets.all(8.0), +//// color: Colors.redAccent, +//// avatar: GFAvatar( +//// child: Text("tb"), +//// ), +// title: Text('title'), +//// subTitle: Text('subtitle'), +// icon: Text("99"), +//// dividerColor: Colors.blue, +//// dividerEndIndent: 20.0, +//// dividerHeight: 2.0, +//// dividerIndent: 30.0, +//// dividerThickness: 5.0, +// showDivider: false, +// ), + +// GFListTile( // avatar: GFAvatar( -// child: Text("tb"), +// shape: GFAvatarShape.standard, // ), - title: Text('title'), -// subTitle: Text('subtitle'), - icon: Text("99"), -// dividerColor: Colors.blue, -// dividerEndIndent: 20.0, -// dividerHeight: 2.0, -// dividerIndent: 30.0, -// dividerThickness: 5.0, - showDivider: false, - ), - - GFListTile( - avatar: GFAvatar( - shape: GFAvatarShape.standard, - ), - title: GFTypography( - text: 'List tile', - type: GFTypographyType.typo5, - showDivider: false, - ), - subTitle: Text( - 'Lorem ipsum', - style: TextStyle(color: getGFColor(GFColor.dark)), - ), - description: Text( - 'Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ' - 'sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ', - style: TextStyle( - fontSize: 13, color: getGFColor(GFColor.secondary))), - showDivider: true, - icon: GFIconButton( - onPressed: null, - type: GFType.transparent, - icon: Icon(Icons.favorite_border), - ), - ), - - GFCard( - content: GFListTile( - avatar: GFAvatar( - shape: GFAvatarShape.standard, - ), - title: GFTypography( - text: 'List tile', - type: GFTypographyType.typo5, - showDivider: false, - ), - subTitle: Text( - 'Lorem ipsum', - style: TextStyle(color: getGFColor(GFColor.dark)), - ), - description: Text( - 'Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ', - style: TextStyle( - fontSize: 13, color: getGFColor(GFColor.secondary))), - showDivider: false, - ), - ), - - GFCard( - content: GFImageOverlay( - height: 200.0, - width: 200.0, - image: AssetImage("lib/assets/food.jpeg"), - boxFit: BoxFit.fill, - colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.67), BlendMode.darken), - shape: BoxShape.circle, - ), - ), +// title: GFTypography( +// text: 'List tile', +// type: GFTypographyType.typo5, +// showDivider: false, +// ), +// subTitle: Text( +// 'Lorem ipsum', +// style: TextStyle(color: getGFColor(GFColor.dark)), +// ), +// description: Text( +// 'Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ' +// 'sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ', +// style: TextStyle( +// fontSize: 13, color: getGFColor(GFColor.secondary))), +// showDivider: true, +// icon: GFIconButton( +// onPressed: null, +// type: GFType.transparent, +// icon: Icon(Icons.favorite_border), +// ), +// ), +// +// GFCard( +// content: GFListTile( +// avatar: GFAvatar( +// shape: GFAvatarShape.standard, +// ), +// title: GFTypography( +// text: 'List tile', +// type: GFTypographyType.typo5, +// showDivider: false, +// ), +// subTitle: Text( +// 'Lorem ipsum', +// style: TextStyle(color: getGFColor(GFColor.dark)), +// ), +// description: Text( +// 'Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ', +// style: TextStyle( +// fontSize: 13, color: getGFColor(GFColor.secondary))), +// showDivider: false, +// ), +// ), +// +// GFCard( +// content: GFImageOverlay( +// height: 200.0, +// width: 200.0, +// image: AssetImage("lib/assets/food.jpeg"), +// boxFit: BoxFit.fill, +// colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.67), BlendMode.darken), +// shape: BoxShape.circle, +// ), +// ), +// +// GFCard( +// content: Container( +// width: 190.0, +// height: 190.0, +// decoration: new BoxDecoration( +// shape: BoxShape.circle, +// image: new DecorationImage( +// fit: BoxFit.fill, +// image: AssetImage( +// "lib/assets/food.jpeg", +// ), +// ))), +// ), - GFCard( - content: Container( - width: 190.0, - height: 190.0, - decoration: new BoxDecoration( - shape: BoxShape.circle, - image: new DecorationImage( - fit: BoxFit.fill, - image: AssetImage( - "lib/assets/food.jpeg", - ), - ))), - ), GFButtonBadge( +// boxShadow: BoxShadow( +// color: Colors.pink, +// blurRadius: 2.0, +// spreadRadius: 1.0, +// offset: Offset.zero, +// ), +// badgeBoxShadow: true, onPressed: () {}, -// position: GFPosition.end, +// position: GFPosition.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: 'goodiesdxs', // color: GFColor.success, +// textColor: GFColor.dark, // shape: GFButtonShape.pills, // type: GFType.outline2x, // size: GFSize.small, @@ -480,42 +548,42 @@ class _MyHomePageState extends State // backgroundImage: NetworkImage("https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg"), // ), - GFSegmentTabs( - tabController: tabController, +// GFSegmentTabs( +// tabController: tabController, // height: 36.0, -// width: 180.0, - initialIndex: 0, - length: 3, - tabs: [ - Text( - "Gelatin", - ), - Tab( - child: Text( - "Donuts", - ), - ), - Tab( - child: Text( - "Pastry", - ), - ), - ], - tabBarColor: Colors.grey, - indicatorSize: TabBarIndicatorSize.tab, - indicatorColor: Colors.greenAccent, - labelColor: Colors.greenAccent, - unselectedLabelColor: Colors.white, - indicator: BoxDecoration( - color: Colors.black, - border: Border(bottom: BorderSide(color: Colors.greenAccent, width: 2.0,),), +//// width: 180.0, +// initialIndex: 0, +// length: 3, +// tabs: [ +// Text( +// "Gelatin", +// ), +// Tab( +// child: Text( +// "Donuts", +// ), +// ), +// Tab( +// child: Text( +// "Pastry", +// ), +// ), +// ], +// tabBarColor: Colors.grey, +// indicatorSize: TabBarIndicatorSize.tab, +// indicatorColor: Colors.greenAccent, +// labelColor: Colors.greenAccent, +// unselectedLabelColor: Colors.white, +// indicator: BoxDecoration( +// color: Colors.black, +// border: Border(bottom: BorderSide(color: Colors.greenAccent, width: 2.0,),), +//// borderRadius: BorderRadius.circular(2.0) +// ), +// indicatorPadding: EdgeInsets.all(8.0), +// indicatorWeight: 2.0, +// border: Border.all(color: Colors.white, width: 2.0), // borderRadius: BorderRadius.circular(2.0) - ), - indicatorPadding: EdgeInsets.all(8.0), - indicatorWeight: 2.0, - border: Border.all(color: Colors.white, width: 2.0), - borderRadius: BorderRadius.circular(2.0) - ), +// ), // // GFTabBarView( // controller: tabController, @@ -526,39 +594,40 @@ class _MyHomePageState extends State // Container(color: Colors.blue) // ] // ), -// -// GFItemsCarousel( -// rowCount: 3, -// children: imageList.map( -// (url) { -// return Container( -// margin: EdgeInsets.all(5.0), -// child: ClipRRect( -// borderRadius: BorderRadius.all(Radius.circular(5.0)), -// child: Image.network( -// url, -// fit: BoxFit.cover, -// width: 1000.0 -// ), -// ), -// ); -// }, -// ).toList(), -// ), + + + GFItemsCarousel( + rowCount: 3, + children: imageList.map( + (url) { + return Container( + margin: EdgeInsets.all(5.0), + child: ClipRRect( + borderRadius: BorderRadius.all(Radius.circular(5.0)), + child: Image.network( + url, + fit: BoxFit.cover, + width: 1000.0 + ), + ), + ); + }, + ).toList(), + ), // // GFCarousel( -//// pagerSize: 12.0, -//// activeIndicator: Colors.pink, -//// passiveIndicator: Colors.pink.withOpacity(0.4), -//// viewportFraction: 1.0, -//// aspectRatio: 2.0, -//// autoPlay: true, -//// enlargeMainPage: true, -//// pagination: true, +// pagerSize: 12.0, +// activeIndicator: Colors.pink, +// passiveIndicator: Colors.pink.withOpacity(0.4), +// viewportFraction: 1.0, +//// aspectRatio: 1.0, +// autoPlay: true, +// enlargeMainPage: true, +// pagination: true, // items: imageList.map( // (url) { // return Container( -// margin: EdgeInsets.all(5.0), +// margin: EdgeInsets.only(bottom: 25.0, left: 12.0, right: 12.0, top: 12.0), // child: ClipRRect( // borderRadius: BorderRadius.all(Radius.circular(5.0)), // child: Image.network( @@ -684,35 +753,36 @@ class _MyHomePageState extends State // }); // }, // ), -// GFCard( -// boxFit: BoxFit.fill, -// colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.67), BlendMode.darken), -//// image: Image.asset("lib/assets/food.jpeg",), + + GFCard( + boxFit: BoxFit.fill, + colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.67), BlendMode.darken), + image: Image.asset("lib/assets/img.png", fit: BoxFit.fitWidth, width: 400.0,), // imageOverlay: AssetImage("lib/assets/food.jpeg"), -// titlePosition: GFPosition.end, -// title: GFListTile( -// avatar: GFAvatar( -// child: Text("tb"), -// ), -// title: Text( -// 'title', -// style: TextStyle(color: Colors.grey), -// ), -// subTitle: Text( -// 'subtitle', -// style: TextStyle(color: Colors.grey), -// ), -// icon: GFIconButton( -// onPressed: null, -// icon: Icon(Icons.favorite_border), -// type: GFType.transparent, -// ), -// ), -// content: Text( -// "Flutter Flutter is Google's mobile UI framework for crafting" -// "Flutter Flutter is Google's mobile UI framework for crafting", -// style: TextStyle(color: Colors.grey), -// ), + titlePosition: GFPosition.end, + title: GFListTile( + avatar: GFAvatar( + child: Text("tb"), + ), + title: Text( + 'title', + style: TextStyle(color: Colors.grey), + ), + subTitle: Text( + 'subtitle', + style: TextStyle(color: Colors.grey), + ), + icon: GFIconButton( + onPressed: null, + icon: Icon(Icons.favorite_border), + type: GFType.transparent, + ), + ), + content: Text( + "Flutter Flutter is Google's mobile UI framework for crafting" + "Flutter Flutter is Google's mobile UI framework for crafting", + style: TextStyle(color: Colors.grey), + ), // buttonBar: GFButtonBar( // mainAxisSize: MainAxisSize.min, // children: [ @@ -730,7 +800,8 @@ class _MyHomePageState extends State // ), // ], // ), -// ), + ), + // GFButtonBar( // mainAxisSize: MainAxisSize.min, // children: [ @@ -863,11 +934,11 @@ class _MyHomePageState extends State // // foregroundColor: Colors.deepOrangeAccent, // -// shape: GFAvatarShape.circle, +// shape: GFAvatarShape.square, // -// size: GFSize.medium, +// size: GFSize.large, // -// borderRadius: BorderRadius.circular(20.0), +// borderRadius: BorderRadius.circular(10.0), ), GFIconBadge( child: @@ -945,12 +1016,12 @@ class _MyHomePageState extends State //// 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, -//// ), +// 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/example/pubspec.yaml b/example/pubspec.yaml index 4ebcc8a4..5fbaae3c 100644 --- a/example/pubspec.yaml +++ b/example/pubspec.yaml @@ -21,4 +21,5 @@ dev_dependencies: flutter: uses-material-design: true assets: - - lib/assets/food.jpeg \ No newline at end of file + - lib/assets/food.jpeg + - lib/assets/img.png \ No newline at end of file diff --git a/lib/components/appbar/gf_appbar.dart b/lib/components/appbar/gf_appbar.dart index 5b1f87d2..3b167cdd 100644 --- a/lib/components/appbar/gf_appbar.dart +++ b/lib/components/appbar/gf_appbar.dart @@ -5,10 +5,8 @@ import 'package:flutter/services.dart'; import 'package:flutter/widgets.dart'; import 'package:flutter/material.dart'; -const double _kLeadingWidth = - kToolbarHeight; // So the leading button is square. +const double _kLeadingWidth = kToolbarHeight; -// Bottom justify the kToolbarHeight child which may overflow the top. class _ToolbarContainerLayout extends SingleChildLayoutDelegate { const _ToolbarContainerLayout(); @@ -31,115 +29,11 @@ class _ToolbarContainerLayout extends SingleChildLayoutDelegate { bool shouldRelayout(_ToolbarContainerLayout oldDelegate) => false; } -/// A material design app bar. -/// /// An app bar consists of a toolbar and potentially other widgets, such as a -/// [TabBar] and a [FlexibleSpaceBar]. App bars typically expose one or more -/// common [actions] with [IconButton]s which are optionally followed by a -/// [PopupMenuButton] for less common operations (sometimes called the "overflow -/// menu"). -/// -/// App bars are typically used in the [Scaffold.appBar] property, which places -/// the app bar as a fixed-height widget at the top of the screen. For a scrollable -/// app bar, see [SliverGFAppBar], which embeds an [GFAppBar] in a sliver for use in -/// a [CustomScrollView]. -/// -/// When not used as [Scaffold.appBar], or when wrapped in a [Hero], place the app -/// bar in a [MediaQuery] to take care of the padding around the content of the -/// app bar if needed, as the padding will not be handled by [Scaffold]. -/// +/// [GFTabBar][TabBar] and a [FlexibleSpaceBar]. /// The GFAppBar displays the toolbar widgets, [leading], [title], and [actions], -/// above the [bottom] (if any). The [bottom] is usually used for a [TabBar]. If -/// a [flexibleSpace] widget is specified then it is stacked behind the toolbar -/// and the bottom widget. The following diagram shows where each of these slots -/// appears in the toolbar when the writing language is left-to-right (e.g. -/// English): -/// -/// ![The leading widget is in the top left, the actions are in the top right, -/// the title is between them. The bottom is, naturally, at the bottom, and the -/// flexibleSpace is behind all of them.](https://flutter.github.io/assets-for-api-docs/assets/material/app_bar.png) -/// -/// If the [leading] widget is omitted, but the [GFAppBar] is in a [Scaffold] with -/// a [Drawer], then a button will be inserted to open the drawer. Otherwise, if -/// the nearest [Navigator] has any previous routes, a [BackButton] is inserted -/// instead. This behavior can be turned off by setting the [automaticallyImplyLeading] -/// to false. In that case a null leading widget will result in the middle/title widget -/// stretching to start. -/// -/// {@tool dartpad --template=stateless_widget_material} -/// -/// This sample shows an [GFAppBar] with two simple actions. The first action -/// opens a [SnackBar], while the second action navigates to a new page. -/// -/// ```dart preamble -/// final GlobalKey scaffoldKey = GlobalKey(); -/// final SnackBar snackBar = const SnackBar(content: Text('Showing Snackbar')); -/// -/// void openPage(BuildContext context) { -/// Navigator.push(context, MaterialPageRoute( -/// builder: (BuildContext context) { -/// return Scaffold( -/// appBar: GFAppBar( -/// title: const Text('Next page'), -/// ), -/// body: const Center( -/// child: Text( -/// 'This is the next page', -/// style: TextStyle(fontSize: 24), -/// ), -/// ), -/// ); -/// }, -/// )); -/// } -/// ``` -/// -/// ```dart -/// Widget build(BuildContext context) { -/// return Scaffold( -/// key: scaffoldKey, -/// appBar: GFAppBar( -/// title: const Text('GFAppBar Demo'), -/// actions: [ -/// IconButton( -/// icon: const Icon(Icons.add_alert), -/// tooltip: 'Show Snackbar', -/// onPressed: () { -/// scaffoldKey.currentState.showSnackBar(snackBar); -/// }, -/// ), -/// IconButton( -/// icon: const Icon(Icons.navigate_next), -/// tooltip: 'Next page', -/// onPressed: () { -/// openPage(context); -/// }, -/// ), -/// ], -/// ), -/// body: const Center( -/// child: Text( -/// 'This is the home page', -/// style: TextStyle(fontSize: 24), -/// ), -/// ), -/// ); -/// } -/// ``` -/// {@end-tool} -/// -/// See also: -/// -/// * [Scaffold], which displays the [GFAppBar] in its [Scaffold.appBar] slot. -/// * [SliverGFAppBar], which uses [GFAppBar] to provide a flexible app bar that -/// can be used in a [CustomScrollView]. -/// * [TabBar], which is typically placed in the [bottom] slot of the [GFAppBar] -/// if the screen has multiple pages arranged in tabs. -/// * [IconButton], which is used with [actions] to show buttons on the app bar. -/// * [PopupMenuButton], to show a popup menu on the app bar, via [actions]. -/// * [FlexibleSpaceBar], which is used with [flexibleSpace] when the app bar -/// can expand and collapse. -/// * +/// above the [bottom] (if any). The [bottom] is usually used for a [TabBar]. + class GFAppBar extends StatefulWidget implements PreferredSizeWidget { /// Creates a material design app bar. /// @@ -184,44 +78,6 @@ class GFAppBar extends StatefulWidget implements PreferredSizeWidget { super(key: key); /// A widget to display before the [title]. - /// - /// If this is null and [automaticallyImplyLeading] is set to true, the - /// [GFAppBar] will imply an appropriate widget. For example, if the [GFAppBar] is - /// in a [Scaffold] that also has a [Drawer], the [Scaffold] will fill this - /// widget with an [IconButton] that opens the drawer (using [Icons.menu]). If - /// there's no [Drawer] and the parent [Navigator] can go back, the [GFAppBar] - /// will use a [BackButton] that calls [Navigator.maybePop]. - /// - /// {@tool sample} - /// - /// The following code shows how the drawer button could be manually specified - /// instead of relying on [automaticallyImplyLeading]: - /// - /// ```dart - /// GFAppBar( - /// leading: Builder( - /// builder: (BuildContext context) { - /// return IconButton( - /// icon: const Icon(Icons.menu), - /// onPressed: () { Scaffold.of(context).openDrawer(); }, - /// tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip, - /// ); - /// }, - /// ), - /// ) - /// ``` - /// {@end-tool} - /// - /// The [Builder] is used in this example to ensure that the `context` refers - /// to that part of the subtree. That way this code snippet can be used even - /// inside the very code that is creating the [Scaffold] (in which case, - /// without the [Builder], the `context` wouldn't be able to see the - /// [Scaffold], since it would refer to an ancestor of that widget). - /// - /// See also: - /// - /// * [Scaffold.appBar], in which an [GFAppBar] is usually placed. - /// * [Scaffold.drawer], in which the [Drawer] is usually placed. final Widget leading; /// Controls whether we should try to imply the leading widget if null. @@ -817,65 +673,6 @@ class _SliverGFAppBarDelegate extends SliverPersistentHeaderDelegate { /// [actions], above the [bottom] (if any). If a [flexibleSpace] widget is /// specified then it is stacked behind the toolbar and the bottom widget. /// -/// {@tool sample} -/// -/// This is an example that could be included in a [CustomScrollView]'s -/// [CustomScrollView.slivers] list: -/// -/// ```dart -/// SliverGFAppBar( -/// expandedHeight: 150.0, -/// flexibleSpace: const FlexibleSpaceBar( -/// title: Text('Available seats'), -/// ), -/// actions: [ -/// IconButton( -/// icon: const Icon(Icons.add_circle), -/// tooltip: 'Add new entry', -/// onPressed: () { /* ... */ }, -/// ), -/// ] -/// ) -/// ``` -/// {@end-tool} -/// -/// ## Animated Examples -/// -/// The following animations show how app bars with different configurations -/// behave when a user scrolls up and then down again. -/// -/// * App bar with [floating]: false, [pinned]: false, [snap]: false: -/// {@animation 476 400 https://flutter.github.io/assets-for-api-docs/assets/material/app_bar.mp4} -/// -/// * App bar with [floating]: true, [pinned]: false, [snap]: false: -/// {@animation 476 400 https://flutter.github.io/assets-for-api-docs/assets/material/app_bar_floating.mp4} -/// -/// * App bar with [floating]: true, [pinned]: false, [snap]: true: -/// {@animation 476 400 https://flutter.github.io/assets-for-api-docs/assets/material/app_bar_floating_snap.mp4} -/// -/// * App bar with [floating]: true, [pinned]: true, [snap]: false: -/// {@animation 476 400 https://flutter.github.io/assets-for-api-docs/assets/material/app_bar_pinned_floating.mp4} -/// -/// * App bar with [floating]: true, [pinned]: true, [snap]: true: -/// {@animation 476 400 https://flutter.github.io/assets-for-api-docs/assets/material/app_bar_pinned_floating_snap.mp4} -/// -/// * App bar with [floating]: false, [pinned]: true, [snap]: false: -/// {@animation 476 400 https://flutter.github.io/assets-for-api-docs/assets/material/app_bar_pinned.mp4} -/// -/// The property [snap] can only be set to true if [floating] is also true. -/// -/// See also: -/// -/// * [CustomScrollView], which integrates the [SliverGFAppBar] into its -/// scrolling. -/// * [GFAppBar], which is a fixed-height app bar for use in [Scaffold.appBar]. -/// * [TabBar], which is typically placed in the [bottom] slot of the [GFAppBar] -/// if the screen has multiple pages arranged in tabs. -/// * [IconButton], which is used with [actions] to show buttons on the app bar. -/// * [PopupMenuButton], to show a popup menu on the app bar, via [actions]. -/// * [FlexibleSpaceBar], which is used with [flexibleSpace] when the app bar -/// can expand and collapse. -/// * class SliverGFAppBar extends StatefulWidget { /// Creates a material design app bar that can be placed in a [CustomScrollView]. /// diff --git a/lib/components/avatar/gf_avatar.dart b/lib/components/avatar/gf_avatar.dart index 26cbfcca..f0f048e8 100644 --- a/lib/components/avatar/gf_avatar.dart +++ b/lib/components/avatar/gf_avatar.dart @@ -5,6 +5,7 @@ import 'package:ui_kit/size/gf_size.dart'; import 'package:ui_kit/colors/gf_color.dart'; class GFAvatar extends StatelessWidget { + /// Typically a [Text] widget. If the [CircleAvatar] is to have an image, use [backgroundImage] instead. final Widget child; @@ -26,7 +27,7 @@ class GFAvatar extends StatelessWidget { /// The maximum size of the avatar, expressed as the radius (half the diameter). final double maxRadius; - /// size of avatar like [double] or [GFSize] i.e, 1.2, small, medium, large etc. + /// size of avatar like [GFSize] i.e, 1.2, small, medium, large etc. final dynamic size; /// shape of avatar [GFAvatarShape] i.e, standard, circle, square diff --git a/lib/components/badge/gf_badge.dart b/lib/components/badge/gf_badge.dart index ed667b1b..da099acc 100644 --- a/lib/components/badge/gf_badge.dart +++ b/lib/components/badge/gf_badge.dart @@ -4,13 +4,13 @@ import 'package:ui_kit/size/gf_size.dart'; import 'package:ui_kit/colors/gf_color.dart'; class GFBadge extends StatefulWidget { - /// The border side for the button's [Material]. + /// The border side for the badge's [Material]. final BorderSide border; - /// Typically the counter button's shape. + /// Typically the counter badge's shape. final ShapeBorder borderShape; - /// Counter type of [GFBadgeShape] i.e, standard, pills, square, + /// Counter type of [GFBadgeShape] i.e, standard, pills, square, circle final GFBadgeShape shape; /// Pass [GFColor] or [Color] diff --git a/lib/components/badge/gf_button_badge.dart b/lib/components/badge/gf_button_badge.dart index 39c6a0c6..2ab8aae3 100644 --- a/lib/components/badge/gf_button_badge.dart +++ b/lib/components/badge/gf_button_badge.dart @@ -20,52 +20,52 @@ class GFButtonBadge extends GFButton { /// Defines the default text style, with [Material.textStyle], for the button's [child]. final TextStyle textStyle; - /// The border side for the button's [Material]. + /// The border side for the badge's [Material]. final BorderSide borderSide; - /// The box shadow for the button's [Material]. + /// The box shadow for the badge's [Material]. final BoxShadow boxShadow; - /// Pass [GFColor] or [Color]. The color for the button's [Material] when it has the input focus. + /// Pass [GFColor] or [Color]. The color for the badge's [Material] when it has the input focus. final dynamic focusColor; - /// Pass [GFColor] or [Color]. The color for the button's [Material] when a pointer is hovering over it. + /// Pass [GFColor] or [Color]. The color for the badge's [Material] when a pointer is hovering over it. final dynamic hoverColor; - /// Pass [GFColor] or [Color]. The highlight color for the button's [InkWell]. + /// Pass [GFColor] or [Color]. The highlight color for the badge's [InkWell]. final dynamic highlightColor; - /// Pass [GFColor] or [Color]. The splash color for the button's [InkWell]. + /// Pass [GFColor] or [Color]. The splash color for the badge's [InkWell]. final dynamic splashColor; - /// The elevation for the button's [Material] when the button is [enabled] but not pressed. + /// The elevation for the badge's [Material] when the badge 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. + /// The elevation for the badge's [Material] when the badge 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. + /// The elevation for the badge's [Material] when the badge is [enabled] and has the input focus. final double focusElevation; - /// The elevation for the button's [Material] when the button is [enabled] and pressed. + /// The elevation for the badge's [Material] when the badge is [enabled] and pressed. final double highlightElevation; - /// The elevation for the button's [Material] when the button is not [enabled]. + /// The elevation for the badge's [Material] when the badge is not [enabled]. final double disabledElevation; - /// The internal padding for the button's [child]. + /// The internal padding for the badge's [child]. final EdgeInsetsGeometry padding; - /// Defines the button's size. + /// Defines the badge's size. final BoxConstraints constraints; - /// The shape of the button's [Material]. + /// The shape of the badge's [Material]. final ShapeBorder borderShape; /// Defines the duration of animated changes for [shape] and [elevation]. final Duration animationDuration; - /// Whether the button is enabled or disabled. + /// Whether the badge is enabled or disabled. bool get enabled => onPressed != null; /// Configures the minimum size of the tap target. @@ -89,23 +89,23 @@ class GFButtonBadge extends GFButton { /// Pass [GFColor] or [Color] final dynamic color; - /// The fill color of the button when the button is disabled. + /// The fill color of the badge when the badge is disabled. /// /// The default value of this color is the theme's disabled color, /// [ThemeData.disabledColor]. /// /// See also: /// - /// * [color] - the fill color of the button when the button is [enabled]. + /// * [color] - the fill color of the badge when the badge is [enabled]. final dynamic disabledColor; /// Pass [GFColor] or [Color] final dynamic textColor; - /// The color to use for this button's text when the button is disabled. + /// The color to use for this badge's text when the badge is disabled. /// - /// The button's [Material.textStyle] will be the current theme's button - /// text style, [ThemeData.textTheme.button], configured with this color. + /// The badge's [Material.textStyle] will be the current theme's badge + /// text style, [ThemeData.textTheme.badge], configured with this color. /// /// The default value is the theme's disabled color, /// [ThemeData.disabledColor]. @@ -115,7 +115,7 @@ class GFButtonBadge extends GFButton { /// /// See also: /// - /// * [textColor] - The color to use for this button's text when the button is [enabled]. + /// * [textColor] - The color to use for this badge's text when the badge is [enabled]. final dynamic disabledTextColor; /// size of [double] or [GFSize] i.e, 1.2, small, medium, large etc. @@ -127,24 +127,24 @@ class GFButtonBadge extends GFButton { /// icon type of [GFIconPosition] i.e, start, end final GFPosition position; - /// on true state blockButton gives block size button + /// on true state blockButton gives block size badge final bool blockButton; - /// on true state full width Button gives full width button + /// on true state full width Button gives full width badge final bool fullWidthButton; - /// on true state default box shadow appears around button - final bool buttonBoxShadow; + /// on true state default box shadow appears around badge, if GFButtonType is solid + final bool badgeBoxShadow; - /// A set of thirteen colors that can be used to derive the button theme's + /// A set of thirteen colors that can be used to derive the badge theme's /// colors. /// /// This property was added much later than the theme's set of highly - /// specific colors, like [ThemeData.buttonColor], [ThemeData.highlightColor], + /// specific colors, like [ThemeData.badgeColor], [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 + /// The colors for new badge classes can be defined exclusively in terms + /// of [colorScheme]. When it's possible, the existing badges will /// (continue to) gradually migrate to it. final ColorScheme colorScheme; @@ -158,26 +158,26 @@ class GFButtonBadge extends GFButton { /// * [Feedback] for providing platform-specific feedback to certain actions. final bool enableFeedback; - /// Called when the button is long-pressed. + /// Called when the badge is long-pressed. /// - /// If this callback and [onPressed] are null, then the button will be disabled. + /// If this callback and [onPressed] are null, then the badge will be disabled. /// /// See also: /// - /// * [enabled], which is true if the button is enabled. + /// * [enabled], which is true if the badge is enabled. final VoidCallback onLongPress; - /// Can be used to display [GFCounter], [Icons] inside button design + /// Can be used to display [GFCounter], [Icons] inside badge design final Widget icon; - /// Create buttons badges of all types. check out [GFIconButton] for icon buttons, and [GFBadge] for badges + /// Create badges badges of all types. check out [GFIconButton] for icon badges, and [GFBadge] for badges const GFButtonBadge( {Key key, @required this.onPressed, this.onHighlightChanged, this.textStyle, this.boxShadow, - this.buttonBoxShadow, + this.badgeBoxShadow, this.focusColor, this.hoverColor, this.highlightColor, @@ -238,7 +238,7 @@ class GFButtonBadge extends GFButton { onHighlightChanged: onHighlightChanged, textStyle: textStyle, boxShadow: boxShadow, - buttonBoxShadow: buttonBoxShadow, + buttonBoxShadow: badgeBoxShadow, focusColor: focusColor, hoverColor: hoverColor, highlightColor: highlightColor, @@ -282,7 +282,7 @@ class GFButtonBadge extends GFButton { // /// Called when the badge is tapped or otherwise activated. // final VoidCallback onPressed; // -// /// Defines the default text style, with [Material.textStyle], for the button's [child]. +// /// Defines the default text style, with [Material.textStyle], for the badge's [child]. // final TextStyle textStyle; // // /// The border side for the badge's [Material]. diff --git a/lib/components/button/gf_button.dart b/lib/components/button/gf_button.dart index 890d16b8..f120cc89 100644 --- a/lib/components/button/gf_button.dart +++ b/lib/components/button/gf_button.dart @@ -23,7 +23,7 @@ class GFButton extends StatefulWidget { /// The border side for the button's [Material]. final BorderSide borderSide; - /// The box shadow for the button's [Material]. + /// The box shadow for the button's [Material], if GFButtonType is solid final BoxShadow boxShadow; /// Pass [GFColor] or [Color]. The color for the button's [Material] when it has the input focus. @@ -139,7 +139,7 @@ class GFButton extends StatefulWidget { /// on true state full width Button gives full width button final bool fullWidthButton; - /// on true state default box shadow appears around button + /// on true state default box shadow appears around button, if GFButtonType is solid final bool buttonBoxShadow; /// A set of thirteen colors that can be used to derive the button theme's @@ -515,7 +515,7 @@ class _GFButtonState extends State { constraints: this.icon == null ? BoxConstraints(minWidth: 80.0) : BoxConstraints(minWidth: 90.0), - decoration: getBoxShadow(), + decoration: widget.type == GFType.solid ? getBoxShadow() : null, child: Material( elevation: _effectiveElevation, textStyle: widget.textStyle == null @@ -584,16 +584,6 @@ class _GFButtonState extends State { ), ); -// return Semantics( -// container: true, -// button: true, -// enabled: widget.enabled, -// child: _InputPadding( -// minSize: minSize, -// child: result, -// ), -// ); - return Semantics( container: true, button: true, diff --git a/lib/components/button/gf_button_bar.dart b/lib/components/button/gf_button_bar.dart index 6d2fedce..331a26f9 100644 --- a/lib/components/button/gf_button_bar.dart +++ b/lib/components/button/gf_button_bar.dart @@ -4,6 +4,8 @@ import 'package:ui_kit/components/button/gf_icon_button.dart'; class GFButtonBar extends StatelessWidget { + /// Create buttons bar for all types of buttons. + /// check [GFButton] and [GFIconButton] const GFButtonBar({ Key key, this.alignment = MainAxisAlignment.end, diff --git a/lib/components/button/gf_icon_button.dart b/lib/components/button/gf_icon_button.dart index 33473552..bbebebce 100644 --- a/lib/components/button/gf_icon_button.dart +++ b/lib/components/button/gf_icon_button.dart @@ -56,7 +56,7 @@ class GFIconButton extends StatefulWidget { /// Text that describes the action that will occur when the button is pressed. final String tooltip; - /// The box shadow for the button's [Material]. + /// The box shadow for the button's [Material], if GFButtonType is solid final BoxShadow boxShadow; /// The shape and border for the button's [Material]. @@ -65,7 +65,7 @@ class GFIconButton extends StatefulWidget { /// size of [double] or [GFSize] i.e, 1.2, small, medium, large etc. final dynamic size; - /// on true state default box shadow appears around button + /// on true state default box shadow appears around button, if GFButtonType is solid final bool buttonBoxShadow; /// The border side for the button's [Material]. @@ -277,7 +277,7 @@ class _GFIconButtonState extends State { child: Container( height: widget.shape == GFIconButtonShape.circle ? this.height + 6 : this.height, width: widget.shape == GFIconButtonShape.pills ? this.width + 10 : widget.shape == GFIconButtonShape.circle ? this.height + 6 : this.width, - decoration: getBoxShadow(), + decoration: widget.type == GFType.solid ? getBoxShadow() : null, child: Material( shape: widget.type == GFType.transparent ? null diff --git a/lib/components/button/gf_social_button.dart b/lib/components/button/gf_social_button.dart index 406247e7..af153eb9 100644 --- a/lib/components/button/gf_social_button.dart +++ b/lib/components/button/gf_social_button.dart @@ -24,7 +24,7 @@ class GFSocialButton extends GFButton{ /// The border side for the button's [Material]. final BorderSide borderSide; - /// The box shadow for the button's [Material]. + /// The box shadow for the button's [Material], if GFButtonType is solid final BoxShadow boxShadow; /// Pass [GFColor] or [Color]. The color for the button's [Material] when it has the input focus. @@ -140,7 +140,7 @@ class GFSocialButton extends GFButton{ /// on true state full width Button gives full width button final bool fullWidthButton; - /// on true state default box shadow appears around button + /// on true state default box shadow appears around button, if GFButtonType is solid final bool buttonBoxShadow; /// A set of thirteen colors that can be used to derive the button theme's diff --git a/lib/components/card/gf_card.dart b/lib/components/card/gf_card.dart index c5de141c..ef14a871 100644 --- a/lib/components/card/gf_card.dart +++ b/lib/components/card/gf_card.dart @@ -5,9 +5,16 @@ 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'; -enum GFCardType { basic, social, image} +/// A material design card. A card has slightly rounded corners and a shadow. +/// +/// A card is a sheet of [Material] used to represent some related information, +/// for example an album, a geographical location, a meal, contact details, etc. class GFCard extends StatelessWidget { + /// Creates a material design card. + /// + /// The [elevation] must be null or non-negative. The [borderOnForeground] + /// must not be null. const GFCard({ Key key, @@ -71,6 +78,7 @@ class GFCard extends StatelessWidget { final Image image; /// overlay image [GFImageOverlay] widget can be used + /// to display image with shaded overlay final ImageProvider imageOverlay; /// widget can be used to define buttons bar, see [GFButtonBar] @@ -79,6 +87,7 @@ class GFCard extends StatelessWidget { /// How the image should be inscribed into the box. /// The default is [BoxFit.scaleDown] if [centerSlice] is null, and /// [BoxFit.fill] if [centerSlice] is not null. + /// [boxFit] for only [GFImageOverlay] final BoxFit boxFit; /// A color filter to apply to the image before painting it. diff --git a/lib/components/carousel/gf_carousel.dart b/lib/components/carousel/gf_carousel.dart index 3186c24e..1fd5c53f 100644 --- a/lib/components/carousel/gf_carousel.dart +++ b/lib/components/carousel/gf_carousel.dart @@ -10,6 +10,9 @@ List map(List list, Function handler) { } class GFCarousel extends StatefulWidget { + + /// Creates slide show of [Images] and [Widget] with animation for sliding. + GFCarousel( {@required this.items, this.pagerSize, diff --git a/lib/components/carousel/gf_items_carousel.dart b/lib/components/carousel/gf_items_carousel.dart index 8a55b837..c31df9a8 100644 --- a/lib/components/carousel/gf_items_carousel.dart +++ b/lib/components/carousel/gf_items_carousel.dart @@ -1,54 +1,49 @@ -library carousel; - import 'dart:async'; - import 'package:flutter/material.dart'; -/// Signature for when a pointer has contacted the screen and has begun to move. +/// When a pointer has come to contact with screen and has begun to move. /// -/// The `details` object provides the position of the touch when it first +/// The function provides the position of the touch when it first /// touched the surface. typedef GFItemsCarouselSlideStartCallback = void Function( DragStartDetails details); -/// Signature for when a pointer that is in contact with the screen and moving +/// When a pointer that is in contact with the screen and moving /// has moved again. /// -/// The `details` object provides the position of the touch and the distance it +/// The function provides the position of the touch and the distance it /// has travelled since the last update. typedef GFItemsCarouselSlideCallback = void Function(DragUpdateDetails details); -/// Signature for when a pointer that was previously in contact with the screen +/// When a pointer that was previously in contact with the screen /// and moving is no longer in contact with the screen. /// /// The velocity at which the pointer was moving when it stopped contacting -/// the screen is available in the `details`. +/// the screen. typedef GFItemsCarouselSlideEndCallback = void Function(DragEndDetails details); -/// A widget that show draggable cells with animation. -/// -/// Set [rowCount] of visible cells -/// -/// Set drag handlers [onSlideStart], [onSlide], [onSlideEnd] -/// -/// Set left/right arrows [leftArrow], [rightArrow] class GFItemsCarousel extends StatefulWidget { + /// Count of visible cells final int rowCount; + /// The widgets to be shown as sliders. final List children; - /// Signature for when a pointer has contacted the screen and has begun to move. + /// When a pointer has contacted the screen and has begun to move. final GFItemsCarouselSlideStartCallback onSlideStart; - /// Signature for when a pointer that is in contact with the screen and moving + /// When a pointer that is in contact with the screen and moving /// has moved again. final GFItemsCarouselSlideCallback onSlide; - /// Signature for when a pointer that was previously in contact with the screen + /// When a pointer that was previously in contact with the screen /// and moving is no longer in contact with the screen. final GFItemsCarouselSlideEndCallback onSlideEnd; + /// Creates slide show of [Images] and [Widget] with animation for sliding. + /// Shows multiple items on one slide, items number depends on rowCount. + GFItemsCarousel( {this.rowCount, this.children, @@ -129,7 +124,7 @@ class _GFItemsCarouselState extends State double dx = details.velocity.pixelsPerSecond.dx; if (dx == 0) { - return this.runShiftAnimation(); + return this.slideAnimation(); } this.animationController = new AnimationController( @@ -146,7 +141,7 @@ class _GFItemsCarouselState extends State animation.addStatusListener((AnimationStatus status) { if (status == AnimationStatus.completed) { - this.runShiftAnimation(); + this.slideAnimation(); } }); @@ -160,7 +155,7 @@ class _GFItemsCarouselState extends State if (widget.onSlideEnd != null) widget.onSlideEnd(details); } - runShiftAnimation() { + slideAnimation() { double beginAnimation = this.offset; double endAnimation = this.size * (this.offset / this.size).round().toDouble(); diff --git a/lib/components/drawer/gf_drawer.dart b/lib/components/drawer/gf_drawer.dart index 1ebdaa3c..2b3d919a 100644 --- a/lib/components/drawer/gf_drawer.dart +++ b/lib/components/drawer/gf_drawer.dart @@ -45,77 +45,12 @@ const double _kWidth = 304.0; /// [GFDrawer] when a [GFDrawer] is available in the [Scaffold]. The [Scaffold] /// automatically handles the edge-swipe gesture to show the drawer. /// -/// {@animation 350 622 https://flutter.github.io/assets-for-api-docs/assets/material/drawer.mp4} -/// -/// {@tool sample} /// This example shows how to create a [Scaffold] that contains an [AppBar] and /// a [GFDrawer]. A user taps the "menu" icon in the [AppBar] to open the /// [GFDrawer]. The [GFDrawer] displays four items: A header and three menu items. /// The [GFDrawer] displays the four items using a [ListView], which allows the /// user to scroll through the items if need be. /// -/// ```dart -/// Scaffold( -/// appBar: AppBar( -/// title: const Text('GFDrawer Demo'), -/// ), -/// drawer: GFDrawer( -/// child: ListView( -/// padding: EdgeInsets.zero, -/// children: const [ -/// GFDrawerHeader( -/// decoration: BoxDecoration( -/// color: Colors.blue, -/// ), -/// child: Text( -/// 'GFDrawer Header', -/// style: TextStyle( -/// color: Colors.white, -/// fontSize: 24, -/// ), -/// ), -/// ), -/// ListTile( -/// leading: Icon(Icons.message), -/// title: Text('Messages'), -/// ), -/// ListTile( -/// leading: Icon(Icons.account_circle), -/// title: Text('Profile'), -/// ), -/// ListTile( -/// leading: Icon(Icons.settings), -/// title: Text('Settings'), -/// ), -/// ], -/// ), -/// ), -/// ) -/// ``` -/// {@end-tool} -/// -/// An open drawer can be closed by calling [Navigator.pop]. For example -/// a drawer item might close the drawer when tapped: -/// -/// ```dart -/// ListTile( -/// leading: Icon(Icons.change_history), -/// title: Text('Change history'), -/// onTap: () { -/// // change app state... -/// Navigator.pop(context); // close the drawer -/// }, -/// ); -/// ``` -/// -/// See also: -/// -/// * [Scaffold.drawer], where one specifies a [GFDrawer] so that it can be -/// shown. -/// * [Scaffold.of], to obtain the current [ScaffoldState], which manages the -/// display and animation of the drawer. -/// * [ScaffoldState.openGFDrawer], which displays its [GFDrawer]. -/// class GFDrawer extends StatelessWidget { /// Creates a material design drawer. /// diff --git a/lib/components/drawer/gf_drawer_header.dart b/lib/components/drawer/gf_drawer_header.dart index c56722c3..1315f46f 100644 --- a/lib/components/drawer/gf_drawer_header.dart +++ b/lib/components/drawer/gf_drawer_header.dart @@ -2,8 +2,8 @@ import 'package:flutter/widgets.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -class DrawerHeaderPictures extends StatelessWidget { - const DrawerHeaderPictures({ +class GFDrawerHeaderPictures extends StatelessWidget { + const GFDrawerHeaderPictures({ Key key, this.currentAccountPicture, this.otherAccountsPictures, @@ -58,10 +58,6 @@ class DrawerHeaderPictures extends StatelessWidget { /// /// Requires one of its ancestors to be a [Material] widget. /// -/// See also: -/// -/// * [DrawerHeader], for a drawer header that doesn't show user accounts. -/// * class GFDrawerHeader extends StatefulWidget { /// Creates a material design drawer header. /// @@ -134,7 +130,7 @@ class _GFDrawerHeaderState extends State { Expanded( child: Padding( padding: const EdgeInsetsDirectional.only(end: 16.0), - child: DrawerHeaderPictures( + child: GFDrawerHeaderPictures( currentAccountPicture: widget.currentAccountPicture, otherAccountsPictures: widget.otherAccountsPictures, ), diff --git a/lib/components/image/gf_image_overlay.dart b/lib/components/image/gf_image_overlay.dart index d330a189..9d7a8575 100644 --- a/lib/components/image/gf_image_overlay.dart +++ b/lib/components/image/gf_image_overlay.dart @@ -1,8 +1,9 @@ import 'dart:ui'; - import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; +/// Creates a image widget with shaded overlay. + class GFImageOverlay extends StatelessWidget { const GFImageOverlay({ Key key, @@ -34,7 +35,7 @@ class GFImageOverlay extends StatelessWidget { /// The empty space that surrounds the card. Defines the image's outer [Container.margin]. final EdgeInsetsGeometry margin; - /// The empty space that surrounds the card. Defines the image's outer [Container.margin].. + /// The empty space that surrounds the card. Defines the image's outer [Container.padding].. final EdgeInsetsGeometry padding; /// The [Image] widget used to display image @@ -54,10 +55,10 @@ class GFImageOverlay extends StatelessWidget { /// A color filter to apply to the image before painting it. final ColorFilter colorFilter ; - /// The corners of this [GFCard] are rounded by this [BorderRadius]. + /// The corners of this [GFImageOverlay] are rounded by this [BorderRadius]. final BorderRadiusGeometry borderRadius; - /// A border to draw above the [GFCard]. + /// A border to draw above the [GFImageOverlay]. final Border border; /// The shape to fill the background [color], [gradient], and [image] into and diff --git a/lib/components/list/gf_list.dart b/lib/components/list/gf_list.dart index bc2685b7..2f106617 100644 --- a/lib/components/list/gf_list.dart +++ b/lib/components/list/gf_list.dart @@ -1,61 +1,62 @@ -import 'package:flutter/material.dart'; -import 'package:ui_kit/components/avatar/gf_avatar.dart'; -import 'package:ui_kit/components/list_tile/gf_list_tile.dart'; -class GFList extends StatefulWidget { - - const GFList( - {Key key, - this.child, - this.text = 'Lorem ipsum', - this.icon = const Icon(Icons.keyboard_arrow_right), - this.textStyle, - this.showDivider= true - - }) - : super(key: key); - - - - final Widget child; - - final String text; - - final Widget icon; - - final TextStyle textStyle; - - final bool showDivider; - - - @override - _GFListState createState() => _GFListState(); -} - -class _GFListState extends State { - @override - Widget build(BuildContext context) { - return Container( - height: MediaQuery.of(context).size.height, - width: MediaQuery.of(context).size.width, - margin: EdgeInsets.only(left: 10), - padding: EdgeInsets.only(right: 5, top: 10), - child:ListView.builder( - shrinkWrap: true, -// scrollDirection: Axis.horizontal, -// itemCount: 0, - itemBuilder: (BuildContext context, int index) { - return Container( +//import 'package:flutter/material.dart'; +//import 'package:ui_kit/components/avatar/gf_avatar.dart'; +//import 'package:ui_kit/components/list_tile/gf_list_tile.dart'; +// +//class GFList extends StatefulWidget { +// +// const GFList( +// {Key key, +// this.child, +// this.text = 'Lorem ipsum', +// this.icon = const Icon(Icons.keyboard_arrow_right), +// this.textStyle, +// this.showDivider= true +// +// }) +// : super(key: key); +// +// +// +// final Widget child; +// +// final String text; +// +// final Widget icon; +// +// final TextStyle textStyle; +// +// final bool showDivider; +// +// +// @override +// _GFListState createState() => _GFListState(); +//} +// +//class _GFListState extends State { +// @override +// Widget build(BuildContext context) { +// return Container( // height: MediaQuery.of(context).size.height, // width: MediaQuery.of(context).size.width, - child: GFListTile( - title: Text('j'), - avatar: GFAvatar(), - ), - ); - } - - -) - ); - } -} +// margin: EdgeInsets.only(left: 10), +// padding: EdgeInsets.only(right: 5, top: 10), +// child:ListView.builder( +// shrinkWrap: true, +//// scrollDirection: Axis.horizontal, +//// itemCount: 0, +// itemBuilder: (BuildContext context, int index) { +// return Container( +//// height: MediaQuery.of(context).size.height, +//// width: MediaQuery.of(context).size.width, +// child: GFListTile( +// title: Text('j'), +// avatar: GFAvatar(), +// ), +// ); +// } +// +// +//) +// ); +// } +//} diff --git a/lib/components/list_tile/gf_list_tile.dart b/lib/components/list_tile/gf_list_tile.dart index 3062478a..823f2466 100644 --- a/lib/components/list_tile/gf_list_tile.dart +++ b/lib/components/list_tile/gf_list_tile.dart @@ -4,8 +4,9 @@ import 'package:ui_kit/colors/gf_color.dart'; import 'package:ui_kit/components/avatar/gf_avatar.dart'; class GFListTile extends StatelessWidget { - /// The card's background color. - final Color color; + + /// The GFListTile's background color. Can be given [Colors] or [GFColor] + final dynamic color; /// type of [Widget] or [GFAvatar] used to create rounded user profile final Widget avatar; @@ -16,10 +17,10 @@ class GFListTile extends StatelessWidget { /// The subTitle to display inside the [GFListTile]. see [Text] final Widget subTitle; - /// The descriprion to display inside the [GFListTile]. see [Text] + /// The description to display inside the [GFListTile]. see [Text] final Widget description; - /// The descriprion to display inside the [GFListTile]. see [Text] + /// The description to display inside the [GFListTile]. see [Text] final Widget trailing; /// The icon to display inside the [GFListTile]. see [Icon] @@ -28,7 +29,7 @@ class GFListTile extends StatelessWidget { ///type of [bool] corresponds to true or false to show or hide the divider final bool showDivider; - /// The empty space that surrounds the card. Defines the card's outer [Container.margin].. + /// The empty space that surrounds the card. Defines the card's outer [Container.padding].. final EdgeInsetsGeometry padding; /// The divider's height extent. @@ -65,17 +66,9 @@ class GFListTile extends StatelessWidget { /// /// If this is null, then the [DividerThemeData.color] is used. If that is /// also null, then [ThemeData.dividerColor] is used. - /// - /// {@tool sample} - /// - /// ```dart - /// Divider( - /// color: Colors.deepOrange, - /// ) - /// ``` - /// {@end-tool} final Color dividerColor; + /// Creates ListTile with leading, title, trailing, image widget for almost every type of ListTile design. const GFListTile( {Key key, this.color, diff --git a/lib/components/tabs/gf_segment_tabs.dart b/lib/components/tabs/gf_segment_tabs.dart index edcb3781..d3a7f5da 100644 --- a/lib/components/tabs/gf_segment_tabs.dart +++ b/lib/components/tabs/gf_segment_tabs.dart @@ -3,8 +3,11 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/rendering.dart'; import 'package:flutter/widgets.dart'; import 'package:ui_kit/colors/gf_color.dart'; +import 'package:ui_kit/components/tabs/gf_tabBar.dart'; import 'package:ui_kit/components/tabs/gf_tabBarView.dart'; +/// Creates pills like structured tab bar. See [GFTabBar] +/// [GFSegmentTabs] are best used as an alternative for [GFTabBar]. class GFSegmentTabs extends StatefulWidget { GFSegmentTabs({ @@ -182,7 +185,7 @@ class _GFSegmentTabsState extends State { BoxDecoration( color: widget.indicatorColor == null ? getGFColor(GFColor.primary) : widget.indicatorColor, border: Border.all(color: widget.indicatorColor == null ? Colors.transparent : widget.indicatorColor, width: 2.0), - borderRadius: widget.borderRadius == null ? BorderRadius.circular(2.0) : widget.borderRadius, + borderRadius: widget.borderRadius == null ? BorderRadius.circular(0.0) : widget.borderRadius, ) : widget.indicator, indicatorPadding: widget.indicatorPadding, indicatorWeight: widget.indicatorWeight, diff --git a/lib/components/tabs/gf_tabBar.dart b/lib/components/tabs/gf_tabBar.dart index 80bb68f3..c6657ca8 100644 --- a/lib/components/tabs/gf_tabBar.dart +++ b/lib/components/tabs/gf_tabBar.dart @@ -5,7 +5,16 @@ import 'package:flutter/widgets.dart'; import 'package:ui_kit/colors/gf_color.dart'; import 'package:ui_kit/components/tabs/gf_tabBarView.dart'; +/// A material design widget that displays a horizontal row of tabs. +/// +/// Typically created as the [AppBar.bottom] part of an [AppBar] and in +/// conjunction with a [TabBarView]. + class GFTabBar extends StatefulWidget { + /// Creates a material design tab bar. + /// + /// The [tabs] argument must not be null and its length must match the [controller]'s + /// [TabController.length]. GFTabBar({ Key key, this.initialIndex = 0, diff --git a/lib/components/tabs/gf_tabBarView.dart b/lib/components/tabs/gf_tabBarView.dart index 88bf9beb..6d9ec769 100644 --- a/lib/components/tabs/gf_tabBarView.dart +++ b/lib/components/tabs/gf_tabBarView.dart @@ -3,19 +3,13 @@ import 'dart:async'; import 'package:flutter/rendering.dart'; import 'package:flutter/widgets.dart'; import 'package:flutter/gestures.dart' show DragStartBehavior; +import 'package:ui_kit/components/tabs/gf_segment_tabs.dart'; /// A page view that displays the widget which corresponds to the currently /// selected tab. /// -/// This widget is typically used in conjunction with a [TabBar]. +/// This widget is typically used in conjunction with a [GFTabBar] or [GFSegmentTabs]. /// -/// If a [TabController] is not provided, then there must be a [DefaultTabController] -/// ancestor. -/// -/// The tab controller's [TabController.length] must equal the length of the -/// [children] list and the length of the [TabBar.tabs] list. -/// -/// To see a sample implementation, visit the [TabController] documentation. class GFTabBarView extends StatefulWidget { /// Creates a page view with one child per tab. /// @@ -32,14 +26,11 @@ class GFTabBarView extends StatefulWidget { super(key: key); /// This widget's selection and animation state. - /// - /// If [TabController] is not provided, then the value of [DefaultTabController.of] - /// will be used. final TabController controller; /// One widget per tab. /// - /// Its length must match the length of the [TabBar.tabs] + /// Its length must match the length of the [GFTabBar.tabs] /// list, as well as the [controller]'s [TabController.length]. final List children; diff --git a/lib/components/tabs/gf_tabs.dart b/lib/components/tabs/gf_tabs.dart index d588e6b7..2076d2ca 100644 --- a/lib/components/tabs/gf_tabs.dart +++ b/lib/components/tabs/gf_tabs.dart @@ -6,6 +6,13 @@ import 'package:ui_kit/colors/gf_color.dart'; import 'package:ui_kit/components/tabs/gf_tabBarView.dart'; import 'package:ui_kit/components/tabs/gf_tabBar.dart'; +/// Creates a default tab for the given [child] widget. +/// +/// The [length] argument is typically greater than one. The [length] must +/// match [GFTabBar.tabs]'s and [GFTabBarView.children]'s length. +/// +/// The [initialIndex] argument must not be null. + class GFTabs extends StatefulWidget { GFTabs({ Key key, diff --git a/lib/components/toast/gf_floating_widget.dart b/lib/components/toast/gf_floating_widget.dart index ad46e41c..0da2e27c 100644 --- a/lib/components/toast/gf_floating_widget.dart +++ b/lib/components/toast/gf_floating_widget.dart @@ -1,6 +1,11 @@ import 'package:flutter/material.dart'; +import 'package:ui_kit/components/toast/gf_toast.dart'; class GFFloatingWidget extends StatefulWidget { + + /// Creates a Floating body can be used to display the quick messages, warning and erros. + /// Inside floating widget [GFToast] can be used as body. See [GFToast] + const GFFloatingWidget( {Key key, this.child, diff --git a/lib/components/toast/gf_toast.dart b/lib/components/toast/gf_toast.dart index c4b1f294..3058c00a 100644 --- a/lib/components/toast/gf_toast.dart +++ b/lib/components/toast/gf_toast.dart @@ -1,10 +1,12 @@ import 'dart:async'; - import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import 'package:ui_kit/colors/gf_color.dart'; +import 'package:ui_kit/components/toast/gf_floating_widget.dart'; class GFToast extends StatefulWidget { + ///Creates [GFToast] that can be used to display quick warning or error messages. + /// Toast has to be wrap inside the body like [GFFloatingWidget]. See [GFFloatingWidget] /// GFToast({ Key key, diff --git a/lib/components/toggle/gf_toggle.dart b/lib/components/toggle/gf_toggle.dart index 1b02b34a..591a0e04 100644 --- a/lib/components/toggle/gf_toggle.dart +++ b/lib/components/toggle/gf_toggle.dart @@ -2,7 +2,22 @@ import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import '../../types/gf_toggle_type.dart'; +/// A toggle button allows the user to change a setting between two states. +/// +/// The state of each button is controlled by [isSelected], which is a list of bools that determine +/// if a button is in an unselected or selected state. They are both +/// correlated by their index in the list. The length of [isSelected] has to +/// match the length of the [children] list. +/// +/// ## Customizing toggle buttons +/// Each toggle's behavior can be configured by the [onPressed] callback, which +/// can update the [isSelected] list however it wants to. +/// + class GFToggle extends StatefulWidget { + + /// Creates toggle button to switch between states onChanged. + GFToggle( {Key key, @required this.onChanged, diff --git a/lib/components/typography/gf_typography.dart b/lib/components/typography/gf_typography.dart index 389112db..de9591c4 100644 --- a/lib/components/typography/gf_typography.dart +++ b/lib/components/typography/gf_typography.dart @@ -3,9 +3,13 @@ import 'package:ui_kit/colors/gf_color.dart'; import 'package:ui_kit/types/gf_typography_type.dart'; class GFTypography extends StatelessWidget { + + /// Creates simple title with underline. Style of title can be changed using [GFTypographyType] + /// showDivider is default true, can be set false. + const GFTypography( {Key key, - this.type = GFTypographyType.typo4, + this.type = GFTypographyType.typo4, this.child, this.text, this.icon, @@ -19,9 +23,6 @@ class GFTypography extends StatelessWidget { this.backgroundImagecolorFilter}) : super(key: key); - - - /// child of type [Widget] is alternative to text key. text will get priority over child final Widget child; @@ -52,29 +53,28 @@ class GFTypography extends StatelessWidget { ///backgroundImage of type [ImageProvider] to set the background of [GFTypography] final ImageProvider backgroundImage; - ///backgroundImagecolorFilter of type [ColorFilter] to set the background color of [GFTypography] only when backgroundImage is available + ///backgroundImagecolorFilter of type [ColorFilter] to set the + ///background color of [GFTypography] only when backgroundImage is available final ColorFilter backgroundImagecolorFilter; - /// header type of [GFTypographyType] i.e, typo1, typo2, typo3, typo4, typo5, typo6 final GFTypographyType type; @override Widget build(BuildContext context) { - double fontSize; - if(type == GFTypographyType.typo1){ + if (type == GFTypographyType.typo1) { fontSize = 25.0; - }else if(type == GFTypographyType.typo2){ + } else if (type == GFTypographyType.typo2) { fontSize = 22.0; - }else if (type == GFTypographyType.typo3){ + } else if (type == GFTypographyType.typo3) { fontSize = 19.0; - }else if(type == GFTypographyType.typo4){ + } else if (type == GFTypographyType.typo4) { fontSize = 17.0; - }else if (type == GFTypographyType.typo5){ + } else if (type == GFTypographyType.typo5) { fontSize = 15.0; - }else if(type == GFTypographyType.typo6){ + } else if (type == GFTypographyType.typo6) { fontSize = 13.0; } @@ -100,18 +100,19 @@ class GFTypography extends StatelessWidget { ? Padding(padding: EdgeInsets.only(left: 10)) : Container(), text != null - ? 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), - )) + ? 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 ], ), @@ -121,7 +122,7 @@ class GFTypography extends StatelessWidget { alignment: dividerAlignment, child: Container( width: dividerWidth != null ? dividerWidth : 70, - height: fontSize/5, + height: fontSize / 5, decoration: BoxDecoration( color: dividerColor != null ? getGFColor(dividerColor) diff --git a/lib/position/gf_position.dart b/lib/position/gf_position.dart index fc17b7c7..b842954f 100644 --- a/lib/position/gf_position.dart +++ b/lib/position/gf_position.dart @@ -1 +1,9 @@ -enum GFPosition { start, end } +/// [GFPosition] is used to position the icon, badges to start or end of the button +/// See [GFButton] and [GFButtonBadge] +/// +enum GFPosition { + /// [GFPosition.start] is used to place icon, badges to start of the [GFButton] and [GFButtonBadge] + start, + /// [GFPosition.end] is used to place icon, badges to end of the [GFButton] and [GFButtonBadge] + end +} diff --git a/lib/shape/gf_avatar_shape.dart b/lib/shape/gf_avatar_shape.dart index 57733004..6f44e2c7 100644 --- a/lib/shape/gf_avatar_shape.dart +++ b/lib/shape/gf_avatar_shape.dart @@ -1 +1,10 @@ -enum GFAvatarShape { standard, square, circle } \ No newline at end of file +/// [GFAvatarShape] is used to shape the [GFAvatar] widget. +/// +enum GFAvatarShape { + /// Default shape is [GFAvatarShape.circle], used for rounded avatar + circle, + /// [GFAvatarShape.standard], used for square avatar with rounded corners + standard, + /// [GFAvatarShape.square], used for square avatar + square, +} \ No newline at end of file diff --git a/lib/shape/gf_badge_shape.dart b/lib/shape/gf_badge_shape.dart index f2f18678..1b2ef536 100644 --- a/lib/shape/gf_badge_shape.dart +++ b/lib/shape/gf_badge_shape.dart @@ -1 +1,12 @@ -enum GFBadgeShape { standard, pills, square, circle } +/// [GFBadgeShape] is used to shape the [GFBadge] widget. +/// +enum GFBadgeShape { + /// [GFBadgeShape.circle], used for rounded shape badge + circle, + /// [GFBadgeShape.pills], used for pills shaped badge with rounded corners + pills, + /// Default shape is [GFBadgeShape.standard], used for standard rectangle badge with rounded corners + standard, + /// [GFBadgeShape.square], used for square badge + square, +} diff --git a/lib/shape/gf_button_shape.dart b/lib/shape/gf_button_shape.dart index 0febabbf..3bb537cf 100644 --- a/lib/shape/gf_button_shape.dart +++ b/lib/shape/gf_button_shape.dart @@ -1 +1,10 @@ -enum GFButtonShape { standard, pills, square } +/// [GFButtonShape] is used to shape the [GFButton] widget. +/// +enum GFButtonShape { + /// [GFButtonShape.pills], used for pills shaped button with rounded corners + pills, + /// Default shape is [GFButtonShape.standard], used for standard rectangle button with rounded corners + standard, + /// [GFButtonShape.square], used for square button + square, +} diff --git a/lib/shape/gf_icon_button_shape.dart b/lib/shape/gf_icon_button_shape.dart index c6633dbc..ed35a15b 100644 --- a/lib/shape/gf_icon_button_shape.dart +++ b/lib/shape/gf_icon_button_shape.dart @@ -1 +1,12 @@ -enum GFIconButtonShape { standard, pills, square, circle } \ No newline at end of file +/// [GFIconButtonShape] is used to shape the [GFIconButton] widget. +/// +enum GFIconButtonShape { + /// [GFIconButtonShape.circle], used for rounded shape icon button + circle, + /// [GFIconButtonShape.pills], used for pills shaped icon button with rounded corners + pills, + /// Default shape is [GFIconButtonShape.standard], used for standard rectangle icon button with rounded corners + standard, + /// [GFIconButtonShape.square], used for square icon button + square, +} diff --git a/lib/size/gf_size.dart b/lib/size/gf_size.dart index f5d36f1c..1a1a20fe 100644 --- a/lib/size/gf_size.dart +++ b/lib/size/gf_size.dart @@ -1,4 +1,14 @@ -enum GFSize { small, medium, large } +/// [GFSize] is used to change the size of the widget. +/// +enum GFSize { + /// [GFSize.small] is used for small size widget + small, + /// Default size if [GFSize.medium] is used for medium size widget + medium, + /// [GFSize.large] is used for large size widget + large, +} + const double SMALL = 30.0; const double MEDIUM = 35.0; diff --git a/lib/types/gf_toggle_type.dart b/lib/types/gf_toggle_type.dart index f34acd17..42d600a4 100644 --- a/lib/types/gf_toggle_type.dart +++ b/lib/types/gf_toggle_type.dart @@ -1 +1,12 @@ -enum GFToggleType { android, ios, custom, square } +/// [GFToggleType] is used to change the shape of +/// +enum GFToggleType { + /// [GFToggleType.android] is used for basic toggle shape of android mode + android, + /// [GFToggleType.custom] is used to change the shape of [GFToggle] + custom, + /// [GFToggleType.ios] is used for basic toggle shape of ios mode + ios, + /// [GFToggleType.square] is used for square shape of [GFToggle] + square +} \ No newline at end of file diff --git a/lib/types/gf_type.dart b/lib/types/gf_type.dart index 1a40249c..813df668 100644 --- a/lib/types/gf_type.dart +++ b/lib/types/gf_type.dart @@ -1 +1,12 @@ -enum GFType { solid, outline, outline2x, transparent } +/// [GFType] is used to change the type of widgets +/// +enum GFType { + /// Default type is [GFType.solid], used to fill with color for widget + solid, + /// Type [GFType.outline], used for widget with outline border and fill color with Colors.transparent + outline, + /// Type [GFType.outline2x], used for widget with outline2x border and border.width = 2.0 and fill color with Colors.transparent + outline2x, + /// Type [GFType.transparent], used for widget with fill color with Colors.transparent + transparent +} diff --git a/lib/types/gf_typography_type.dart b/lib/types/gf_typography_type.dart index ddcd579d..68ab1895 100644 --- a/lib/types/gf_typography_type.dart +++ b/lib/types/gf_typography_type.dart @@ -1 +1,16 @@ -enum GFTypographyType { typo1, typo2, typo3, typo4, typo5, typo6 } \ No newline at end of file +/// [GFTypographyType] is used to change the type of [GFTypography] title widget. +/// +enum GFTypographyType { + /// [GFTypographyType.typo1] type used for title widget with fontSize = 25.0 + typo1, + /// [GFTypographyType.typo2] type used for title widget with fontSize = 22.0 + typo2, + /// [GFTypographyType.typo3] type used for title widget with fontSize = 19.0 + typo3, + /// [GFTypographyType.typo4] type used for title widget with fontSize = 17.0 + typo4, + /// [GFTypographyType.typo5] type used for title widget with fontSize = 15.0 + typo5, + /// [GFTypographyType.typo6] type used for title widget with fontSize = 13.0 + typo6 +} \ No newline at end of file