diff --git a/example/lib/pages/components/button_example.dart b/example/lib/pages/components/button_example.dart index a7a1faab..4728b39f 100644 --- a/example/lib/pages/components/button_example.dart +++ b/example/lib/pages/components/button_example.dart @@ -107,10 +107,20 @@ class _ButtonExampleState extends State { Column(children: inputButtons(ZetaWidgetBorder.rounded)), Text('Sharp Buttons', style: ZetaTextStyles.displayMedium), Column(children: inputButtons(ZetaWidgetBorder.sharp)), - Text('Floating Action Buttons', style: ZetaTextStyles.displayMedium), - Text('Tap buttons to change current FAB: ', style: ZetaTextStyles.bodyMedium), - Wrap(children: fabs.divide(SizedBox.square(dimension: 10)).toList()), - ].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(), + Text('Group Buttons', style: ZetaTextStyles.displayLarge), + Column( + children: groupButtons(ZetaWidgetBorder.rounded), + ), + Text('Floating Action Buttons', + style: ZetaTextStyles.displayMedium), + Text('Tap buttons to change current FAB: ', + style: ZetaTextStyles.bodyMedium), + Wrap( + children: + fabs.divide(SizedBox.square(dimension: 10)).toList()), + ] + .divide(const SizedBox.square(dimension: ZetaSpacing.m)) + .toList(), ), ), Expanded(child: const SizedBox()), @@ -165,4 +175,72 @@ class _ButtonExampleState extends State { ), ).reversed.divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(); } + + List groupButtons(ZetaWidgetBorder) { + return [ + ZetaButtonGroup( + isLarge: true, + rounded: true, + buttons: [ + GroupButton( + label: "Label", + ), + GroupButton( + label: "Label", + ), + ]), + ZetaButtonGroup( + isLarge: true, + rounded: true, + buttons: [ + GroupButton( + label: "Label", + ), + GroupButton.dropdown( + onPressed: () {}, + label: "Label", + ), + ]), + ZetaButtonGroup( + isLarge: true, + rounded: true, + buttons: [ + GroupButton.icon( + icon: ZetaIcons.star_round, + label: "Label", + ), + GroupButton.dropdown( + onPressed: () {}, + label: "Label", + ), + GroupButton.icon( + + icon: ZetaIcons.star_round, + label: "Label", + ), + ], + ), + ZetaButtonGroup( + isLarge: true, + rounded: true, + buttons: [ + GroupButton.icon( + icon: ZetaIcons.star_round, + label: "Label", + onPressed: () {}, + ), + GroupButton.icon( + icon: ZetaIcons.star_round, + label: "Label", + onPressed: () {}, + ), + GroupButton.icon( + icon: ZetaIcons.star_round, + label: "Label", + onPressed: () {}, + ), + ], + ), + ].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(); + } } diff --git a/example/lib/pages/components/progress_example.dart b/example/lib/pages/components/progress_example.dart index 9c0f5ef2..3622cd0d 100644 --- a/example/lib/pages/components/progress_example.dart +++ b/example/lib/pages/components/progress_example.dart @@ -12,6 +12,19 @@ class ProgressExample extends StatefulWidget { } class ProgressExampleState extends State { + MaterialStatesController controller = MaterialStatesController(); + + @override + void initState() { + super.initState(); + } + + @override + void dispose() { + controller.dispose(); + super.dispose(); + } + @override Widget build(BuildContext context) { return ExampleScaffold( diff --git a/example/widgetbook/pages/components/button_widgetbook.dart b/example/widgetbook/pages/components/button_widgetbook.dart index 8d0e6502..6a62ca5d 100644 --- a/example/widgetbook/pages/components/button_widgetbook.dart +++ b/example/widgetbook/pages/components/button_widgetbook.dart @@ -55,7 +55,64 @@ Widget iconButtonUseCase(BuildContext context) => WidgetbookTestWidget( ), ); -Widget floatingActionButtonUseCase(BuildContext context) => WidgetbookTestWidget( +Widget buttonGroupUseCase(BuildContext context) => WidgetbookTestWidget( + widget: ZetaButtonGroup( + isLarge: context.knobs.boolean(label: 'isLarge'), + rounded: context.knobs.boolean(label: 'rounded'), + buttons: [ + GroupButton( + label: context.knobs.string(label: 'button1Title'), + onPressed: + context.knobs.boolean(label: 'button1Dropdown') ? () {} : null, + icon: context.knobs.listOrNull( + label: 'button1Icon', + options: [ + ZetaIcons.star_round, + ], + labelBuilder: (value) { + if (value == ZetaIcons.star_half_round) + return 'ZetaIcons.star_half_round'; + return ''; + }, + ), + ), + GroupButton( + label: context.knobs.string(label: 'button2Title'), + onPressed: + context.knobs.boolean(label: 'button2Dropdown') ? () {} : null, + icon: context.knobs.listOrNull( + label: 'button2Icon', + options: [ + ZetaIcons.star_round, + ], + labelBuilder: (value) { + if (value == ZetaIcons.star_half_round) + return 'ZetaIcons.star_half_round'; + return ''; + }, + ), + ), + GroupButton( + label: context.knobs.string(label: 'button3Title'), + onPressed: + context.knobs.boolean(label: 'button3Dropdown') ? () {} : null, + icon: context.knobs.listOrNull( + label: 'button3Icon', + options: [ + ZetaIcons.star_round, + ], + labelBuilder: (value) { + if (value == ZetaIcons.star_half_round) + return 'ZetaIcons.star_half_round'; + return ''; + }, + ), + ) + ], + )); + +Widget floatingActionButtonUseCase(BuildContext context) => + WidgetbookTestWidget( widget: Padding(padding: EdgeInsets.all(20), child: FabWidget(context)), ); diff --git a/lib/src/components/buttons/button_group.dart b/lib/src/components/buttons/button_group.dart index 232ce60d..d60c27be 100644 --- a/lib/src/components/buttons/button_group.dart +++ b/lib/src/components/buttons/button_group.dart @@ -48,8 +48,7 @@ class ZetaButtonGroup extends StatelessWidget { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty('isLarge', isLarge)) - ..add(DiagnosticsProperty('rounded', rounded)) - ; + ..add(DiagnosticsProperty('rounded', rounded)); } } @@ -61,13 +60,13 @@ class GroupButton extends StatefulWidget { super.key, this.label, this.icon, - this.onPress, + this.onPressed, }); /// Constructs dropdown group button GroupButton.dropdown({ super.key, - required this.onPress, + required this.onPressed, this.icon, this.label, }); @@ -76,7 +75,7 @@ class GroupButton extends StatefulWidget { GroupButton.icon({ super.key, required this.icon, - this.onPress, + this.onPressed, this.label, }); @@ -87,7 +86,7 @@ class GroupButton extends StatefulWidget { final IconData? icon; /// Function for when [GroupButton] is clicked. - final VoidCallback? onPress; + final VoidCallback? onPressed; ///If [GroupButton] is large bool _isLarge = false; @@ -110,9 +109,7 @@ class GroupButton extends StatefulWidget { key: key, label: label, icon: icon, - onPress: onPress, - // isFinal: isFinal ?? this.isFinal, - // isInitial: isInitial ?? this.isInitial, + onPressed: onPressed, ); } @@ -122,7 +119,7 @@ class GroupButton extends StatefulWidget { properties ..add(StringProperty('Label', label)) ..add(DiagnosticsProperty('icon', icon)) - ..add(ObjectFlagProperty.has('onPress', onPress)); + ..add(ObjectFlagProperty.has('onPressed', onPressed)); } } @@ -137,11 +134,13 @@ class _GroupButtonState extends State { controller = MaterialStatesController(); } - void onPress() { - widget.onPress!(); + void onPressed() { + if(widget.onPressed != null){ + widget.onPressed?.call(); setState(() { selected = !selected; }); + } } @override @@ -167,7 +166,7 @@ class _GroupButtonState extends State { padding: EdgeInsets.zero, child: FilledButton( statesController: controller, - onPressed: onPress, + onPressed: onPressed, style: getStyle(borderType, colors), child: SelectionContainer.disabled( child: Row( @@ -175,7 +174,7 @@ class _GroupButtonState extends State { children: [ if (widget.icon != null) Icon(widget.icon), Text(widget.label!), - if (widget.onPress != null) + if (widget.onPressed != null) const Icon(ZetaIcons.expand_more_round), ], ).paddingAll(_padding), @@ -191,6 +190,7 @@ class _GroupButtonState extends State { ZetaColors colors, bool finalButton, ) { + if(selected) return BorderSide(color: colors.black); if (states.contains(MaterialState.disabled)) { return BorderSide(color: colors.cool.shade40); } @@ -219,13 +219,11 @@ class _GroupButtonState extends State { } ButtonStyle getStyle(ZetaWidgetBorder borderType, ZetaColors colors) { - final ZetaColorSwatch color = - selected ? colors.cool : ZetaColorSwatch.fromColor(colors.black); - return ButtonStyle( shape: MaterialStateProperty.all( RoundedRectangleBorder( - borderRadius: borderType.radius, + borderRadius: _getRadius(borderType), + ), ), backgroundColor: MaterialStateProperty.resolveWith((states) { @@ -246,7 +244,7 @@ class _GroupButtonState extends State { if (states.contains(MaterialState.disabled)) { return colors.textDisabled; } - if (selected) return color.onColor; + if (selected) return colors.black.onColor; return colors.textDefault; }), elevation: const MaterialStatePropertyAll(0), diff --git a/lib/src/components/buttons/button_style.dart b/lib/src/components/buttons/button_style.dart index 8a3ed9fb..26662d9b 100644 --- a/lib/src/components/buttons/button_style.dart +++ b/lib/src/components/buttons/button_style.dart @@ -55,7 +55,8 @@ extension ButtonFunctions on ZetaButtonType { } /// Returns if button has border - bool get border => this == ZetaButtonType.outline || this == ZetaButtonType.outlineSubtle; + bool get border => + this == ZetaButtonType.outline || this == ZetaButtonType.outlineSubtle; ///Returns if button is solid bool get solid => index < 4; @@ -85,8 +86,9 @@ ButtonStyle buttonStyle( ZetaButtonType type, Color? backgroundColor, ) { - final ZetaColorSwatch color = - backgroundColor != null ? ZetaColorSwatch.fromColor(backgroundColor) : type.color(colors); + final ZetaColorSwatch color = backgroundColor != null + ? ZetaColorSwatch.fromColor(backgroundColor) + : type.color(colors); final bool isSolid = type.solid || backgroundColor != null; @@ -129,7 +131,8 @@ ButtonStyle buttonStyle( } }, ), - overlayColor: MaterialStateProperty.resolveWith((Set states) { + overlayColor: + MaterialStateProperty.resolveWith((Set states) { return null; }), side: MaterialStateProperty.resolveWith((Set states) { @@ -142,7 +145,9 @@ ButtonStyle buttonStyle( } if (type.border) { return BorderSide( - color: type == ZetaButtonType.outline ? colors.primary.border : colors.borderDefault, + color: type == ZetaButtonType.outline + ? colors.primary.border + : colors.borderDefault, ); } diff --git a/lib/src/components/progress/progress_bar.dart b/lib/src/components/progress/progress_bar.dart index 27774711..939e9fe2 100644 --- a/lib/src/components/progress/progress_bar.dart +++ b/lib/src/components/progress/progress_bar.dart @@ -148,9 +148,7 @@ class _ZetaProgressBarState extends ZetaProgressState { width: _weight, height: _weight, decoration: BoxDecoration( - color: colors.surfaceDisabled, - borderRadius: ZetaRadius.rounded, - ), + color: colors.surfaceDisabled, borderRadius: ZetaRadius.rounded,), ), ], ); diff --git a/lib/zeta_flutter.dart b/lib/zeta_flutter.dart index b7385da5..7600bc88 100644 --- a/lib/zeta_flutter.dart +++ b/lib/zeta_flutter.dart @@ -15,6 +15,7 @@ export 'src/components/banners/system_banner.dart'; export 'src/components/bottom sheets/bottom_sheet.dart'; export 'src/components/bottom sheets/menu_items.dart'; export 'src/components/buttons/button.dart'; +export 'src/components/buttons/button_group.dart'; export 'src/components/buttons/button_style.dart'; export 'src/components/buttons/fab.dart'; export 'src/components/buttons/icon_button.dart';