mirror of
https://github.com/vodemn/m3_lightmeter.git
synced 2024-11-21 15:00:40 +00:00
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:
parent
6566108994
commit
19fc039723
3 changed files with 139 additions and 128 deletions
|
@ -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),
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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: [
|
||||
|
|
|
@ -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: [
|
||||
|
|
Loading…
Reference in a new issue