Skip to content

Commit 085dc17

Browse files
ahmed-osman3ahmed-osman3
authored
feat : Button Groups (ZebraDevs#34)
* Initial version, no border customization * Add button groups * Resolve issues * Use token color --------- Authored-by: Osman <[email protected]>
1 parent 6c6adaf commit 085dc17

File tree

7 files changed

+182
-32
lines changed

7 files changed

+182
-32
lines changed

‎example/lib/pages/components/button_example.dart

Lines changed: 82 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -107,10 +107,20 @@ class _ButtonExampleState extends State<ButtonExample> {
107107
Column(children: inputButtons(ZetaWidgetBorder.rounded)),
108108
Text('Sharp Buttons', style: ZetaTextStyles.displayMedium),
109109
Column(children: inputButtons(ZetaWidgetBorder.sharp)),
110-
Text('Floating Action Buttons', style: ZetaTextStyles.displayMedium),
111-
Text('Tap buttons to change current FAB: ', style: ZetaTextStyles.bodyMedium),
112-
Wrap(children: fabs.divide(SizedBox.square(dimension: 10)).toList()),
113-
].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(),
110+
Text('Group Buttons', style: ZetaTextStyles.displayLarge),
111+
Column(
112+
children: groupButtons(ZetaWidgetBorder.rounded),
113+
),
114+
Text('Floating Action Buttons',
115+
style: ZetaTextStyles.displayMedium),
116+
Text('Tap buttons to change current FAB: ',
117+
style: ZetaTextStyles.bodyMedium),
118+
Wrap(
119+
children:
120+
fabs.divide(SizedBox.square(dimension: 10)).toList()),
121+
]
122+
.divide(const SizedBox.square(dimension: ZetaSpacing.m))
123+
.toList(),
114124
),
115125
),
116126
Expanded(child: const SizedBox()),
@@ -165,4 +175,72 @@ class _ButtonExampleState extends State<ButtonExample> {
165175
),
166176
).reversed.divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList();
167177
}
178+
179+
List<Widget> groupButtons(ZetaWidgetBorder) {
180+
return [
181+
ZetaButtonGroup(
182+
isLarge: true,
183+
rounded: true,
184+
buttons: [
185+
GroupButton(
186+
label: "Label",
187+
),
188+
GroupButton(
189+
label: "Label",
190+
),
191+
]),
192+
ZetaButtonGroup(
193+
isLarge: true,
194+
rounded: true,
195+
buttons: [
196+
GroupButton(
197+
label: "Label",
198+
),
199+
GroupButton.dropdown(
200+
onPressed: () {},
201+
label: "Label",
202+
),
203+
]),
204+
ZetaButtonGroup(
205+
isLarge: true,
206+
rounded: true,
207+
buttons: [
208+
GroupButton.icon(
209+
icon: ZetaIcons.star_round,
210+
label: "Label",
211+
),
212+
GroupButton.dropdown(
213+
onPressed: () {},
214+
label: "Label",
215+
),
216+
GroupButton.icon(
217+
218+
icon: ZetaIcons.star_round,
219+
label: "Label",
220+
),
221+
],
222+
),
223+
ZetaButtonGroup(
224+
isLarge: true,
225+
rounded: true,
226+
buttons: [
227+
GroupButton.icon(
228+
icon: ZetaIcons.star_round,
229+
label: "Label",
230+
onPressed: () {},
231+
),
232+
GroupButton.icon(
233+
icon: ZetaIcons.star_round,
234+
label: "Label",
235+
onPressed: () {},
236+
),
237+
GroupButton.icon(
238+
icon: ZetaIcons.star_round,
239+
label: "Label",
240+
onPressed: () {},
241+
),
242+
],
243+
),
244+
].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList();
245+
}
168246
}

‎example/lib/pages/components/progress_example.dart

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,19 @@ class ProgressExample extends StatefulWidget {
1212
}
1313

