Skip to content

Commit 7616c79

Browse files
mikecoombermikecoomber
committed
fix border and sizing
1 parent 73f88c7 commit 7616c79

File tree

6 files changed

+534
-59
lines changed

6 files changed

+534
-59
lines changed

‎example/lib/pages/components/phone_input_example.dart

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,15 @@ class _PhoneInputExampleState extends State<PhoneInputExample> {
7070
hintText: 'Enter your phone number',
7171
),
7272
),
73+
Padding(
74+
padding: const EdgeInsets.all(20),
75+
child: TextFormField(
76+
decoration: InputDecoration(
77+
isDense: true,
78+
prefixText: 'ddddddddddd',
79+
),
80+
),
81+
),
7382
],
7483
),
7584
),

‎example/widgetbook/pages/components/phone_input_widgetbook.dart

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Widget phoneInputUseCase(BuildContext context) {
2020
label: 'Phone number',
2121
hintText: 'Enter your phone number',
2222
countries: countries.isEmpty ? null : countries.toUpperCase().split(','),
23-
useRootNavigator: false,
23+
// useRootNavigator: false,
2424
),
2525
);
2626
},

‎lib/src/components/phone_input/phone_input.dart

Lines changed: 55 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import '../../../zeta_flutter.dart';
77

88
import '../text_input/hint_text.dart';
99
import '../text_input/input_label.dart';
10+
import '../text_input/text_input.dart';
1011
import 'countries.dart';
1112

1213
/// ZetaPhoneInput allows entering phone numbers.
@@ -175,75 +176,83 @@ class _ZetaPhoneInputState extends State<ZetaPhoneInput> {
175176
children: [
176177
ZetaDropdown(
177178
offset: const Offset(0, ZetaSpacing.medium),
178-
onChange: (value) {
179-
setState(() {
180-
_selectedCountry = _countries.firstWhere((country) => country.dialCode == value.value);
181-
});
182-
inputFocusNode.requestFocus();
183-
},
179+
onChange: !widget.disabled
180+
? (value) {
181+
setState(() {
182+
_selectedCountry = _countries.firstWhere((country) => country.dialCode == value.value);
183+
});
184+
inputFocusNode.requestFocus();
185+
}
186+
: null,
184187
value: _selectedCountry.dialCode,
185188
onDismissed: () => setState(() {}),
186189
items: _dropdownItems,
187190
builder: (context, selectedItem, controller) {
188-
return DecoratedBox(
189-
decoration: BoxDecoration(
190-
border: Border(
191-
left: BorderSide(
192-
color: zeta.colors.borderDefault,
193-
),
194-
top: BorderSide(
195-
color: zeta.colors.borderDefault,
191+
final borderSide = BorderSide(
192+
color: widget.disabled ? zeta.colors.borderDefault : zeta.colors.borderSubtle,
193+
);
194+
195+
return GestureDetector(
196+
onTap: !widget.disabled ? controller.toggle : null,
197+
child: Container(
198+
constraints: BoxConstraints(
199+
maxHeight: widget.size == ZetaWidgetSize.large ? 48 : 40,
200+
),
201+
decoration: BoxDecoration(
202+
borderRadius: BorderRadius.only(
203+
topLeft: rounded ? const Radius.circular(ZetaSpacing.minimum) : Radius.zero,
204+
bottomLeft: rounded ? const Radius.circular(ZetaSpacing.minimum) : Radius.zero,
196205
),
197-
bottom: BorderSide(
198-
color: zeta.colors.borderDefault,
206+
border: Border(
207+
left: borderSide,
208+
top: borderSide,
209+
bottom: borderSide,
199210
),
211+
color: widget.disabled ? zeta.colors.surfaceDisabled : zeta.colors.surfaceDefault,
200212
),
201-
),
202-
child: GestureDetector(
203-
onTap: controller.toggle,
204-
child: ConstrainedBox(
205-
constraints: BoxConstraints(
206-
maxHeight: widget.size == ZetaWidgetSize.large ? 48 : 40,
207-
),
208-
child: Column(
209-
children: [
210-
Expanded(
211-
child: Row(
212-
mainAxisAlignment: MainAxisAlignment.spaceBetween,
213-
mainAxisSize: MainAxisSize.min,
214-
children: [
215-
Padding(
216-
padding: const EdgeInsets.only(
217-
left: ZetaSpacing.medium,
218-
right: ZetaSpacing.small,
219-
),
220-
child: selectedItem?.icon,
213+
child: Column(
214+
children: [
215+
Expanded(
216+
child: Row(
217+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
218+
mainAxisSize: MainAxisSize.min,
219+
children: [
220+
Padding(
221+
padding: const EdgeInsets.only(
222+
left: ZetaSpacing.medium,
223+
right: ZetaSpacing.small,
221224
),
222-
ZetaIcon(
223-
!controller.isOpen ? ZetaIcons.expand_more : ZetaIcons.expand_less,
224-
color: !widget.disabled ? zeta.colors.iconDefault : zeta.colors.iconDisabled,
225-
size: ZetaSpacing.xl_1,
226-
),
227-
],
228-
),
225+
child: selectedItem?.icon,
226+
),
227+
ZetaIcon(
228+
!controller.isOpen ? ZetaIcons.expand_more : ZetaIcons.expand_less,
229+
color: !widget.disabled ? zeta.colors.iconDefault : zeta.colors.iconDisabled,
230+
size: ZetaSpacing.xl_1,
231+
),
232+
],
229233
),
230-
],
231-
),
234+
),
235+
],
232236
),
233237
),
234238
);
235239
},
236240
),
237241
Expanded(
238-
child: ZetaTextInput(
242+
child: textInputWithBorder(
239243
initialValue: widget.phoneNumber,
240244
disabled: widget.disabled,
241245
size: widget.size,
246+
rounded: rounded,
242247
focusNode: inputFocusNode,
243248
inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'[\d\s\-]'))],
244249
keyboardType: TextInputType.phone,
245250
onChange: (value) => _onChanged(phoneNumber: value),
246251
prefixText: _selectedCountry.dialCode,
252+
borderRadius: BorderRadius.only(
253+
topRight: rounded ? const Radius.circular(ZetaSpacing.minimum) : Radius.zero,
254+
bottomRight: rounded ? const Radius.circular(ZetaSpacing.minimum) : Radius.zero,
255+
),
247256
),
248257
),
249258
],

0 commit comments

Comments
 (0)