Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(UX-881): Range Selector #217

Merged
merged 5 commits into from
Nov 22, 2024
Merged

feat(UX-881): Range Selector #217

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
001ef48
feat: Created Range Selector
DE7924 Nov 19, 2024
a61045c
test: testing range selector
DE7924 Nov 20, 2024
172985e
test: created interaction tests
DE7924 Nov 21, 2024
c38cd28
test: adjusted golden tolerence
DE7924 Nov 21, 2024
9b356bc
fix: removed rounded from widgetbook
DE7924 Nov 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions example/lib/home.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import 'package:zeta_example/pages/components/navigation_rail_example.dart';
import 'package:zeta_example/pages/components/notification_list_example.dart';
import 'package:zeta_example/pages/components/phone_input_example.dart';
import 'package:zeta_example/pages/components/radio_example.dart';
import 'package:zeta_example/pages/components/range_selector_example.dart';
import 'package:zeta_example/pages/components/screen_header_bar_example.dart';
import 'package:zeta_example/pages/components/select_input_example.dart';

Expand Down Expand Up @@ -89,6 +90,7 @@ final List<Component> components = [
Component(TabsExample.name, (context) => const TabsExample()),
Component(DialPadExample.name, (context) => const DialPadExample()),
Component(RadioButtonExample.name, (context) => const RadioButtonExample()),
Component(RangeSelectorExample.name, (context) => const RangeSelectorExample()),
Component(SwitchExample.name, (context) => const SwitchExample()),
Component(SliderExample.name, (context) => const SliderExample()),
Component(DateInputExample.name, (context) => const DateInputExample()),
Expand Down
203 changes: 203 additions & 0 deletions example/lib/pages/components/range_selector_example.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,203 @@
import 'package:flutter/material.dart';
import 'package:zeta_example/widgets.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

class RangeSelectorExample extends StatefulWidget {
static const String name = 'RangeSelector';

const RangeSelectorExample({super.key});

@override
State<RangeSelectorExample> createState() => _RangeSelectorExampleState();
}

class _RangeSelectorExampleState extends State<RangeSelectorExample> {
double value = 0.5;

@override
Widget build(BuildContext context) {
return ExampleScaffold(
name: RangeSelectorExample.name,
child: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Range Slider - Rounded - Continuous', style: ZetaTextStyles.bodyLarge),
ZetaRangeSelector(
onChange: (value) {
print(value.start);
print(value.end);
},
initialValues: RangeValues(20, 80),
min: 0,
max: 100,
showValues: false,
),
].gap(12),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Range Slider - Rounded - Stepped', style: ZetaTextStyles.bodyLarge),
ZetaRangeSelector(
onChange: (value) {},
initialValues: RangeValues(20, 80),
min: 0,
max: 100,
showValues: false,
divisions: 10,
),
].gap(12),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Range Slider - Rounded - Disabled', style: ZetaTextStyles.bodyLarge),
ZetaRangeSelector(
initialValues: RangeValues(20, 80),
min: 0,
max: 100,
showValues: false,
),
].gap(12),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Range Slider - Sharp - Continuous', style: ZetaTextStyles.bodyLarge),
ZetaRangeSelector(
onChange: (value) {},
initialValues: RangeValues(20, 80),
min: 0,
max: 100,
showValues: false,
rounded: false,
),
].gap(12),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Range Slider - Sharp - Stepped', style: ZetaTextStyles.bodyLarge),
ZetaRangeSelector(
onChange: (value) {},
initialValues: RangeValues(20, 80),
min: 0,
max: 100,
showValues: false,
divisions: 10,
rounded: false,
),
].gap(12),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Range Slider - Sharp - Disabled', style: ZetaTextStyles.bodyLarge),
ZetaRangeSelector(
initialValues: RangeValues(20, 80),
min: 0,
max: 100,
showValues: false,
rounded: false,
),
].gap(12),
),
SizedBox(
height: 32,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Range Selector - Rounded - Continuous', style: ZetaTextStyles.bodyLarge),
ZetaRangeSelector(
onChange: (value) {},
initialValues: RangeValues(20, 80),
min: 0,
max: 100,
label: 'Label',
semanticLabel: 'Hello World!',
),
].gap(12),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Range Selector - Rounded - Stepped', style: ZetaTextStyles.bodyLarge),
ZetaRangeSelector(
onChange: (value) {},
initialValues: RangeValues(20, 80),
min: 0,
max: 100,
label: 'Label',
divisions: 10,
),
].gap(12),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Range Selector - Rounded - Disabled', style: ZetaTextStyles.bodyLarge),
ZetaRangeSelector(
initialValues: RangeValues(20, 80),
min: 0,
max: 100,
label: 'Label',
divisions: 10,
),
].gap(12),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Range Selector - Sharp - Continuous', style: ZetaTextStyles.bodyLarge),
ZetaRangeSelector(
onChange: (value) {},
initialValues: RangeValues(20, 80),
min: 0,
max: 100,
label: 'Label',
rounded: false,
),
].gap(12),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Range Selector - Sharp - Stepped', style: ZetaTextStyles.bodyLarge),
ZetaRangeSelector(
onChange: (value) {},
initialValues: RangeValues(20, 80),
min: 0,
max: 100,
label: 'Label',
rounded: false,
divisions: 10,
),
].gap(12),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Range Selector - Sharp - Disabled', style: ZetaTextStyles.bodyLarge),
ZetaRangeSelector(
initialValues: RangeValues(20, 80),
min: 0,
max: 100,
label: 'Label',
rounded: false,
divisions: 10,
),
].gap(12),
),
].gap(32),
).paddingVertical(32),
),
),
);
}
}
2 changes: 2 additions & 0 deletions example/widgetbook/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import 'pages/components/password_input_widgetbook.dart';
import 'pages/components/phone_input_widgetbook.dart';
import 'pages/components/progress_widgetbook.dart';
import 'pages/components/radio_widgetbook.dart';
import 'pages/components/range_selector_widgetbook.dart';
import 'pages/components/screen_header_bar_widgetbook.dart';
import 'pages/components/search_bar_widgetbook.dart';
import 'pages/components/segmented_control_widgetbook.dart';
Expand Down Expand Up @@ -212,6 +213,7 @@ class _HotReloadState extends State<HotReload> {
WidgetbookUseCase(name: 'Segmented Control', builder: (context) => segmentedControlUseCase(context)),
WidgetbookUseCase(name: 'Select Input', builder: (context) => selectInputUseCase(context)),
WidgetbookUseCase(name: 'Slider', builder: (context) => sliderUseCase(context)),
WidgetbookUseCase(name: 'Range Selector', builder: (context) => rangeSelectorUseCase(context)),
WidgetbookUseCase(name: 'Snack Bar', builder: (context) => snackBarUseCase(context)),
WidgetbookUseCase(name: 'Stepper Input', builder: (context) => stepperInputUseCase(context)),
WidgetbookUseCase(name: 'Stepper', builder: (context) => stepperUseCase(context)),
Expand Down
35 changes: 35 additions & 0 deletions example/widgetbook/pages/components/range_selector_widgetbook.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

import '../../utils/scaffold.dart';
import '../../utils/utils.dart';

Widget rangeSelectorUseCase(BuildContext context) {
return WidgetbookScaffold(
builder: (context, _) => RangeSelectorExample(context),
);
}

class RangeSelectorExample extends StatelessWidget {
RangeSelectorExample(this.context);
final BuildContext context;

@override
Widget build(BuildContext _) {
return Padding(
padding: const EdgeInsets.all(16),
child: ZetaRangeSelector(
label: context.knobs.string(label: 'Label', initialValue: 'Range Selector'),
divisions: context.knobs.intOrNull.input(label: 'Divisions', initialValue: null),
showValues: context.knobs.boolean(label: 'Show Values', initialValue: true),
onChange: disabledKnob(context) ? null : (value) {},
largeSliderThumbs: context.knobs.boolean(label: 'Large Slider Thumbs', initialValue: false),
rounded: context.knobs.booleanOrNull(label: 'Rounded', initialValue: true),
DE7924 marked this conversation as resolved.
Show resolved Hide resolved
initialValues: context.knobs.range(label: 'Initial Range', initialValue: RangeValues(20, 80)),
min: context.knobs.double.input(label: 'Min', initialValue: 0),
max: context.knobs.double.input(label: 'Max', initialValue: 100),
),
);
}
}
38 changes: 38 additions & 0 deletions example/widgetbook/utils/utils.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,41 @@ bool disabledKnob(BuildContext context) => context.knobs.boolean(
label: 'Disabled',
initialValue: false,
);

class RangeKnob extends Knob<RangeValues> {
RangeKnob({
required super.label,
required super.initialValue,
});
@override
List<Field> get fields => [
DoubleInputField(
name: 'min-$label',
initialValue: initialValue.start,
),
DoubleInputField(
name: 'max-$label',
initialValue: initialValue.end,
),
];
@override
RangeValues valueFromQueryGroup(Map<String, String> group) {
return RangeValues(
valueOf('min-$label', group)!,
valueOf('max-$label', group)!,
);
}
}

extension RangeKnobBuilder on KnobsBuilder {
RangeValues range({
required String label,
RangeValues initialValue = const RangeValues(0, 10),
}) =>
onKnobAdded(
RangeKnob(
label: label,
initialValue: initialValue,
),
)!;
}
1 change: 1 addition & 0 deletions lib/src/components/components.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export 'phone_input/phone_input.dart';
export 'progress/progress_bar.dart';
export 'progress/progress_circle.dart';
export 'radio/radio.dart';
export 'range_selector/range_selector.dart';
export 'screen_header_bar/screen_header_bar.dart';
export 'search_bar/search_bar.dart';
export 'segmented_control/segmented_control.dart';
Expand Down
Loading