diff --git a/example/lib/main_temp.dart b/example/lib/main_temp.dart new file mode 100644 index 00000000..faede6b5 --- /dev/null +++ b/example/lib/main_temp.dart @@ -0,0 +1,785 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter/widgets.dart'; +import 'package:getwidget/getwidget.dart'; + +final List imageList = [ + 'https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg', + 'https://cdn.pixabay.com/photo/2017/12/13/00/23/christmas-3015776_960_720.jpg', + 'https://cdn.pixabay.com/photo/2019/12/19/10/55/christmas-market-4705877_960_720.jpg', + 'https://cdn.pixabay.com/photo/2019/12/20/00/03/road-4707345_960_720.jpg', + 'https://cdn.pixabay.com/photo/2019/12/22/04/18/x-mas-4711785__340.jpg', + 'https://cdn.pixabay.com/photo/2016/11/22/07/09/spruce-1848543__340.jpg', + 'https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg', + 'https://cdn.pixabay.com/photo/2017/12/13/00/23/christmas-3015776_960_720.jpg', +]; + +void main() => runApp(MyApp()); + +class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) => MaterialApp( + title: 'GetWidget Example', + theme: ThemeData( + primarySwatch: Colors.blue, + ), + debugShowCheckedModeBanner: false, + home: const MyHomePage(title: 'GetWidget Example'), + ); +} + +class MyHomePage extends StatefulWidget { + const MyHomePage({Key key, this.title}) : super(key: key); + + final String title; + + @override + _MyHomePageState createState() => _MyHomePageState(); +} + +class _MyHomePageState extends State + with SingleTickerProviderStateMixin { + TabController tabController; + final _ratingController = TextEditingController(); + bool check = false; + String searchData; + final TextEditingController _searchController = TextEditingController(); + int groupValue = 0; + + @override + void initState() { + super.initState(); + _ratingController.text = '4.5'; + tabController = TabController(length: 6, initialIndex: 3, vsync: this); + } + + @override + void dispose() { + tabController.dispose(); + super.dispose(); + } + + bool switchValue = true; + bool showToast = false; + + List list = [ + 'Flutter', + 'React', + 'Ionic', + 'Xamarin', + 'Flutter2', + 'React2', + 'Ionic2', + 'Xamarin2', + ]; + + @override + Widget build(BuildContext context) => Scaffold( + appBar: GFAppBar( + backgroundColor: Colors.blueGrey, + title: const Text('UI Kit'), + centerTitle: true, +// title: GFSegmentTabs( +// tabBarColor: Colors.tealAccent, +// tabController: tabController, +// length: 6, +// tabs: const [ +// Text( +// '1', +// ), +// Text( +// '2', +// ), +// Text( +// '3', +// ), +// Text( +// '4', +// ), +// Text( +// '5', +// ), +// Text( +// '6', +// ), +// ], +// indicatorColor: Colors.teal, +// border: Border.all(color: Colors.teal), +// labelColor: GFColors.WHITE, +// unselectedLabelColor: Colors.teal, +// labelStyle: TextStyle( +// fontWeight: FontWeight.w500, +// fontSize: 14, +// ), +// unselectedLabelStyle: TextStyle( +// fontWeight: FontWeight.w400, +// fontSize: 12, +// ), +// ), + ), + body: +// GFTabBarView( +// controller: tabController, +// children: [ +// Container( +// child: const Icon(Icons.directions_bike), +// color: Colors.red, +// ), +// Container( +// child: const Icon(Icons.directions_bus), +// color: Colors.blue, +// ), +// Container( +// child: const Icon(Icons.directions_railway), +// color: Colors.orange, +// ), +// Container( +// child: const Icon(Icons.directions_bike), +// color: Colors.red, +// ), +// Container( +// child: const Icon(Icons.directions_bus), +// color: Colors.blue, +// ), +// Container( +// child: const Icon(Icons.directions_railway), +// color: Colors.orange, +// ), +// ], +// ), + + SingleChildScrollView( + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Container( + height: 10, + ), + + Radio( + value: 0, + groupValue: groupValue, + onChanged: (val) { + print('val $val'); + setState(() { + groupValue = val; + }); + print('radio $groupValue $val'); + }, + ), + + Radio( + value: 1, + groupValue: groupValue, + onChanged: (val) { + print('val $val'); + setState(() { + groupValue = val; + }); + print('radio $groupValue $val'); + }, + ), +// RadioListTile(value: null, groupValue: null, onChanged: null), + + GFRadioButton( + size: GFSize.SMALL, + type: GFRadioButtonType.basic, + radioColor: GFColors.SUCCESS, +// activebgColor: GFColors.ALT, +// inactivebgColor: GFColors.PRIMARY, +// activeBorderColor: GFColors.DANGER, +// inactiveBorderColor: GFColors.DARK, + value: 0, + groupValue: groupValue, + onChanged: (val) { + print('val $val'); +// setState(() { +// groupValue = val; +// }); + print('radio $groupValue $val'); + }, + activeIcon: const Icon( + Icons.check, + size: 20, + color: GFColors.DARK, + ), +// inactiveIcon: const Icon(Icons.close, size: 20, color: GFColors.DARK,), +// custombgColor: GFColors.SUCCESS, + ), + + GFRadioButton( + size: GFSize.SMALL, + type: GFRadioButtonType.basic, + radioColor: GFColors.SUCCESS, +// activebgColor: GFColors.ALT, +// inactivebgColor: GFColors.PRIMARY, +// activeBorderColor: GFColors.DANGER, +// inactiveBorderColor: GFColors.DARK, + value: 1, + groupValue: groupValue, + onChanged: (val) { + print('val $val'); +// setState(() { +// groupValue = val; +// }); + print('radio $groupValue $val'); + }, + activeIcon: const Icon( + Icons.check, + size: 20, + color: GFColors.DARK, + ), +// inactiveIcon: const Icon(Icons.close, size: 20, color: GFColors.DARK,), +// custombgColor: GFColors.SUCCESS, + ), + + GFCheckboxListTile( + color: GFColors.LIGHT, + title: const Text('is checked'), + size: GFSize.LARGE, + activebgColor: GFColors.DANGER, + onChanged: (val) { + setState(() { + check = val; + }); + print('cch $check $val'); + }, + value: check, + inactiveIcon: null, + ), + + GFListTile( + title: Text('title'), + subTitle: Text('subtitle'), + color: check ? GFColors.LIGHT : GFColors.DARK, + onTap: () { + setState(() { + check = !check; + }); + }, + ), + + GFCheckbox( + size: GFSize.SMALL, + activebgColor: GFColors.DANGER, + onChanged: (val) { + setState(() { + check = val; + }); + }, + value: check, + inactiveIcon: null, + ), + + GFCheckbox( + size: GFSize.SMALL, + onChanged: (val) { + setState(() { + check = val; + }); + }, + value: check, + type: GFCheckboxType.circle, + checkColor: GFColors.DANGER, + activebgColor: Colors.green, + inactivebgColor: Colors.white54, + activeBorderColor: Colors.red, + inactiveBorderColor: Colors.black12, + inactiveIcon: Icon(Icons.check_box_outline_blank), + activeIcon: Icon(Icons.check_box), + autofocus: true, + ), + + Checkbox( + value: check, + onChanged: (bool value) { + setState(() { + check = value; + }); + }, + ), + + const Padding( + padding: EdgeInsets.only(left: 15, top: 30), + child: GFTypography( + text: 'Basic Checkbox', + type: GFTypographyType.typo5, + dividerWidth: 25, + dividerColor: Color(0xFF19CA4B), + ), + ), + GFCard( + content: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + GFCheckbox( + size: GFSize.SMALL, + activebgColor: GFColors.DANGER, + onChanged: (val) { + print('on change val $val'); + }, + value: true, + inactiveIcon: null, + ), + GFCheckbox( + activebgColor: GFColors.SECONDARY, + onChanged: (val) { + print('on change val $val'); + }, + value: true, + inactiveIcon: null, + ), + GFCheckbox( + size: GFSize.LARGE, + activebgColor: GFColors.SUCCESS, + onChanged: (val) { + print('on change val $val'); + }, + value: false, + inactiveIcon: null, + ), + ], + ), + ), + const Padding( + padding: EdgeInsets.only(left: 15, top: 30), + child: GFTypography( + text: 'Square Checkbox', + type: GFTypographyType.typo5, + dividerWidth: 25, + dividerColor: Color(0xFF19CA4B), + ), + ), + GFCard( + content: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + GFCheckbox( + size: GFSize.SMALL, + activebgColor: GFColors.ALT, + type: GFCheckboxType.square, + onChanged: (val) { + print('on change val $val'); + }, + value: true, + inactiveIcon: null, + ), + GFCheckbox( + type: GFCheckboxType.square, + activebgColor: GFColors.INFO, + onChanged: (val) { + print('on change val $val'); + }, + value: true, + inactiveIcon: null, + ), + GFCheckbox( + size: GFSize.LARGE, + activebgColor: GFColors.DARK, + type: GFCheckboxType.square, + onChanged: (val) { + print('on change val $val'); + }, + value: true, + inactiveIcon: null, + ), + ], + ), + ), + const Padding( + padding: EdgeInsets.only(left: 15, top: 30), + child: GFTypography( + text: 'Circular Checkbox', + type: GFTypographyType.typo5, + dividerWidth: 25, + dividerColor: Color(0xFF19CA4B), + ), + ), + GFCard( + content: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + GFCheckbox( + size: GFSize.SMALL, + type: GFCheckboxType.circle, + onChanged: (val) { + print('on change val $val'); + }, + value: true, + inactiveIcon: null, + ), + GFCheckbox( + type: GFCheckboxType.circle, + activebgColor: GFColors.WARNING, + onChanged: (val) { + print('on change val $val'); + }, + value: true, + ), + GFCheckbox( + activebgColor: GFColors.SECONDARY, + size: GFSize.LARGE, + type: GFCheckboxType.circle, + onChanged: (val) { + print('on change val $val'); + }, + value: true, + inactiveIcon: null, + ), + ], + ), + ), + const Padding( + padding: EdgeInsets.only(left: 15, top: 30), + child: GFTypography( + text: 'Custom Checkbox', + type: GFTypographyType.typo5, + dividerWidth: 25, + dividerColor: Color(0xFF19CA4B), + ), + ), + GFCard( + content: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + GFCheckbox( + size: GFSize.SMALL, + type: GFCheckboxType.custom, + onChanged: (val) { + print('on change val $val'); + }, + value: true, + inactiveIcon: null, + ), + GFCheckbox( + type: GFCheckboxType.square, + activebgColor: GFColors.INFO, + activeIcon: Icon(Icons.sentiment_satisfied), + onChanged: (val) { + print('on change val $val'); + }, + value: true, + inactiveIcon: Icon(Icons.sentiment_dissatisfied), + ), + GFCheckbox( + size: GFSize.MEDIUM, +// activebgColor: GFColors., + type: GFCheckboxType.custom, + onChanged: (val) { + print('on change val $val'); + }, + value: true, + custombgColor: Colors.purple, + inactiveIcon: null, + ), + ], + ), + ), + + GFImageOverlay( + height: 200.0, + width: 200.0, + image: NetworkImage( + "https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg"), + boxFit: BoxFit.cover, + colorFilter: new ColorFilter.mode( + Colors.black.withOpacity(0.5), + BlendMode.darken, + ), + shape: BoxShape.circle, + ), + + GFCard( + content: GFImageOverlay( + height: 200.0, + width: 304.0, + image: NetworkImage( + "https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg"), + boxFit: BoxFit.cover, + colorFilter: new ColorFilter.mode( + Colors.black.withOpacity(0.5), + BlendMode.darken, + ), + )), + + RaisedButton( + onPressed: () {}, + child: Text('hbjh'), + ), + GFButton( + onPressed: () {}, + child: Text('hbjh'), + ), + GFButtonBar( + crossAxisAlignment: WrapCrossAlignment.center, + alignment: WrapAlignment.spaceEvenly, + children: [ + GFButton( + onPressed: null, + child: Text("dshsc"), + icon: Icon(Icons.access_time), + ), + GFButton( + onPressed: null, + child: Text("dszndc"), + icon: Icon(Icons.arrow_drop_down), + ), + ]), + + GFButtonBadge( + onPressed: null, + text: 'test button', + icon: Icon(Icons.label), + ), + + GFButton( + type: GFButtonType.transparent, + color: GFColors.WARNING, + onPressed: () {}, + text: 'whatsapp', + icon: Icon(Icons.directions_bike), + ), + + GFButton( + blockButton: true, + text: "linkedin", + icon: Icon(Icons.directions_bike), + ), + + GFButtonBadge( +// boxShadow: BoxShadow( +// color: Colors.pink, +// blurRadius: 2.0, +// spreadRadius: 1.0, +// offset: Offset.zero, +// ), +// badgeBoxShadow: true, + onPressed: () {}, +// 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: GFColors.success, + textColor: GFColors.DARK, + shape: GFButtonShape.pills, + type: GFButtonType.outline2x, +// size: GFSize.small, + icon: const GFBadge( + child: Text('12'), +// color: GFColors.DARK, +// shape: GFBadgeShape.circle, +// size: GFSize.small, +// border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), +// borderShape: RoundedRectangleBorder(), +// textColor: GFColors.WHITE, +// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), + ), + ), + + GFButton( +// position: GFPosition.end, +// icon: GFBadge( +// child: Text("12"), +// color: GFColors.DARK, +//// shape: GFBadgeShape.circle, +//// size: GFSize.small, +//// border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), +//// textColor: GFColors.WHITE, +//// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), +// ), + text: 'goodies', + onPressed: () {}, +// textColor: GFColors.danger, +// icon: Icon(Icons.access_alarms), +// hoverColor: GFColors.DARK, + color: GFColors.SECONDARY, +// focusColor: GFColors.danger, +// type: GFButtonType.solid, +// shape: GFButtonShape.pills, +// buttonBoxShadow: true, +// boxShadow: BoxShadow( +// color: Colors.pink, +// blurRadius: 2.0, +// spreadRadius: 1.0, +// offset: Offset.zero, +// ), +// splashColor: GFColors.WARNING, +// highlightColor: GFColors.ALT, +// size: GFSize.large, +// disabledColor: GFColors.DARK, +// disabledTextColor: GFColors.light, +// blockButton: true, +// fullWidthButton: true, +// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), +// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), + ), +// + GFIconButton( + onPressed: null, + icon: Icon( + Icons.ac_unit, + ), +// iconSize: 12.0, + type: GFButtonType.solid, +// shape: GFButtonShape.pills, +// size: GFSize.large, + buttonBoxShadow: true, + color: GFColors.SECONDARY, +// boxShadow: BoxShadow( +// color: Colors.pink, +// blurRadius: 2.0, +// spreadRadius: 1.0, +// offset: Offset.zero, +// ), +// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), +// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), + ), + + RaisedButton( + child: Text('goodiesMaterialButton button '), + onPressed: () {}, +// color: Colors.blueGrey, +// hoverColor: Colors.blueGrey, +// focusColor: Colors.teal, +// splashColor: Colors.amber, +// highlightColor: Colors.cyan, + ), +// + + GFButtonBar( + children: [ + GFButton( + onPressed: null, + child: Text("like"), + icon: Icon(Icons.favorite_border), + type: GFButtonType.transparent, + ), + GFButton( + onPressed: null, + child: Text("comment"), + ), + GFButton( + color: Colors.teal, + onPressed: () {}, + child: Text("share"), + icon: Icon(Icons.share), + type: GFButtonType.outline, + ), + ], + ), + + const GFIconBadge( + child: GFAvatar( + backgroundColor: GFColors.SUCCESS, + ), + counterChild: GFBadge( + text: '12', + shape: GFBadgeShape.circle, + ), + ), + + GFIconButton( + onPressed: () {}, + icon: Icon(Icons.ac_unit), +// iconSize: 12.0, +// type: GFType.solid, +// shape: GFIconButtonShape.pills, +// size: GFSize.large, +// buttonBoxShadow: true, +// color: GFColors.WARNING, +// boxShadow: BoxShadow( +// color: Colors.pink, +// blurRadius: 2.0, +// spreadRadius: 1.0, +// offset: Offset.zero, +// ), +// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), +// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), + ), + + RaisedButton( + onPressed: () {}, + child: Text('fvb'), + ), + + GFButton( + onPressed: () {}, + fullWidthButton: true, + child: Text('fvb'), + ), + + GFButton( + type: GFButtonType.outline, + shape: GFButtonShape.pills, + text: 'goodies', +// icon: Icon(Icons.share), + onPressed: () {}, +// hoverColor: Colors.orange, +// focusColor: Colors.teal, +// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0), +// size: GFSize.large, +// buttonBoxShadow: true, +// blockButton: true, +// fullWidthButton: true, +// color: GFColors.PRIMARY, +// textColor: GFColors.SECONDARY, +// icon: Icon(Icons.error, color: Colors.WHITE,), +// position: GFIconPosition.start, +// boxShadow: BoxShadow( +// color: Colors.pink, +// blurRadius: 2.0, +// spreadRadius: 1.0, +// offset: Offset.zero, +// ), +// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid), +// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero), + ), + ], + ), + ), +// bottomNavigationBar: GFTabBar( +// isScrollable: true, +// controller: tabController, +// length: 6, +// tabs: const [ +// Tab( +// icon: Icon(Icons.directions_bike), +// child: Text( +// 'home', +// ), +// ), +// Tab( +// icon: Icon(Icons.directions_bus), +// child: Text( +// 'cafe rounds', +// ), +// ), +// Tab( +// icon: Icon(Icons.directions_railway), +// child: Text( +// 'walking', +// ), +// ), +// Tab( +// icon: Icon(Icons.directions_bike), +// child: Text( +// 'pillow', +// ), +// ), +// Tab( +// icon: Icon(Icons.directions_bus), +// child: Text( +// 'fire place', +// ), +// ), +// Tab( +// icon: Icon(Icons.directions_railway), +// child: Text( +// 'rain harvest', +// ), +// ), +// ], +// ), + ); +} diff --git a/lib/components/checkbox/gf_checkbox.dart b/lib/components/checkbox/gf_checkbox.dart index 737a3c9a..e19fa9ca 100644 --- a/lib/components/checkbox/gf_checkbox.dart +++ b/lib/components/checkbox/gf_checkbox.dart @@ -2,25 +2,28 @@ import 'package:flutter/material.dart'; import 'package:getwidget/getwidget.dart'; class GFCheckbox extends StatefulWidget { - const GFCheckbox({ - Key key, - this.size = GFSize.MEDIUM, - this.type = GFCheckboxType.basic, - this.checkColor = GFColors.WHITE, - this.activebgColor = GFColors.PRIMARY, - this.inactivebgColor = GFColors.WHITE, - this.activeBorderColor = GFColors.WHITE, - this.inactiveBorderColor = GFColors.DARK, - this.onChanged, - this.value, - this.activeIcon = const Icon( - Icons.check, - size: 20, - color: GFColors.WHITE, - ), - this.inactiveIcon = const Icon(Icons.close), - this.custombgColor = GFColors.SUCCESS, - }) : super(key: key); + const GFCheckbox( + {Key key, + this.size = GFSize.MEDIUM, + this.type = GFCheckboxType.basic, + this.checkColor = GFColors.WHITE, + this.activebgColor = GFColors.PRIMARY, + this.inactivebgColor = GFColors.WHITE, + this.activeBorderColor = GFColors.WHITE, + this.inactiveBorderColor = GFColors.DARK, + this.onChanged, + this.value, + this.activeIcon = const Icon( + Icons.check, + size: 20, + color: GFColors.WHITE, + ), + this.inactiveIcon = const Icon(Icons.close), + this.custombgColor = GFColors.SUCCESS, + this.autofocus = false, + this.focusNode}) + : assert(autofocus != null), + super(key: key); /// type of [GFCheckboxType] which is of four type is basic, sqaure, circular and custom final GFCheckboxType type; @@ -28,7 +31,7 @@ class GFCheckbox extends StatefulWidget { /// type of [double] which is GFSize ie, small, medium and large and can use any double value final double size; - // type pf [Color] used to change the checkcolor when the checkbox is active + /// type pf [Color] used to change the checkcolor when the checkbox is active final Color checkColor; /// type of [Color] used to change the backgroundColor of the active checkbox @@ -58,40 +61,42 @@ class GFCheckbox extends StatefulWidget { /// type of [Color] used to change the background color of the custom active checkbox only final Color custombgColor; + /// {@macro flutter.widgets.Focus.autofocus} + final bool autofocus; + + /// {@macro flutter.widgets.Focus.focusNode} + final FocusNode focusNode; + @override _GFCheckboxState createState() => _GFCheckboxState(); } class _GFCheckboxState extends State { bool get enabled => widget.onChanged != null; - bool isSelected = false; @override void initState() { super.initState(); - isSelected = widget.value ?? false; - } - - void onStatusChange() { - setState(() { - isSelected = !isSelected; - }); - if (widget.onChanged != null) { - widget.onChanged(isSelected); - } } @override Widget build(BuildContext context) => FocusableActionDetector( + focusNode: widget.focusNode, + autofocus: widget.autofocus, enabled: enabled, child: InkWell( - onTap: onStatusChange, + canRequestFocus: enabled, + onTap: widget.onChanged != null + ? () { + widget.onChanged(!widget.value); + } + : null, child: Container( height: widget.size, width: widget.size, decoration: BoxDecoration( color: enabled - ? isSelected + ? widget.value ? widget.type == GFCheckboxType.custom ? Colors.white : widget.activebgColor @@ -103,12 +108,12 @@ class _GFCheckboxState extends State { ? BorderRadius.circular(50) : BorderRadius.zero, border: Border.all( - color: isSelected + color: widget.value ? widget.type == GFCheckboxType.custom ? Colors.black87 : widget.activeBorderColor : widget.inactiveBorderColor)), - child: isSelected + child: widget.value ? widget.type == GFCheckboxType.custom ? Stack( children: [ diff --git a/lib/components/checkboxListTile/gf_checkbox_list_tile.dart b/lib/components/checkboxListTile/gf_checkbox_list_tile.dart deleted file mode 100644 index dc401b48..00000000 --- a/lib/components/checkboxListTile/gf_checkbox_list_tile.dart +++ /dev/null @@ -1,236 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:getwidget/getwidget.dart'; - -class GFCheckboxListTile extends StatefulWidget { - const GFCheckboxListTile({ - Key key, - this.titleText, - this.subtitleText, - this.color, - this.avatar, - this.title, - this.subTitle, - this.description, - this.padding = const EdgeInsets.all(8), - this.margin = const EdgeInsets.all(16), - this.size = GFSize.MEDIUM, - this.type = GFCheckboxType.basic, - this.checkColor = GFColors.WHITE, - this.activebgColor = GFColors.PRIMARY, - this.inactivebgColor = GFColors.WHITE, - this.activeBorderColor = GFColors.WHITE, - this.inactiveBorderColor = GFColors.DARK, - this.onChanged, - this.value, - this.activeIcon = const Icon( - Icons.check, - size: 20, - color: GFColors.WHITE, - ), - this.inactiveIcon = const Icon(Icons.close), - this.custombgColor = GFColors.SUCCESS, - }) : super(key: key); - - ///type of [String] used to pass text, alternative to title property and gets higher priority than title - final String titleText; - - ///type of [String] used to pass text, alternative to subtitle property and gets higher priority than subtitle - final String subtitleText; - - /// The GFListTile's background color. Can be given [Color] or [GFColors] - final Color color; - - /// 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; - - /// The subTitle to display inside the [GFListTile]. see [Text] - final Widget subTitle; - - /// The description to display inside the [GFListTile]. see [Text] - final Widget description; - - /// defines the margin of GFListTile - final EdgeInsets margin; - - /// defines the padding of GFListTile - final EdgeInsets padding; - - /// type of [GFCheckboxType] which is of four type is basic, sqaure, circular and custom - final GFCheckboxType type; - - /// type of [double] which is GFSize ie, small, medium and large and can use any double value - final double size; - - // type pf [Color] used to change the checkcolor when the checkbox is active - final Color checkColor; - - /// type of [Color] used to change the backgroundColor of the active checkbox - final Color activebgColor; - - /// type of [Color] used to change the backgroundColor of the inactive checkbox - final Color inactivebgColor; - - /// type of [Color] used to change the border color of the active checkbox - final Color activeBorderColor; - - /// type of [Color] used to change the border color of the inactive checkbox - final Color inactiveBorderColor; - - /// Called when the user checks or unchecks the checkbox. - final ValueChanged onChanged; - - ///Used to set the current state of the checkbox - final bool value; - - ///type of Widget used to change the checkbox's active icon - final Widget activeIcon; - - ///type of [Widget] used to change the checkbox's inactive icon - final Widget inactiveIcon; - - /// type of [Color] used to change the background color of the custom active checkbox only - final Color custombgColor; - - @override - _GFCheckboxListTileState createState() => _GFCheckboxListTileState(); -} - -class _GFCheckboxListTileState extends State { - bool isSelected = false; - @override - void initState() { - super.initState(); - isSelected = widget.value ?? false; - } - - void onStatusChange() { - setState(() { - isSelected = !isSelected; - }); - if (widget.onChanged != null) { - widget.onChanged(isSelected); - } - } - -// void onStatusChange() { -// if (widget.onChanged != null) { -// setState(() { -// isSelected = !isSelected; -// }); -// switch (widget.value) { -// case false: -// widget.onChanged(true); -// break; -// case true: -//// widget.onChanged(widget.tristate ? null : true); -//// break; -// default: // case null: -// widget.onChanged(isSelected); -// break; -// } -// } -//// } - @override - Widget build(BuildContext context) => InkWell( -// onTap: widget.onChanged != null ? () { widget.onChanged(isSelected); } : null, - onTap: onStatusChange, - -// onTap: (){ -// setState((){ -// isSelected = !isSelected; -// }); -// }, - child: GestureDetector( - child: GFListTile( - avatar: widget.avatar, - titleText: widget.titleText, - subTitle: widget.subTitle, - subtitleText: widget.subtitleText, - description: widget.description, - color: widget.color, - padding: widget.padding, - margin: widget.margin, - title: widget.title, - icon: GFCheckbox( - size: widget.size, - activebgColor: widget.activebgColor, -// onChanged:widget.onChanged, -// value: widget.value, - inactiveIcon: widget.inactiveIcon, - activeBorderColor: widget.activeBorderColor, - inactivebgColor: widget.inactivebgColor, - activeIcon: widget.activeIcon, - inactiveBorderColor: widget.inactiveBorderColor, - custombgColor: widget.custombgColor, - checkColor: widget.checkColor, - type: widget.type, - ), - ), - )); -// InkWell( -// onTap: onStatusChange, -// child: Container( -// constraints: const BoxConstraints(minHeight: 50), -// padding: widget.padding, -// margin: widget.margin, -// decoration: BoxDecoration( -// color: widget.color, -// borderRadius: const BorderRadius.all(Radius.circular(5)), -// ), -// child: Row( -// mainAxisAlignment: MainAxisAlignment.spaceBetween, -// children: [ -// widget.avatar ?? Container(), -// Expanded( -// child: Padding( -// padding: const EdgeInsets.symmetric(horizontal: 10), -// child: Column( -// crossAxisAlignment: CrossAxisAlignment.start, -// children: [ -// widget.titleText != null -// ? Text( -// widget.titleText, -// style: const TextStyle( -// fontSize: 17, -// fontWeight: FontWeight.w500, -// color: GFColors.DARK), -// ) -// : widget.title ?? Container(), -// widget.subtitleText != null -// ? Text( -// widget.subtitleText, -// style: TextStyle( -// fontSize: 14.5, -// color: Colors.black54, -// ), -// ) -// : widget.subTitle ?? Container(), -// widget.description ?? Container() -// ], -// ), -// ), -// ), -//// widget.icon ?? Container(), -// -// GFCheckbox( -// size: widget.size, -// activebgColor: widget.activebgColor, -// onChanged: widget.onChanged, -// value: widget.value, -// inactiveIcon: widget.inactiveIcon, -// activeBorderColor: widget.activeBorderColor, -// inactivebgColor: widget.inactivebgColor, -// activeIcon: widget.activeIcon, -// inactiveBorderColor: widget.inactiveBorderColor, -// custombgColor: widget.custombgColor, -// checkColor: widget.checkColor, -// type: widget.type, -// ), -// ], -// ), -// ), -// ); -} diff --git a/lib/components/checkbox_list_tile/gf_checkbox_list_tile.dart b/lib/components/checkbox_list_tile/gf_checkbox_list_tile.dart new file mode 100644 index 00000000..8fbc0c17 --- /dev/null +++ b/lib/components/checkbox_list_tile/gf_checkbox_list_tile.dart @@ -0,0 +1,146 @@ +import 'package:flutter/material.dart'; +import 'package:getwidget/getwidget.dart'; + +class GFCheckboxListTile extends StatelessWidget { + const GFCheckboxListTile({ + Key key, + @required this.value, + @required this.onChanged, + this.titleText, + this.subtitleText, + this.color, + this.avatar, + this.title, + this.subTitle, + this.description, + this.padding = const EdgeInsets.all(8), + this.margin = const EdgeInsets.all(16), + this.size = GFSize.MEDIUM, + this.type = GFCheckboxType.basic, + this.checkColor = GFColors.WHITE, + this.activebgColor = GFColors.PRIMARY, + this.inactivebgColor = GFColors.WHITE, + this.activeBorderColor = GFColors.WHITE, + this.inactiveBorderColor = GFColors.DARK, + this.activeIcon = const Icon( + Icons.check, + size: 20, + color: GFColors.WHITE, + ), + this.inactiveIcon = const Icon(Icons.close), + this.custombgColor = GFColors.SUCCESS, + this.selected = false, + this.autofocus = false, + }) : assert(value != null), + assert(selected != null), + assert(autofocus != null), + super(key: key); + + ///type of [String] used to pass text, alternative to title property and gets higher priority than title + final String titleText; + + ///type of [String] used to pass text, alternative to subtitle property and gets higher priority than subtitle + final String subtitleText; + + /// The GFListTile's background color. Can be given [Color] or [GFColors] + final Color color; + + /// 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; + + /// The subTitle to display inside the [GFListTile]. see [Text] + final Widget subTitle; + + /// The description to display inside the [GFListTile]. see [Text] + final Widget description; + + /// defines the margin of GFListTile + final EdgeInsets margin; + + /// defines the padding of GFListTile + final EdgeInsets padding; + + /// type of [GFCheckboxType] which is of four type is basic, sqaure, circular and custom + final GFCheckboxType type; + + /// type of [double] which is GFSize ie, small, medium and large and can use any double value + final double size; + + /// type pf [Color] used to change the checkcolor when the checkbox is active + final Color checkColor; + + /// type of [Color] used to change the backgroundColor of the active checkbox + final Color activebgColor; + + /// type of [Color] used to change the backgroundColor of the inactive checkbox + final Color inactivebgColor; + + /// type of [Color] used to change the border color of the active checkbox + final Color activeBorderColor; + + /// type of [Color] used to change the border color of the inactive checkbox + final Color inactiveBorderColor; + + /// Called when the user checks or unchecks the checkbox. + final ValueChanged onChanged; + + ///Used to set the current state of the checkbox + final bool value; + + ///type of Widget used to change the checkbox's active icon + final Widget activeIcon; + + ///type of [Widget] used to change the checkbox's inactive icon + final Widget inactiveIcon; + + /// type of [Color] used to change the background color of the custom active checkbox only + final Color custombgColor; + + /// To have the list tile appear selected when the checkbox is checked, pass the same value to both. + /// Normally, this property is left to its default value, false. + final bool selected; + + /// {@macro flutter.widgets.Focus.autofocus} + final bool autofocus; + + @override + Widget build(BuildContext context) => MergeSemantics( + child: GFListTile( + autofocus: autofocus, + enabled: onChanged != null, + onTap: onChanged != null + ? () { + onChanged(!value); + } + : null, + selected: selected, + avatar: avatar, + titleText: titleText, + subTitle: subTitle, + subtitleText: subtitleText, + description: description, + color: color, + padding: padding, + margin: margin, + title: title, + icon: GFCheckbox( + autofocus: autofocus, + onChanged: onChanged, + value: value, + size: size, + activebgColor: activebgColor, + inactiveIcon: inactiveIcon, + activeBorderColor: activeBorderColor, + inactivebgColor: inactivebgColor, + activeIcon: activeIcon, + inactiveBorderColor: inactiveBorderColor, + custombgColor: custombgColor, + checkColor: checkColor, + type: type, + ), + ), + ); +} diff --git a/lib/components/list_tile/gf_list_tile.dart b/lib/components/list_tile/gf_list_tile.dart index 2c503ae7..0c535fe3 100644 --- a/lib/components/list_tile/gf_list_tile.dart +++ b/lib/components/list_tile/gf_list_tile.dart @@ -16,7 +16,18 @@ class GFListTile extends StatelessWidget { this.icon, this.padding = const EdgeInsets.all(8), this.margin = const EdgeInsets.all(16), - }) : super(key: key); + this.enabled = true, + this.onTap, + this.onLongPress, + this.selected = false, + this.focusColor, + this.hoverColor, + this.focusNode, + this.autofocus = false, + }) : assert(enabled != null), + assert(selected != null), + assert(autofocus != null), + super(key: key); ///type of [String] used to pass text, alternative to title property and gets higher priority than title final String titleText; @@ -48,50 +59,98 @@ class GFListTile extends StatelessWidget { /// defines the padding of GFListTile final EdgeInsets padding; + /// Whether this list tile is interactive. + /// + /// If false, this list tile is styled with the disabled color from the + /// current [Theme] and the [onTap] and [onLongPress] callbacks are + /// inoperative. + final bool enabled; + + /// Called when the user taps this list tile. + /// + /// Inoperative if [enabled] is false. + final GestureTapCallback onTap; + + /// Called when the user long-presses on this list tile. + /// + /// Inoperative if [enabled] is false. + final GestureLongPressCallback onLongPress; + + /// If this tile is also [enabled] then icons and text are rendered with the same color. + /// + /// By default the selected color is the theme's primary color. The selected color + /// can be overridden with a [ListTileTheme]. + final bool selected; + + /// The color for the tile's [Material] when it has the input focus. + final Color focusColor; + + /// The color for the tile's [Material] when a pointer is hovering over it. + final Color hoverColor; + + /// {@macro flutter.widgets.Focus.focusNode} + final FocusNode focusNode; + + /// {@macro flutter.widgets.Focus.autofocus} + final bool autofocus; + @override - Widget build(BuildContext context) => Container( + Widget build(BuildContext context) => InkWell( + onTap: enabled ? onTap : null, + onLongPress: enabled ? onLongPress : null, + canRequestFocus: enabled, + focusNode: focusNode, + focusColor: focusColor, + hoverColor: hoverColor, + autofocus: autofocus, + child: Semantics( + selected: selected, + enabled: enabled, + child: Container( // constraints: const BoxConstraints(minHeight: 50), - padding: padding, - margin: margin, - decoration: BoxDecoration( - color: color, - borderRadius: const BorderRadius.all(Radius.circular(5)), - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - avatar ?? Container(), - Expanded( - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 10), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - titleText != null - ? Text( - titleText, - style: const TextStyle( - fontSize: 17, - fontWeight: FontWeight.w500, - color: GFColors.DARK), - ) - : title ?? Container(), - subtitleText != null - ? Text( - subtitleText, - style: const TextStyle( - fontSize: 14.5, - color: Colors.black54, - ), - ) - : subTitle ?? Container(), - description ?? Container() - ], + padding: padding, + margin: margin, + decoration: BoxDecoration( + color: color, + borderRadius: const BorderRadius.all(Radius.circular(5)), + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + avatar ?? Container(), + Expanded( + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 10), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + titleText != null + ? Text( + titleText, + style: const TextStyle( + fontSize: 17, + fontWeight: FontWeight.w500, + color: GFColors.DARK), + ) + : title ?? Container(), + subtitleText != null + ? Text( + subtitleText, + style: const TextStyle( + fontSize: 14.5, + color: Colors.black54, + ), + ) + : subTitle ?? Container(), + description ?? Container() + ], + ), + ), ), - ), + icon ?? Container(), + ], ), - icon ?? Container(), - ], + ), ), ); } diff --git a/lib/components/radiobutton/gf_radio_button.dart b/lib/components/radio/gf_radio.dart similarity index 80% rename from lib/components/radiobutton/gf_radio_button.dart rename to lib/components/radio/gf_radio.dart index 350215d1..e1ad0e52 100644 --- a/lib/components/radiobutton/gf_radio_button.dart +++ b/lib/components/radio/gf_radio.dart @@ -1,7 +1,7 @@ import 'package:flutter/material.dart'; import 'package:getwidget/getwidget.dart'; -class GFRadioButton extends StatefulWidget { +class GFRadioButton extends StatefulWidget { const GFRadioButton( {Key key, this.size = GFSize.SMALL, @@ -24,8 +24,13 @@ class GFRadioButton extends StatefulWidget { color: GFColors.DARK, ), this.custombgColor = GFColors.SUCCESS, - this.groupValue}) - : super(key: key); + this.groupValue, + this.autofocus = false, + this.focusNode, + this.toggleable = false}) + : assert(autofocus != null), + assert(toggleable != null), + super(key: key); /// type of [GFRadioButtonType] which is of four type is basic, sqaure, circular and custom final GFRadioButtonType type; @@ -51,8 +56,14 @@ class GFRadioButton extends StatefulWidget { /// Called when the user checks or unchecks the checkbox. final ValueChanged onChanged; - ///Used to set the current state of the checkbox - final bool value; +// ///Used to set the current state of the checkbox +// final bool value; +// +// /// The currently selected value for a group of radio buttons. +// /// +// /// This radio button is considered selected if its [value] matches the +// /// [groupValue]. +// final bool groupValue; ///type of Widget used to change the checkbox's active icon final Widget activeIcon; @@ -63,15 +74,30 @@ class GFRadioButton extends StatefulWidget { /// type of [Color] used to change the background color of the custom active checkbox only final Color custombgColor; - final bool groupValue; + /// {@macro flutter.widgets.Focus.focusNode} + final FocusNode focusNode; + + /// {@macro flutter.widgets.Focus.autofocus} + final bool autofocus; + + /// The value represented by this radio button. + final T value; + + /// The currently selected value for a group of radio buttons. + /// + /// This radio button is considered selected if its [value] matches the + /// [groupValue]. + final T groupValue; + + final bool toggleable; @override - _GFRadioButtonState createState() => _GFRadioButtonState(); + _GFRadioButtonState createState() => _GFRadioButtonState(); } -class _GFRadioButtonState extends State { -// - +class _GFRadioButtonState extends State> + with TickerProviderStateMixin { + bool get enabled => widget.onChanged != null; bool isSelected = false; @override @@ -91,6 +117,7 @@ class _GFRadioButtonState extends State { @override Widget build(BuildContext context) => InkWell( + enableFeedback: enabled, onTap: onStatusChange, child: Container( height: widget.size, diff --git a/lib/components/radio_list_tile/gf_radio_list_tile.dart b/lib/components/radio_list_tile/gf_radio_list_tile.dart new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/lib/components/radio_list_tile/gf_radio_list_tile.dart @@ -0,0 +1 @@ + diff --git a/lib/getwidget.dart b/lib/getwidget.dart index ed827ee1..c44d2755 100644 --- a/lib/getwidget.dart +++ b/lib/getwidget.dart @@ -34,8 +34,9 @@ export 'package:getwidget/components/shimmer/gf_shimmer.dart'; export 'package:getwidget/components/loader/gf_loader.dart'; export 'package:getwidget/components/progress_bar/gf_progress_bar.dart'; export 'package:getwidget/components/checkbox/gf_checkbox.dart'; -export 'package:getwidget/components/checkboxListTile/gf_checkbox_list_tile.dart'; -export 'package:getwidget/components/radiobutton/gf_radio_button.dart'; +export 'package:getwidget/components/checkbox_list_tile/gf_checkbox_list_tile.dart'; +export 'package:getwidget/components/radio/gf_radio.dart'; +export 'package:getwidget/components/radio_list_tile/gf_radio_list_tile.dart'; // exports shape, color, position, size, types, direction export 'colors/gf_color.dart';