1414
class ProgressExampleState extends State<ProgressExample> {
15+
MaterialStatesController controller = MaterialStatesController();
16+
17+
@override
18+
void initState() {
19+
super.initState();
20+
}
21+
22+
@override
23+
void dispose() {
24+
controller.dispose();
25+
super.dispose();
26+
}
27+
1528
@override
1629
Widget build(BuildContext context) {
1730
return ExampleScaffold(

‎example/widgetbook/pages/components/button_widgetbook.dart

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,64 @@ Widget iconButtonUseCase(BuildContext context) => WidgetbookTestWidget(
5555
),
5656
);
5757

58-
Widget floatingActionButtonUseCase(BuildContext context) => WidgetbookTestWidget(
58+
Widget buttonGroupUseCase(BuildContext context) => WidgetbookTestWidget(
59+
widget: ZetaButtonGroup(
60+
isLarge: context.knobs.boolean(label: 'isLarge'),
61+
rounded: context.knobs.boolean(label: 'rounded'),
62+
buttons: [
63+
GroupButton(
64+
label: context.knobs.string(label: 'button1Title'),
65+
onPressed:
66+
context.knobs.boolean(label: 'button1Dropdown') ? () {} : null,
67+
icon: context.knobs.listOrNull(
68+
label: 'button1Icon',
69+
options: [
70+
ZetaIcons.star_round,
71+
],
72+
labelBuilder: (value) {
73+
if (value == ZetaIcons.star_half_round)
74+
return 'ZetaIcons.star_half_round';
75+
return '';
76+
},
77+
),
78+
),
79+
GroupButton(
80+
label: context.knobs.string(label: 'button2Title'),
81+
onPressed:
82+
context.knobs.boolean(label: 'button2Dropdown') ? () {} : null,
83+
icon: context.knobs.listOrNull(
84+
label: 'button2Icon',
85+
options: [
86+
ZetaIcons.star_round,
87+
],
88+
labelBuilder: (value) {
89+
if (value == ZetaIcons.star_half_round)
90+
return 'ZetaIcons.star_half_round';
91+
return '';
92+
},
93+
),
94+
),
95+
GroupButton(
96+
label: context.knobs.string(label: 'button3Title'),
97+
onPressed:
98+
context.knobs.boolean(label: 'button3Dropdown') ? () {} : null,
99+
icon: context.knobs.listOrNull(
100+
label: 'button3Icon',
101+
options: [
102+
ZetaIcons.star_round,
103+
],
104+
labelBuilder: (value) {
105+
if (value == ZetaIcons.star_half_round)
106+
return 'ZetaIcons.star_half_round';
107+
return '';
108+
},
109+
),
110+
)
111+
],
112+
));
113+
114+
Widget floatingActionButtonUseCase(BuildContext context) =>
115+
WidgetbookTestWidget(
59116
widget: Padding(padding: EdgeInsets.all(20), child: FabWidget(context)),
60117
);
61118

‎lib/src/components/buttons/button_group.dart

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,7 @@ class ZetaButtonGroup extends StatelessWidget {
4848
super.debugFillProperties(properties);
4949
properties
5050
..add(DiagnosticsProperty<bool>('isLarge', isLarge))
51-
..add(DiagnosticsProperty<bool>('rounded', rounded))
52-
;
51+
..add(DiagnosticsProperty<bool>('rounded', rounded));
5352
}
5453
}
5554

@@ -61,13 +60,13 @@ class GroupButton extends StatefulWidget {
6160
super.key,
6261
this.label,
6362
this.icon,
64-
this.onPress,
63+
this.onPressed,
6564
});
6665

6766
/// Constructs dropdown group button
6867
GroupButton.dropdown({
6968
super.key,
70-
required this.onPress,
69+
required this.onPressed,
7170
this.icon,
7271
this.label,
7372
});
@@ -76,7 +75,7 @@ class GroupButton extends StatefulWidget {
7675
GroupButton.icon({
7776
super.key,
7877
required this.icon,
79-
this.onPress,
78+
this.onPressed,
8079
this.label,
8180
});
8281

@@ -87,7 +86,7 @@ class GroupButton extends StatefulWidget {
8786
final IconData? icon;
8887

8988
/// Function for when [GroupButton] is clicked.
90-
final VoidCallback? onPress;
89+
final VoidCallback? onPressed;
9190

9291
///If [GroupButton] is large
9392
bool _isLarge = false;
@@ -110,9 +109,7 @@ class GroupButton extends StatefulWidget {
110109
key: key,
111110
label: label,
112111
icon: icon,
113-
onPress: onPress,
114-
// isFinal: isFinal ?? this.isFinal,
115-
// isInitial: isInitial ?? this.isInitial,
112+
onPressed: onPressed,
116113
);
117114
}
118115

@@ -122,7 +119,7 @@ class GroupButton extends StatefulWidget {
122119
properties
123120
..add(StringProperty('Label', label))
124121
..add(DiagnosticsProperty<IconData?>('icon', icon))
125-
..add(ObjectFlagProperty<VoidCallback?>.has('onPress', onPress));
122+
..add(ObjectFlagProperty<VoidCallback?>.has('onPressed', onPressed));
126123
}
127124
}
128125

@@ -137,11 +134,13 @@ class _GroupButtonState extends State<GroupButton> {
137134
controller = MaterialStatesController();
138135
}
139136

140-
void onPress() {
141-
widget.onPress!();
137+
void onPressed() {
138+
if(widget.onPressed != null){
139+
widget.onPressed?.call();
142140
setState(() {
143141
selected = !selected;
144142
});
143+
}
145144
}
146145

147146
@override
@@ -167,15 +166,15 @@ class _GroupButtonState extends State<GroupButton> {
167166
padding: EdgeInsets.zero,
168167
child: FilledButton(
169168
statesController: controller,
170-
onPressed: onPress,
169+
onPressed: onPressed,
171170
style: getStyle(borderType, colors),
172171
child: SelectionContainer.disabled(
173172
child: Row(
174173
mainAxisSize: MainAxisSize.min,
175174
children: [
176175
if (widget.icon != null) Icon(widget.icon),
177176
Text(widget.label!),
178-
if (widget.onPress != null)
177+
if (widget.onPressed != null)
179178
const Icon(ZetaIcons.expand_more_round),
180179
],
181180
).paddingAll(_padding),
@@ -191,6 +190,7 @@ class _GroupButtonState extends State<GroupButton> {
191190
ZetaColors colors,
192191
bool finalButton,
193192
) {
193+
if(selected) return BorderSide(color: colors.black);
194194
if (states.contains(MaterialState.disabled)) {
195195
return BorderSide(color: colors.cool.shade40);
196196
}
@@ -219,13 +219,11 @@ class _GroupButtonState extends State<GroupButton> {
219219
}
220220

221221
ButtonStyle getStyle(ZetaWidgetBorder borderType, ZetaColors colors) {
222-
final ZetaColorSwatch color =
223-
selected ? colors.cool : ZetaColorSwatch.fromColor(colors.black);
224-
225222
return ButtonStyle(
226223
shape: MaterialStateProperty.all(
227224
RoundedRectangleBorder(
228-
borderRadius: borderType.radius,
225+
borderRadius: _getRadius(borderType),
226+
229227
),
230228
),
231229
backgroundColor: MaterialStateProperty.resolveWith<Color?>((states) {
@@ -246,7 +244,7 @@ class _GroupButtonState extends State<GroupButton> {
246244
if (states.contains(MaterialState.disabled)) {
247245
return colors.textDisabled;
248246
}
249-
if (selected) return color.onColor;
247+
if (selected) return colors.black.onColor;
250248
return colors.textDefault;
251249
}),
252250
elevation: const MaterialStatePropertyAll(0),

‎lib/src/components/buttons/button_style.dart

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,8 @@ extension ButtonFunctions on ZetaButtonType {
5555
}
5656

5757
/// Returns if button has border
58-
bool get border => this == ZetaButtonType.outline || this == ZetaButtonType.outlineSubtle;
58+
bool get border =>
59+
this == ZetaButtonType.outline || this == ZetaButtonType.outlineSubtle;
5960

6061
///Returns if button is solid
6162
bool get solid => index < 4;
@@ -85,8 +86,9 @@ ButtonStyle buttonStyle(
8586
ZetaButtonType type,
8687
Color? backgroundColor,
8788
) {
88-
final ZetaColorSwatch color =
89-
backgroundColor != null ? ZetaColorSwatch.fromColor(backgroundColor) : type.color(colors);
89+
final ZetaColorSwatch color = backgroundColor != null
90+
? ZetaColorSwatch.fromColor(backgroundColor)
91+
: type.color(colors);
9092

9193
final bool isSolid = type.solid || backgroundColor != null;
9294

@@ -129,7 +131,8 @@ ButtonStyle buttonStyle(
129131
}
130132
},
131133
),
132-
overlayColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
134+
overlayColor:
135+
MaterialStateProperty.resolveWith((Set<MaterialState> states) {
133136
return null;
134137
}),
135138
side: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
@@ -142,7 +145,9 @@ ButtonStyle buttonStyle(
142145
}
143146
if (type.border) {
144147
return BorderSide(
145-
color: type == ZetaButtonType.outline ? colors.primary.border : colors.borderDefault,
148+
color: type == ZetaButtonType.outline
149+
? colors.primary.border
150+
: colors.borderDefault,
146151
);
147152
}
148153

‎lib/src/components/progress/progress_bar.dart

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -148,9 +148,7 @@ class _ZetaProgressBarState extends ZetaProgressState<ZetaProgressBar> {
148148
width: _weight,
149149
height: _weight,
150150
decoration: BoxDecoration(
151-
color: colors.surfaceDisabled,
152-
borderRadius: ZetaRadius.rounded,
153-
),
151+
color: colors.surfaceDisabled, borderRadius: ZetaRadius.rounded,),
154152
),
155153
],
156154
);

‎lib/zeta_flutter.dart

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export 'src/components/banners/system_banner.dart';
1515
export 'src/components/bottom sheets/bottom_sheet.dart';
1616
export 'src/components/bottom sheets/menu_items.dart';
1717
export 'src/components/buttons/button.dart';
18+
export 'src/components/buttons/button_group.dart';
1819
export 'src/components/buttons/button_style.dart';
1920
export 'src/components/buttons/fab.dart';
2021
export 'src/components/buttons/icon_button.dart';

0 commit comments

Comments
 (0)