Skip to content

Commit 9caf473

Browse files
PHKennyPHKenny
committed
ThemedCheckboxInput optimizations
1 parent e767f0e commit 9caf473

5 files changed

Lines changed: 127 additions & 109 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Changelog
22

3+
## 7.4.0-prerelease8
4+
5+
- Changes on `ThemedCheckboxInput` to support a more compact design when used `ThemedCheckboxInputStyle.asField`.
6+
- Changed default value of `ThemedCheckboxInput.style` to `ThemedCheckboxInputStyle.asFlutterCheckbox` instead of `ThemedCheckboxInputStyle.asCheckbox2` to avoid some issues of performance on high number of checkboxes.
7+
38
## 7.4.0-prerelease7
49

510
- Updated `ThemedDurationInput` to be precise on sizing, and allow two col selectors

‎example/pubspec.lock‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -366,7 +366,7 @@ packages:
366366
path: ".."
367367
relative: true
368368
source: path
369-
version: "7.4.0-prerelease6"
369+
version: "7.4.0-prerelease8"
370370
leak_tracker:
371371
dependency: transitive
372372
description:

‎lib/src/inputs/src/general/checkbox_input.dart‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ class ThemedCheckboxInput extends StatefulWidget {
6161
this.hideDetails = false,
6262
this.padding = const EdgeInsets.all(10),
6363
this.dense = false,
64-
this.style = ThemedCheckboxInputStyle.asCheckbox2,
64+
this.style = ThemedCheckboxInputStyle.asFlutterCheckbox,
6565
}) : assert(label == null || labelText == null);
6666

