-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* create ZetaSearchBar with examples * create Widgetbook for ZetaSearchBar * rename callback * full instead of stadium shape * default hint Search * add parameters showLeadingIcon & showSpeechToText * fix comments * use ZetaWidgetBorder & ZetaWidgetSize from enums.dart
- Loading branch information
1 parent
85cab8e
commit 837f482
Showing
6 changed files
with
412 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:zeta_example/widgets.dart'; | ||
| import 'package:zeta_flutter/zeta_flutter.dart'; | ||
|
|
||
| class SearchBarExample extends StatefulWidget { | ||
| static const String name = 'SearchBar'; | ||
|
|
||
| const SearchBarExample({Key? key}) : super(key: key); | ||
|
|
||
| @override | ||
| State<SearchBarExample> createState() => _SearchBarExampleState(); | ||
| } | ||
|
|
||
| class _SearchBarExampleState extends State<SearchBarExample> { | ||
| @override | ||
| Widget build(BuildContext context) { | ||
| return ExampleScaffold( | ||
| name: 'Search Bar', | ||
| child: SingleChildScrollView( | ||
| child: Column( | ||
| children: [ | ||
| Padding( | ||
| padding: const EdgeInsets.only(top: 20), | ||
| child: Text('Rounded', style: ZetaTextStyles.titleMedium), | ||
| ), | ||
| Padding( | ||
| padding: const EdgeInsets.all(20), | ||
| child: ZetaSearchBar( | ||
| onChanged: (value) {}, | ||
| ), | ||
| ), | ||
| Padding( | ||
| padding: const EdgeInsets.only(top: 20), | ||
| child: Text('Full', style: ZetaTextStyles.titleMedium), | ||
| ), | ||
| Padding( | ||
| padding: const EdgeInsets.all(20), | ||
| child: ZetaSearchBar( | ||
| shape: ZetaWidgetBorder.full, | ||
| onSpeechToText: () async => 'I wanted to say...', | ||
| ), | ||
| ), | ||
| Padding( | ||
| padding: const EdgeInsets.only(top: 20), | ||
| child: Text('Sharp', style: ZetaTextStyles.titleMedium), | ||
| ), | ||
| Padding( | ||
| padding: const EdgeInsets.all(20), | ||
| child: ZetaSearchBar( | ||
| initialValue: 'Initial value', | ||
| shape: ZetaWidgetBorder.sharp, | ||
| ), | ||
| ), | ||
| Padding( | ||
| padding: const EdgeInsets.only(top: 20), | ||
| child: Text('Disabled', style: ZetaTextStyles.titleMedium), | ||
| ), | ||
| Padding( | ||
| padding: const EdgeInsets.all(20), | ||
| child: ZetaSearchBar( | ||
| enabled: false, | ||
| ), | ||
| ), | ||
| Padding( | ||
| padding: const EdgeInsets.only(top: 20), | ||
| child: Text('Medium', style: ZetaTextStyles.titleMedium), | ||
| ), | ||
| Padding( | ||
| padding: const EdgeInsets.all(20), | ||
| child: ZetaSearchBar( | ||
| size: ZetaWidgetSize.medium, | ||
| ), | ||
| ), | ||
| Padding( | ||
| padding: const EdgeInsets.only(top: 20), | ||
| child: Text('Small', style: ZetaTextStyles.titleMedium), | ||
| ), | ||
| Padding( | ||
| padding: const EdgeInsets.all(20), | ||
| child: ZetaSearchBar( | ||
| size: ZetaWidgetSize.small, | ||
| ), | ||
| ), | ||
| ], | ||
| ), | ||
| ), | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
80 changes: 80 additions & 0 deletions
80
example/widgetbook/pages/components/search_bar_widgetbook.dart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:widgetbook/widgetbook.dart'; | ||
| import 'package:zeta_flutter/zeta_flutter.dart'; | ||
|
|
||
| import '../../test/test_components.dart'; | ||
|
|
||
| const List<String> _items = [ | ||
| 'The quick...', | ||
| 'The quick brown...', | ||
| 'The quick brown fox...', | ||
| 'The quick brown fox jumped...', | ||
| 'The quick brown fox jumped into...', | ||
| 'The quick brown fox jumped into the hole...', | ||
| ]; | ||
|
|
||
| Widget searchBarUseCase(BuildContext context) { | ||
| List<String> items = List.from(_items); | ||
| return WidgetbookTestWidget( | ||
| widget: StatefulBuilder( | ||
| builder: (context, setState) { | ||
| final hint = context.knobs.string( | ||
| label: 'Hint', | ||
| initialValue: 'Search', | ||
| ); | ||
| final enabled = context.knobs.boolean( | ||
| label: 'Enabled', | ||
| initialValue: true, | ||
| ); | ||
| final size = context.knobs.list<ZetaWidgetSize>( | ||
| label: 'Size', | ||
| options: ZetaWidgetSize.values, | ||
| labelBuilder: (size) => size.name, | ||
| ); | ||
| final shape = context.knobs.list<ZetaWidgetBorder>( | ||
| label: 'Shape', | ||
| options: ZetaWidgetBorder.values, | ||
| labelBuilder: (shape) => shape.name, | ||
| ); | ||
| final showLeadingIcon = context.knobs.boolean( | ||
| label: 'Show leading icon', | ||
| initialValue: true, | ||
| ); | ||
| final showSpeechToText = context.knobs.boolean( | ||
| label: 'Show Speech-To-Text button', | ||
| initialValue: true, | ||
| ); | ||
|
|
||
| return Padding( | ||
| padding: const EdgeInsets.all(ZetaSpacing.x5), | ||
| child: Column( | ||
| crossAxisAlignment: CrossAxisAlignment.start, | ||
| children: [ | ||
| ZetaSearchBar( | ||
| size: size, | ||
| shape: shape, | ||
| enabled: enabled, | ||
| hint: hint, | ||
| showLeadingIcon: showLeadingIcon, | ||
| showSpeechToText: showSpeechToText, | ||
| onChanged: (value) { | ||
| if (value == null) return; | ||
| setState( | ||
| () => items = _items | ||
| .where((item) => item.toLowerCase().contains( | ||
| value.toLowerCase(), | ||
| )) | ||
| .toList(), | ||
| ); | ||
| }, | ||
| onSpeechToText: () async => 'I wanted to say...', | ||
| ), | ||
| const SizedBox(height: ZetaSpacing.x5), | ||
| ...items.map((item) => Text(item)).toList(), | ||
| ], | ||
| ), | ||
| ); | ||
| }, | ||
| ), | ||
| ); | ||
| } |
Oops, something went wrong.