ML-137 Dialogs improvements (#138)

* Force dialogs to have the same width

* Fix `DialogPicker` bouncing when the first selected item is near the end
This commit is contained in:
Vadim 2023-11-14 12:26:34 +01:00 committed by GitHub
parent 6566108994
commit 19fc039723
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 139 additions and 128 deletions

View file

@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:lightmeter/generated/l10n.dart';
import 'package:lightmeter/res/dimens.dart';
@ -34,18 +35,20 @@ class _DialogFilterState<T> extends State<DialogFilter<T>> {
bool get _hasAnySelected => checkboxValues.contains(true);
bool get _hasAnyUnselected => checkboxValues.contains(false);
late final ScrollController _scrollController;
final ScrollController _scrollController = ScrollController();
@override
void initState() {
super.initState();
int i = 0;
for (; i < checkboxValues.length; i++) {
if (checkboxValues[i]) {
break;
SchedulerBinding.instance.addPostFrameCallback((_) {
int i = 0;
for (; i < checkboxValues.length; i++) {
if (checkboxValues[i]) {
break;
}
}
}
_scrollController = ScrollController(initialScrollOffset: Dimens.grid56 * i);
_scrollController.jumpTo((Dimens.grid56 * i).clamp(0, _scrollController.position.maxScrollExtent));
});
}
@override
@ -61,79 +64,80 @@ class _DialogFilterState<T> extends State<DialogFilter<T>> {
titlePadding: Dimens.dialogIconTitlePadding,
title: Text(widget.title),
contentPadding: EdgeInsets.zero,
content: Column(
children: [
Padding(
padding: Dimens.dialogIconTitlePadding,
child: Text(widget.description),
),
const Divider(),
Expanded(
child: SingleChildScrollView(
controller: _scrollController,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: List.generate(
widget.values.length,
(index) => CheckboxListTile(
value: checkboxValues[index],
controlAffinity: ListTileControlAffinity.leading,
title: Text(
widget.titleAdapter(context, widget.values[index]),
style: Theme.of(context).textTheme.bodyLarge,
content: SizedBox(
width: double.maxFinite,
child: Column(
children: [
Padding(
padding: Dimens.dialogIconTitlePadding,
child: Text(widget.description),
),
const Divider(),
Expanded(
child: SingleChildScrollView(
controller: _scrollController,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: List.generate(
widget.values.length,
(index) => CheckboxListTile(
value: checkboxValues[index],
controlAffinity: ListTileControlAffinity.leading,
title: Text(
widget.titleAdapter(context, widget.values[index]),
style: Theme.of(context).textTheme.bodyLarge,
),
onChanged: (value) {
if (value != null) {
setState(() {
checkboxValues[index] = value;
});
}
},
),
onChanged: (value) {
if (value != null) {
setState(() {
checkboxValues[index] = value;
});
}
},
),
),
),
),
),
const Divider(),
Padding(
padding: Dimens.dialogActionsPadding,
child: Row(
children: [
SizedBox(
width: 40,
child: IconButton(
padding: EdgeInsets.zero,
icon: Icon(_hasAnyUnselected ? Icons.select_all : Icons.deselect),
onPressed: _toggleAll,
tooltip: _hasAnyUnselected
? S.of(context).tooltipSelectAll
: S.of(context).tooltipDesecelectAll,
const Divider(),
Padding(
padding: Dimens.dialogActionsPadding,
child: Row(
children: [
SizedBox(
width: 40,
child: IconButton(
padding: EdgeInsets.zero,
icon: Icon(_hasAnyUnselected ? Icons.select_all : Icons.deselect),
onPressed: _toggleAll,
tooltip: _hasAnyUnselected ? S.of(context).tooltipSelectAll : S.of(context).tooltipDesecelectAll,
),
),
),
const Spacer(),
TextButton(
onPressed: Navigator.of(context).pop,
child: Text(S.of(context).cancel),
),
TextButton(
onPressed: _hasAnySelected
? () {
final List<T> selectedValues = [];
for (int i = 0; i < widget.values.length; i++) {
if (checkboxValues[i]) {
selectedValues.add(widget.values[i]);
const Spacer(),
TextButton(
onPressed: Navigator.of(context).pop,
child: Text(S.of(context).cancel),
),
TextButton(
onPressed: _hasAnySelected
? () {
final List<T> selectedValues = [];
for (int i = 0; i < widget.values.length; i++) {
if (checkboxValues[i]) {
selectedValues.add(widget.values[i]);
}
}
Navigator.of(context).pop(selectedValues);
}
Navigator.of(context).pop(selectedValues);
}
: null,
child: Text(S.of(context).save),
),
],
),
)
],
: null,
child: Text(S.of(context).save),
),
],
),
)
],
),
),
);
}

View file

@ -32,24 +32,28 @@ class _DialogPickerState<T> extends State<DialogPicker<T>> {
titlePadding: Dimens.dialogIconTitlePadding,
title: Text(widget.title),
contentPadding: EdgeInsets.zero,
content: Column(
mainAxisSize: MainAxisSize.min,
children: widget.values
.map(
(e) => RadioListTile(
value: e,
groupValue: _selected,
title: Text(widget.titleAdapter(context, e)),
onChanged: (T? value) {
if (value != null) {
setState(() {
_selected = value;
});
}
},
),
)
.toList(),
content: SizedBox(
width: double.maxFinite,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: widget.values
.map(
(e) => RadioListTile(
value: e,
groupValue: _selected,
title: Text(widget.titleAdapter(context, e)),
onChanged: (T? value) {
if (value != null) {
setState(() {
_selected = value;
});
}
},
),
)
.toList(),
),
),
actionsPadding: Dimens.dialogActionsPadding,
actions: [

View file

@ -36,47 +36,50 @@ class _DialogRangePickerState<T extends PhotographyValue> extends State<DialogRa
titlePadding: Dimens.dialogIconTitlePadding,
title: Text(widget.title),
contentPadding: EdgeInsets.zero,
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: Dimens.dialogIconTitlePadding,
child: Text(widget.description),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: Dimens.paddingL),
child: DefaultTextStyle(
style: Theme.of(context).textTheme.bodyLarge!,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(widget.values[_start].toString()),
Text(widget.values[_end].toString()),
],
),
content: SizedBox(
width: double.maxFinite,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: Dimens.dialogIconTitlePadding,
child: Text(widget.description),
),
),
Row(
children: [
Expanded(
child: RangeSlider(
values: RangeValues(
_start.toDouble(),
_end.toDouble(),
),
max: widget.values.length.toDouble() - 1,
divisions: widget.values.length - 1,
onChanged: (value) {
setState(() {
_start = value.start.round();
_end = value.end.round();
});
},
Padding(
padding: const EdgeInsets.symmetric(horizontal: Dimens.paddingL),
child: DefaultTextStyle(
style: Theme.of(context).textTheme.bodyLarge!,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(widget.values[_start].toString()),
Text(widget.values[_end].toString()),
],
),
),
],
),
],
),
Row(
children: [
Expanded(
child: RangeSlider(
values: RangeValues(
_start.toDouble(),
_end.toDouble(),
),
max: widget.values.length.toDouble() - 1,
divisions: widget.values.length - 1,
onChanged: (value) {
setState(() {
_start = value.start.round();
_end = value.end.round();
});
},
),
),
],
),
],
),
),
actionsPadding: Dimens.dialogActionsPadding,
actions: [