6767
@override
@@ -122,6 +122,8 @@ class _ThemedCheckboxInputState extends State<ThemedCheckboxInput> {
122122
enableSearch: false,
123123
hideTitle: true,
124124
hideButtons: true,
125+
overrideHeightDialog: 120,
126+
125127
items: [
126128
ThemedSelectItem(
127129
value: true,

‎lib/src/inputs/src/general/select_input.dart‎

Lines changed: 117 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,10 @@ class ThemedSelectInput<T> extends StatefulWidget {
116116
/// [itemExtent] is the extend of the item, used on the lists of the dual list input.
117117
final double itemExtent;
118118

119+
/// [overrideHeightDialog] is the height of the dialog, used to override the computed height based on
120+
/// the items.
121+
final double? overrideHeightDialog;
122+
119123
/// [ThemedSelectInput] is the input for selecting an item from a list.
120124
const ThemedSelectInput({
121125
super.key,
@@ -157,6 +161,7 @@ class ThemedSelectInput<T> extends StatefulWidget {
157161
this.autoSelectFirst = false,
158162
this.dialogContraints = const BoxConstraints(maxWidth: 500, maxHeight: 500),
159163
this.itemExtent = 50,
164+
this.overrideHeightDialog,
160165
}) : assert((label == null && labelText != null) || (label != null && labelText == null));
161166

162167
@override
@@ -280,6 +285,7 @@ class _ThemedSelectInputState<T> extends State<ThemedSelectInput<T>> with Single
280285
overridesLayrzTranslations: widget.overridesLayrzTranslations,
281286
autoclose: widget.autoclose,
282287
value: selected,
288+
overrideHeightDialog: widget.overrideHeightDialog,
283289
);
284290
},
285291
);
@@ -341,6 +347,7 @@ class DialogSelectInput<T> extends StatefulWidget {
341347
final bool overridesLayrzTranslations;
342348
final bool autoclose;
343349
final ThemedSelectItem<T>? value;
350+
final double? overrideHeightDialog;
344351

345352
const DialogSelectInput({
346353
super.key,
@@ -358,6 +365,7 @@ class DialogSelectInput<T> extends StatefulWidget {
358365
required this.overridesLayrzTranslations,
359366
required this.autoclose,
360367
required this.value,
368+
this.overrideHeightDialog,
361369
});
362370

363371
@override
@@ -393,125 +401,128 @@ class _DialogSelectInputState extends State<DialogSelectInput> {
393401
),
394402
child: LayoutBuilder(
395403
builder: (context, constraints) {
396-
return Column(
397-
mainAxisSize: MainAxisSize.min,
398-
crossAxisAlignment: CrossAxisAlignment.start,
399-
children: [
400-
/// Title and Search
401-
if (!widget.hideTitle) ...[
402-
Padding(
403-
padding: const EdgeInsets.only(right: 10, left: 15, top: 14),
404-
child: Row(
405-
mainAxisAlignment: MainAxisAlignment.start,
406-
crossAxisAlignment: CrossAxisAlignment.center,
407-
spacing: 10,
408-
children: [
409-
/// Title
410-
Expanded(
411-
child: Text(
412-
widget.labelText ?? '',
413-
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
414-
fontWeight: FontWeight.bold,
415-
overflow: TextOverflow.visible,
404+
return SizedBox(
405+
height: widget.overrideHeightDialog,
406+
child: Column(
407+
mainAxisSize: MainAxisSize.min,
408+
crossAxisAlignment: CrossAxisAlignment.start,
409+
children: [
410+
/// Title and Search
411+
if (!widget.hideTitle) ...[
412+
Padding(
413+
padding: const EdgeInsets.only(right: 10, left: 15, top: 14),
414+
child: Row(
415+
mainAxisAlignment: MainAxisAlignment.start,
416+
crossAxisAlignment: CrossAxisAlignment.center,
417+
spacing: 10,
418+
children: [
419+
/// Title
420+
Expanded(
421+
child: Text(
422+
widget.labelText ?? '',
423+
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
424+
fontWeight: FontWeight.bold,
425+
overflow: TextOverflow.visible,
426+
),
416427
),
417428
),
418-
),
419429

420-
/// Search
421-
if (widget.enableSearch) ...[
422-
Expanded(
423-
child: ThemedSearchInput(
424-
value: searchText,
425-
onSearch: (value) => setState(() => searchText = value),
426-
asField: true,
430+
/// Search
431+
if (widget.enableSearch) ...[
432+
Expanded(
433+
child: ThemedSearchInput(
434+
value: searchText,
435+
onSearch: (value) => setState(() => searchText = value),
436+
asField: true,
437+
),
427438
),
428-
),
439+
],
429440
],
430-
],
441+
),
431442
),
432-
),
433-
],
434-
if (items.isEmpty) ...[
435-
Center(
436-
child: Text(
437-
t('layrz.select.empty'),
438-
style: Theme.of(context).textTheme.bodyLarge?.copyWith(fontWeight: FontWeight.bold),
439-
textAlign: TextAlign.center,
440-
),
441-
),
442-
] else ...[
443-
/// Items
444-
Expanded(
445-
child: ListView.builder(
446-
itemCount: items.length,
447-
itemExtent: widget.itemExtent,
448-
padding: const EdgeInsets.all(10),
449-
itemBuilder: (context, index) {
450-
bool isSelected = selectedItem == items[index];
451-
return _ThemedSelectItem(
452-
item: items[index],
453-
selected: isSelected,
454-
canUnselect: widget.canUnselect,
455-
onTap: () {
456-
items[index].onTap?.call();
457-
if (isSelected && widget.canUnselect) {
458-
selectedItem = null;
459-
} else {
460-
selectedItem = items[index];
461-
}
462-
setState(() {});
463-
if (widget.autoclose) {
464-
Navigator.of(context).pop(
465-
SelectInputResult(result: selectedItem),
466-
);
467-
}
468-
},
469-
);
470-
},
443+
],
444+
if (items.isEmpty) ...[
445+
Center(
446+
child: Text(
447+
t('layrz.select.empty'),
448+
style: Theme.of(context).textTheme.bodyLarge?.copyWith(fontWeight: FontWeight.bold),
449+
textAlign: TextAlign.center,
450+
),
471451
),
472-
),
473-
],
474-
475-
/// Actions
476-
if (!widget.hideButtons) ...[
477-
Padding(
478-
padding: const EdgeInsets.symmetric(
479-
horizontal: 10,
480-
).add(const EdgeInsets.only(bottom: 14)),
481-
child: Row(
482-
mainAxisAlignment: MainAxisAlignment.spaceBetween,
483-
children: [
484-
ThemedButton.cancel(
485-
isMobile: isMobile,
486-
labelText: t('actions.cancel'),
487-
onTap: () => Navigator.of(context).pop(
488-
SelectInputResult(result: widget.value),
489-
),
490-
),
491-
if (widget.canUnselect && selectedItem?.value != null)
492-
ThemedButton(
493-
style: isMobile ? ThemedButtonStyle.fab : ThemedButtonStyle.text,
494-
icon: LayrzIcons.solarBoldMinusSquare,
495-
labelText: t('layrz.select.unselect'),
496-
color: Colors.orange,
452+
] else ...[
453+
/// Items
454+
Expanded(
455+
child: ListView.builder(
456+
itemCount: items.length,
457+
itemExtent: widget.itemExtent,
458+
padding: const EdgeInsets.all(10),
459+
itemBuilder: (context, index) {
460+
bool isSelected = selectedItem == items[index];
461+
return _ThemedSelectItem(
462+
item: items[index],
463+
selected: isSelected,
464+
canUnselect: widget.canUnselect,
497465
onTap: () {
498-
Navigator.of(context).pop(
499-
SelectInputResult(result: selectedItem, isRemoved: true),
500-
);
466+
items[index].onTap?.call();
467+
if (isSelected && widget.canUnselect) {
468+
selectedItem = null;
469+
} else {
470+
selectedItem = items[index];
471+
}
472+
setState(() {});
473+
if (widget.autoclose) {
474+
Navigator.of(context).pop(
475+
SelectInputResult(result: selectedItem),
476+
);
477+
}
501478
},
479+
);
480+
},
481+
),
482+
),
483+
],
484+
485+
/// Actions
486+
if (!widget.hideButtons) ...[
487+
Padding(
488+
padding: const EdgeInsets.symmetric(
489+
horizontal: 10,
490+
).add(const EdgeInsets.only(bottom: 14)),
491+
child: Row(
492+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
493+
children: [
494+
ThemedButton.cancel(
495+
isMobile: isMobile,
496+
labelText: t('actions.cancel'),
497+
onTap: () => Navigator.of(context).pop(
498+
SelectInputResult(result: widget.value),
499+
),
502500
),
503-
ThemedButton.save(
504-
isMobile: isMobile,
505-
labelText: t('actions.save'),
506-
onTap: () => Navigator.of(context).pop(
507-
SelectInputResult(result: selectedItem),
501+
if (widget.canUnselect && selectedItem?.value != null)
502+
ThemedButton(
503+
style: isMobile ? ThemedButtonStyle.fab : ThemedButtonStyle.text,
504+
icon: LayrzIcons.solarBoldMinusSquare,
505+
labelText: t('layrz.select.unselect'),
506+
color: Colors.orange,
507+
onTap: () {
508+
Navigator.of(context).pop(
509+
SelectInputResult(result: selectedItem, isRemoved: true),
510+
);
511+
},
512+
),
513+
ThemedButton.save(
514+
isMobile: isMobile,
515+
labelText: t('actions.save'),
516+
onTap: () => Navigator.of(context).pop(
517+
SelectInputResult(result: selectedItem),
518+
),
508519
),
509-
),
510-
],
520+
],
521+
),
511522
),
512-
),
523+
],
513524
],
514-
],
525+
),
515526
);
516527
},
517528
),

‎pubspec.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
name: layrz_theme
22
description: Layrz standard styling library for Flutter. Widget library following the Material Design 3 guidelines, with a focus on reliavility and functionality.
3-
version: "7.4.0-prerelease6"
3+
version: "7.4.0-prerelease8"
44
homepage: https://theme.layrz.com
55
repository: https://github.com/goldenm-software/layrz_theme
66

0 commit comments

Comments
 (0)