From 6a34587687417c80dcb9550d64427998157b15b0 Mon Sep 17 00:00:00 2001 From: mikecoomber Date: Tue, 16 Apr 2024 14:11:43 +0100 Subject: [PATCH] Fixing text overflow and widgetbook --- .../pages/components/dropdown_example.dart | 62 ++++++++++++------- .../pages/components/dropdown_widgetbook.dart | 58 +++++++---------- lib/src/components/dropdown/dropdown.dart | 49 ++++++++++----- 3 files changed, 95 insertions(+), 74 deletions(-) diff --git a/example/lib/pages/components/dropdown_example.dart b/example/lib/pages/components/dropdown_example.dart index 0e30b104..4a35a131 100644 --- a/example/lib/pages/components/dropdown_example.dart +++ b/example/lib/pages/components/dropdown_example.dart @@ -15,38 +15,58 @@ class _DropdownExampleState extends State { @override Widget build(BuildContext context) { + final items = [ + ZetaDropdownItem( + value: "Item 1", + icon: Icon(ZetaIcons.star_round), + ), + ZetaDropdownItem( + value: "Item 2", + icon: Icon(ZetaIcons.star_half_round), + ), + ZetaDropdownItem( + value: "Item 3", + ) + ]; + return ExampleScaffold( name: "Dropdown", - child: Center( - child: SingleChildScrollView( - child: SizedBox( - width: 320, - child: Column(children: [ + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + Center( + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ ZetaDropdown( - leadingType: LeadingStyle.checkbox, + disabled: true, + type: ZetaDropdownMenuType.standard, onChange: (value) { setState(() { selectedItem = value; }); }, selectedItem: selectedItem, - items: [ - ZetaDropdownItem( - value: "Item 1", - icon: Icon(ZetaIcons.star_round), - ), - ZetaDropdownItem( - value: "Item 2", - icon: Icon(ZetaIcons.star_half_round), - ), - ZetaDropdownItem( - value: "Item 3", - ) - ], + items: items, ), Text('Selected item : ${selectedItem}') - ])), - ), + ], + ), + ), + ZetaDropdown( + items: items, + selectedItem: selectedItem, + type: ZetaDropdownMenuType.checkbox, + ), + ZetaDropdown( + items: items, + selectedItem: selectedItem, + size: ZetaDropdownSize.mini, + type: ZetaDropdownMenuType.radio, + ), + ], ), ); } diff --git a/example/widgetbook/pages/components/dropdown_widgetbook.dart b/example/widgetbook/pages/components/dropdown_widgetbook.dart index 73308f16..053c277a 100644 --- a/example/widgetbook/pages/components/dropdown_widgetbook.dart +++ b/example/widgetbook/pages/components/dropdown_widgetbook.dart @@ -3,6 +3,7 @@ import 'package:widgetbook/widgetbook.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; import '../../test/test_components.dart'; +import '../../utils/utils.dart'; Widget dropdownUseCase(BuildContext context) => WidgetbookTestWidget( widget: Center( @@ -19,52 +20,37 @@ class DropdownExample extends StatefulWidget { } class _DropdownExampleState extends State { - List<_DropdownItem> _children = [ - _DropdownItem( + final items = [ + ZetaDropdownItem( value: "Item 1", - leadingIcon: Icon(ZetaIcons.star_round), + icon: Icon(ZetaIcons.star_round), ), - _DropdownItem( + ZetaDropdownItem( value: "Item 2", - leadingIcon: Icon(ZetaIcons.star_half_round), + icon: Icon(ZetaIcons.star_half_round), ), - _DropdownItem( + ZetaDropdownItem( value: "Item 3", ) ]; - late _DropdownItem selectedItem = _DropdownItem( - value: "Item 1", - leadingIcon: Icon(ZetaIcons.star_round), - ); - @override Widget build(BuildContext _) { - return SingleChildScrollView( - child: SizedBox( - width: double.infinity, - child: Column(children: [ - ZetaDropdown( - leadingType: widget.c.knobs.list( - label: "Checkbox type", - options: [ - LeadingStyle.none, - LeadingStyle.checkbox, - LeadingStyle.radio, - ], - ), - onChange: (value) { - setState(() { - selectedItem = value; - }); - }, - selectedItem: selectedItem, - items: _children, - rounded: widget.c.knobs.boolean(label: "Rounded"), - isMinimized: widget.c.knobs.boolean(label: "Minimized"), - ), - Text('Selected item : ${selectedItem.value}') - ])), + return ZetaDropdown( + type: widget.c.knobs.list( + label: "Dropdown type", + options: ZetaDropdownMenuType.values, + labelBuilder: enumLabelBuilder, + ), + onChange: (value) {}, + items: items, + rounded: widget.c.knobs.boolean(label: "Rounded"), + disabled: widget.c.knobs.boolean(label: "Disabled"), + size: widget.c.knobs.list( + label: 'Size', + options: ZetaDropdownSize.values, + labelBuilder: enumLabelBuilder, + ), ); } } diff --git a/lib/src/components/dropdown/dropdown.dart b/lib/src/components/dropdown/dropdown.dart index dd063c07..bc166ce0 100644 --- a/lib/src/components/dropdown/dropdown.dart +++ b/lib/src/components/dropdown/dropdown.dart @@ -99,7 +99,8 @@ class ZetaDropdown extends StatefulWidget { ..add(IterableProperty>('items', items)) ..add(DiagnosticsProperty('selectedItem', selectedItem)) ..add(ObjectFlagProperty?>.has('onChange', onChange)) - ..add(EnumProperty('size', size)); + ..add(EnumProperty('size', size)) + ..add(DiagnosticsProperty('disabled', disabled)); } } @@ -184,7 +185,7 @@ class _ZetaDropDownState extends State> { }, child: _ZetaDropDownMenu( items: widget.items, - selected: widget.selectedItem, + selected: _selectedItem?.value, rounded: widget.rounded, allocateLeadingSpace: _allocateLeadingSpace, width: _size, @@ -313,21 +314,35 @@ class _DropdownItemState extends State<_DropdownItem> { ); } - return DefaultTextStyle( - style: ZetaTextStyles.bodyMedium, - child: OutlinedButton( - key: widget.itemKey, - onPressed: widget.onPress, - style: _getStyle(colors), - child: Row( - children: [ - const SizedBox(width: ZetaSpacing.x3), - if (leading != null) leading, - Text( - widget.value.label, - ), - ], - ).paddingVertical(ZetaSpacing.x2_5), + return ConstrainedBox( + constraints: const BoxConstraints(maxHeight: ZetaSpacing.x10), + child: DefaultTextStyle( + style: ZetaTextStyles.bodyMedium, + child: OutlinedButton( + key: widget.itemKey, + onPressed: widget.onPress, + style: _getStyle(colors), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + const SizedBox(width: ZetaSpacing.x3), + if (leading != null) leading, + Expanded( + child: Padding( + padding: const EdgeInsets.only(right: ZetaSpacing.x2), + child: Align( + alignment: Alignment.centerLeft, + child: FittedBox( + child: Text( + widget.value.label, + ), + ), + ), + ), + ), + ], + ).paddingVertical(ZetaSpacing.x2_5), + ), ), ); }