Skip to content

Commit

Permalink
feat: Select input (#35)
Browse files Browse the repository at this point in the history
* create ZetaSelectInput

* add extra parameters; improve

* leading icon; error handling in example

* _MenuPosition

* widgetbook

* restore all menu items on each open

* fix setState

* initialize _menuSize with Size.zero
  • Loading branch information
atanasyordanov21 authored and thelukewalton committed May 2, 2024
1 parent 6619de3 commit 07ddba1
Show file tree
Hide file tree
Showing 6 changed files with 866 additions and 0 deletions.
2 changes: 2 additions & 0 deletions example/lib/home.dart
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import 'package:zeta_example/pages/components/navigation_bar_example.dart';
import 'package:zeta_example/pages/components/navigation_rail_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/select_input_example.dart';
import 'package:zeta_example/pages/components/search_bar_example.dart';
import 'package:zeta_example/pages/components/segmented_control_example.dart';
import 'package:zeta_example/pages/components/stepper_example.dart';
Expand Down Expand Up @@ -74,6 +75,7 @@ final List<Component> components = [
Component(SearchBarExample.name, (context) => const SearchBarExample()),
Component(TooltipExample.name, (context) => const TooltipExample()),
Component(NavigationRailExample.name, (context) => const NavigationRailExample()),
Component(SelectInputExample.name, (context) => const SelectInputExample()),
];

final List<Component> theme = [
Expand Down
113 changes: 113 additions & 0 deletions example/lib/pages/components/select_input_example.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
import 'package:flutter/material.dart';
import 'package:zeta_example/widgets.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

class SelectInputExample extends StatefulWidget {
static const String name = 'SelectInput';
const SelectInputExample({super.key});

@override
State<SelectInputExample> createState() => _SelectInputExampleState();
}

class _SelectInputExampleState extends State<SelectInputExample> {
String? _errorText;
ZetaSelectInputItem? selectedItem = ZetaSelectInputItem(
value: 'Item 1',
);

@override
Widget build(BuildContext context) {
final zeta = Zeta.of(context);

return ExampleScaffold(
name: 'Select Input',
child: Center(
child: SingleChildScrollView(
child: SizedBox(
width: 320,
child: Column(
children: [
ZetaSelectInput(
label: Row(
children: [
Text('Label'),
Padding(
padding: const EdgeInsets.only(left: 6),
child: Text(
'*',
style: TextStyle(color: zeta.colors.red.shade60),
),
),
],
),
hint: 'Default hint text',
leadingIcon: Icon(ZetaIcons.star_round),
hasError: _errorText != null,
errorText: _errorText,
onChanged: (item) {
setState(() {
selectedItem = item;
if (item != null) {
_errorText = null;
}
});
},
onTextChanged: (value) {
setState(() {
if (value.isEmpty) {
_errorText = 'Required';
} else {
_errorText = null;
}
});
},
selectedItem: selectedItem,
items: [
ZetaSelectInputItem(
value: 'Item 1',
),
ZetaSelectInputItem(
value: 'Item 2',
),
ZetaSelectInputItem(
value: 'Item 3',
),
ZetaSelectInputItem(
value: 'Item 4',
),
ZetaSelectInputItem(
value: 'Item 5',
),
ZetaSelectInputItem(
value: 'Item 6',
),
ZetaSelectInputItem(
value: 'Item 7',
),
ZetaSelectInputItem(
value: 'Item 8',
),
ZetaSelectInputItem(
value: 'Item 9',
),
ZetaSelectInputItem(
value: 'Item 10',
),
ZetaSelectInputItem(
value: 'Item 11',
),
ZetaSelectInputItem(
value: 'Item 12',
),
],
),
const SizedBox(height: 120),
],
),
),
),
),
);
}
}
2 changes: 2 additions & 0 deletions example/widgetbook/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import 'pages/components/progress_widgetbook.dart';
import 'pages/components/radio_widgetbook.dart';
import 'pages/components/search_bar_widgetbook.dart';
import 'pages/components/segmented_control_widgetbook.dart';
import 'pages/components/select_input_widgetbook.dart';
import 'pages/components/stepper_widgetbook.dart';
import 'pages/components/switch_widgetbook.dart';
import 'pages/components/snack_bar_widgetbook.dart';
Expand Down Expand Up @@ -137,6 +138,7 @@ class HotReload extends StatelessWidget {
WidgetbookUseCase(name: 'Search Bar', builder: (context) => searchBarUseCase(context)),
WidgetbookUseCase(name: 'Navigation Rail', builder: (context) => navigationRailUseCase(context)),
WidgetbookUseCase(name: 'Tooltip', builder: (context) => tooltipUseCase(context)),
WidgetbookUseCase(name: 'Select Input', builder: (context) => selectInputUseCase(context)),
]..sort((a, b) => a.name.compareTo(b.name)),
),
WidgetbookCategory(
Expand Down
99 changes: 99 additions & 0 deletions example/widgetbook/pages/components/select_input_widgetbook.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

import '../../test/test_components.dart';
import '../../utils/utils.dart';

Widget selectInputUseCase(BuildContext context) {
final zeta = Zeta.of(context);
final items = [
ZetaSelectInputItem(value: 'Item 1'),
ZetaSelectInputItem(value: 'Item 2'),
ZetaSelectInputItem(value: 'Item 3'),
ZetaSelectInputItem(value: 'Item 4'),
ZetaSelectInputItem(value: 'Item 5'),
ZetaSelectInputItem(value: 'Item 6'),
ZetaSelectInputItem(value: 'Item 7'),
ZetaSelectInputItem(value: 'Item 8'),
ZetaSelectInputItem(value: 'Item 9'),
ZetaSelectInputItem(value: 'Item 10'),
ZetaSelectInputItem(value: 'Item 11'),
ZetaSelectInputItem(value: 'Item 12'),
];
late ZetaSelectInputItem? selectedItem = items.first;
String? _errorText;
final label = context.knobs.string(
label: 'Label',
initialValue: 'Label',
);
final hint = context.knobs.string(
label: 'Hint',
initialValue: 'Default hint text',
);
final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
final enabled = context.knobs.boolean(label: 'Enabled', initialValue: true);
final required = context.knobs.boolean(label: 'Required', initialValue: true);
final size = context.knobs.list<ZetaWidgetSize>(
label: 'Size',
options: ZetaWidgetSize.values,
labelBuilder: (size) => size.name,
);
final iconData = iconKnob(
context,
name: "Icon",
rounded: rounded,
initial: rounded ? ZetaIcons.star_round : ZetaIcons.star_sharp,
);

return WidgetbookTestWidget(
widget: StatefulBuilder(
builder: (context, setState) {
return Padding(
padding: const EdgeInsets.all(ZetaSpacing.m),
child: ZetaSelectInput(
rounded: rounded,
enabled: enabled,
size: size,
label: Row(
children: [
Text(label),
if (required)
Padding(
padding: const EdgeInsets.only(left: 6),
child: Text(
'*',
style: TextStyle(color: zeta.colors.red.shade60),
),
),
],
),
hint: hint,
leadingIcon: Icon(iconData),
hasError: _errorText != null,
errorText: _errorText,
onChanged: (item) {
setState(() {
selectedItem = item;
if (item != null) {
_errorText = null;
}
});
},
onTextChanged: (value) {
setState(() {
if (required && value.isEmpty) {
_errorText = 'Required';
} else {
_errorText = null;
}
});
},
selectedItem: selectedItem,
items: items,
),
);
},
),
);
}
Loading

0 comments on commit 07ddba1

Please sign in to comment.