-
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.
feat: Created dropdown list item (#101)
feat: Created ZetaAnimationDuration tokens
- Loading branch information
1 parent
ccb3fe9
commit 868b26c
Showing
16 changed files
with
381 additions
and
78 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
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
39 changes: 39 additions & 0 deletions
39
example/widgetbook/pages/components/dropdown_list_item_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,39 @@ | ||
| 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 dropdownListItemUseCase(BuildContext context) { | ||
| return WidgetbookTestWidget( | ||
| widget: StatefulBuilder( | ||
| builder: (context, setState) { | ||
| final primaryText = context.knobs.string(label: 'Primary text', initialValue: 'Label'); | ||
|
|
||
| final secondaryText = context.knobs.string(label: 'Secondary text', initialValue: 'Descriptor'); | ||
|
|
||
| final showIcon = context.knobs.boolean(label: 'Show icon'); | ||
|
|
||
| final showDivider = context.knobs.boolean(label: 'Show divider'); | ||
|
|
||
| final rounded = roundedKnob(context); | ||
|
|
||
| final leading = showIcon ? Icon(ZetaIcons.star_round) : null; | ||
|
|
||
| return ZetaDropdownListItem( | ||
| primaryText: primaryText, | ||
| items: [ | ||
| ZetaListItem(primaryText: 'List Item'), | ||
| ZetaListItem(primaryText: 'List Item'), | ||
| ZetaListItem(primaryText: 'List Item'), | ||
| ], | ||
| rounded: rounded, | ||
| secondaryText: secondaryText, | ||
| leading: leading, | ||
| showDivider: showDivider, | ||
| ); | ||
| }, | ||
| ), | ||
| ); | ||
| } |
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
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,164 @@ | ||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| import '../../assets/icons.dart'; | ||
| import '../../theme/tokens.dart'; | ||
| import '../../zeta.dart'; | ||
| import 'list_item.dart'; | ||
| import 'list_scope.dart'; | ||
|
|
||
| /// An expandable list item containing other [ZetaListItem]s within it. | ||
| class ZetaDropdownListItem extends StatefulWidget { | ||
| /// Creates a new [ZetaDropdownListItem] | ||
| const ZetaDropdownListItem({ | ||
| required this.primaryText, | ||
| required this.items, | ||
| this.secondaryText, | ||
| this.expanded = false, | ||
| this.leading, | ||
| this.rounded = true, | ||
| this.showDivider, | ||
| super.key, | ||
| }); | ||
|
|
||
| /// The list of [ZetaListItem]s contained within the dropdown. | ||
| final List<ZetaListItem> items; | ||
|
|
||
| /// {@macro list-item-primary-text} | ||
| final String primaryText; | ||
|
|
||
| /// {@macro list-item-secondary-text} | ||
| final String? secondaryText; | ||
|
|
||
| /// {@macro list-item-leading} | ||
| final Widget? leading; | ||
|
|
||
| /// Expands the list item if set to true. | ||
| /// Defaults to false. | ||
| final bool expanded; | ||
|
|
||
| /// {@macro zeta-component-rounded} | ||
| final bool rounded; | ||
|
|
||
| /// {@macro list-item-show-divider} | ||
| final bool? showDivider; | ||
|
|
||
| @override | ||
| State<ZetaDropdownListItem> createState() => _ZetaDropdownListItemState(); | ||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(IterableProperty<ZetaListItem>('items', items)) | ||
| ..add(StringProperty('primaryText', primaryText)) | ||
| ..add(StringProperty('secondaryText', secondaryText)) | ||
| ..add(DiagnosticsProperty<bool>('expanded', expanded)) | ||
| ..add(DiagnosticsProperty<bool>('rounded', rounded)) | ||
| ..add(DiagnosticsProperty<bool?>('showDivider', showDivider)); | ||
| } | ||
| } | ||
|
|
||
| class _ZetaDropdownListItemState extends State<ZetaDropdownListItem> with SingleTickerProviderStateMixin { | ||
| late AnimationController _expandController; | ||
| late Animation<double> _animation; | ||
|
|
||
| late bool _expanded; | ||
|
|
||
| IconData get _icon { | ||
| return widget.rounded ? ZetaIcons.expand_more_round : ZetaIcons.expand_more_sharp; | ||
| } | ||
|
|
||
| @override | ||
| void initState() { | ||
| _expanded = widget.expanded; | ||
| _expandController = AnimationController( | ||
| vsync: this, | ||
| duration: ZetaAnimationLength.fast, | ||
| ); | ||
| _animation = CurvedAnimation( | ||
| parent: _expandController, | ||
| curve: Curves.easeInOut, | ||
| ); | ||
| if (_expanded) { | ||
| _expandController.value = 1; | ||
| } | ||
| super.initState(); | ||
| } | ||
|
|
||
| @override | ||
| void didUpdateWidget(covariant ZetaDropdownListItem oldWidget) { | ||
| if (oldWidget.expanded != widget.expanded) { | ||
| _setExpanded(widget.expanded); | ||
| } | ||
| super.didUpdateWidget(oldWidget); | ||
| } | ||
|
|
||
| @override | ||
| void dispose() { | ||
| _expandController.dispose(); | ||
| super.dispose(); | ||
| } | ||
|
|
||
| void _setExpanded(bool value) { | ||
| setState(() { | ||
| _expanded = value; | ||
| }); | ||
| if (_expanded) { | ||
| _expandController.forward(); | ||
| } else { | ||
| _expandController.reverse(); | ||
| } | ||
| } | ||
|
|
||
| void _onTap() => _setExpanded(!_expanded); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| final divide = widget.showDivider ?? ListScope.of(context)?.showDivider ?? false; | ||
| final colors = Zeta.of(context).colors; | ||
|
|
||
| // DecoratedBox does not correctly animated the border when the widget expands. | ||
| // ignore: use_decorated_box | ||
| return Container( | ||
| decoration: BoxDecoration( | ||
| border: Border( | ||
| bottom: BorderSide( | ||
| color: divide ? colors.borderDefault : Colors.transparent, | ||
| ), | ||
| ), | ||
| ), | ||
| child: Column( | ||
| children: [ | ||
| ZetaListItem( | ||
| primaryText: widget.primaryText, | ||
| secondaryText: widget.secondaryText, | ||
| leading: widget.leading, | ||
| onTap: _onTap, | ||
| showDivider: false, | ||
| trailing: IconButton( | ||
| icon: AnimatedRotation( | ||
| turns: _expanded ? 0.5 : 0, | ||
| duration: ZetaAnimationLength.fast, | ||
| child: Icon( | ||
| _icon, | ||
| color: colors.iconSubtle, | ||
| ), | ||
| ), | ||
| onPressed: _onTap, | ||
| ), | ||
| ), | ||
| ListScope( | ||
| showDivider: false, | ||
| indentItems: true, | ||
| child: SizeTransition( | ||
| sizeFactor: _animation, | ||
| child: Column( | ||
| children: widget.items, | ||
| ), | ||
| ), | ||
| ), | ||
| ], | ||
| ), | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.