fix(inventory): tappable photo dots + non-truncated quantity scale
- Photo carousel dots are now tappable (jump to that photo) with a larger hit area, so you can browse all images even when swiping the small thumbnail is awkward. - The quantity unit scale is a Wrap instead of a horizontal scroll, so every unit stays visible instead of being cut off.
This commit is contained in:
parent
a69047326e
commit
46ef2c61cd
2 changed files with 35 additions and 21 deletions
|
|
@ -154,22 +154,19 @@ class _QuantityPickerState extends State<QuantityPicker> {
|
|||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
SizedBox(
|
||||
height: 76,
|
||||
child: ListView.separated(
|
||||
scrollDirection: Axis.horizontal,
|
||||
itemCount: kinds.length,
|
||||
separatorBuilder: (_, _) => const SizedBox(width: 4),
|
||||
itemBuilder: (context, i) {
|
||||
final kind = kinds[i];
|
||||
return _ScaleItem(
|
||||
// Wrap (not a horizontal scroll) so every unit stays visible.
|
||||
Wrap(
|
||||
spacing: 4,
|
||||
runSpacing: 4,
|
||||
children: [
|
||||
for (final kind in kinds)
|
||||
_ScaleItem(
|
||||
kind: kind,
|
||||
label: unitLabel(t, kind),
|
||||
selected: _kind == kind,
|
||||
onTap: () => _select(kind),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
if (_kind?.countable ?? false) ...[
|
||||
const SizedBox(height: 8),
|
||||
|
|
|
|||
|
|
@ -927,7 +927,16 @@ class _PhotoGalleryState extends State<_PhotoGallery> {
|
|||
),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
if (photos.length > 1) _Dots(count: photos.length, active: page),
|
||||
if (photos.length > 1)
|
||||
_Dots(
|
||||
count: photos.length,
|
||||
active: page,
|
||||
onTap: (i) => _controller.animateToPage(
|
||||
i,
|
||||
duration: const Duration(milliseconds: 250),
|
||||
curve: Curves.easeInOut,
|
||||
),
|
||||
),
|
||||
TextButton.icon(
|
||||
key: const Key('photo.add'),
|
||||
onPressed: () => _addPhoto(cubit),
|
||||
|
|
@ -968,10 +977,11 @@ class _CircleIconButton extends StatelessWidget {
|
|||
}
|
||||
|
||||
class _Dots extends StatelessWidget {
|
||||
const _Dots({required this.count, required this.active});
|
||||
const _Dots({required this.count, required this.active, this.onTap});
|
||||
|
||||
final int count;
|
||||
final int active;
|
||||
final ValueChanged<int>? onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
|
@ -979,13 +989,20 @@ class _Dots extends StatelessWidget {
|
|||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
for (var i = 0; i < count; i++)
|
||||
Container(
|
||||
width: 6,
|
||||
height: 6,
|
||||
margin: const EdgeInsets.symmetric(horizontal: 2),
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: i == active ? seedGreen : Colors.black26,
|
||||
GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: onTap == null ? null : () => onTap!(i),
|
||||
child: Padding(
|
||||
// Bigger, tappable hit area around each dot.
|
||||
padding: const EdgeInsets.all(6),
|
||||
child: Container(
|
||||
width: 8,
|
||||
height: 8,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: i == active ? seedGreen : Colors.black26,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue