tane/apps/app_seeds/lib/ui/quick_add_sheet.dart
vjrj dc0d18562f fix(quick-add): wrap sheet action row to prevent overflow on small screens
The Cancel / Save-and-add-another / Save actions were a fixed Row that
could not shrink, so on narrow phones and long locales (es/pt/de/fr) the
buttons overflowed the right edge (the clipped 'Guardar'). Replace it with
an OverflowBar that wraps onto stacked, end-aligned lines when they don't
fit; move the added-count onto its own line above.

Guard it in small_screen_overflow_test.dart across the long locales.
2026-07-16 00:34:42 +02:00

219 lines
7.2 KiB
Dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../data/variety_repository.dart';
import '../i18n/strings.g.dart';
import '../state/quick_add_cubit.dart';
import 'photo_pick.dart';
import 'quantity_picker.dart';
Future<void> showQuickAddSheet(
BuildContext context, {
required VarietyRepository repository,
}) {
return showModalBottomSheet<void>(
context: context,
isScrollControlled: true,
builder: (_) => BlocProvider(
create: (_) => QuickAddCubit(repository),
child: const QuickAddSheet(),
),
);
}
class QuickAddSheet extends StatelessWidget {
const QuickAddSheet({super.key});
@override
Widget build(BuildContext context) {
final t = context.t;
return BlocConsumer<QuickAddCubit, QuickAddState>(
listenWhen: (prev, curr) => !prev.submitted && curr.submitted,
listener: (context, state) => Navigator.of(context).pop(),
builder: (context, state) {
final cubit = context.read<QuickAddCubit>();
return Padding(
padding: EdgeInsets.only(
left: 16,
right: 16,
top: 16,
bottom: MediaQuery.of(context).viewInsets.bottom + 16,
),
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
t.quickAdd.title,
style: Theme.of(context).textTheme.titleLarge,
),
const SizedBox(height: 12),
const _LabelField(),
const SizedBox(height: 16),
LotTypeSelector(
value: state.lotType,
onChanged: (type) {
cubit
..setLotType(type)
..setQuantity(null);
},
),
const SizedBox(height: 12),
Text(
t.quickAdd.quantity,
style: Theme.of(context).textTheme.labelLarge,
),
const SizedBox(height: 8),
QuantityPicker(
type: state.lotType,
value: state.quantity,
onChanged: cubit.setQuantity,
),
const SizedBox(height: 8),
Align(
alignment: AlignmentDirectional.centerStart,
child: TextButton.icon(
onPressed: cubit.toggleExpanded,
icon: Icon(
state.expanded ? Icons.expand_less : Icons.expand_more,
),
label: Text(t.quickAdd.more),
),
),
if (state.expanded) const _MoreSection(),
const SizedBox(height: 8),
if (state.addedCount > 0)
Padding(
padding: const EdgeInsetsDirectional.only(bottom: 4),
child: Text(
t.quickAdd.addedCount(n: state.addedCount),
style: Theme.of(context).textTheme.bodySmall,
),
),
// OverflowBar wraps the actions onto stacked lines when the
// labels don't fit the width (small phones, long locales),
// instead of clipping with a RenderFlex overflow.
OverflowBar(
alignment: MainAxisAlignment.end,
spacing: 8,
overflowSpacing: 4,
overflowAlignment: OverflowBarAlignment.end,
children: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: Text(t.quickAdd.cancel),
),
TextButton(
key: const Key('quickAdd.saveAndAddAnother'),
onPressed: state.submitting
? null
: cubit.submitAndAddAnother,
child: Text(t.quickAdd.saveAndAddAnother),
),
FilledButton(
key: const Key('quickAdd.save'),
onPressed: state.submitting ? null : cubit.submit,
child: Text(t.quickAdd.save),
),
],
),
],
),
),
);
},
);
}
}
/// The name field, with its own controller so "save & add another" can clear
/// it and refocus without tearing down the sheet.
class _LabelField extends StatefulWidget {
const _LabelField();
@override
State<_LabelField> createState() => _LabelFieldState();
}
class _LabelFieldState extends State<_LabelField> {
final _controller = TextEditingController();
final _focusNode = FocusNode();
@override
void dispose() {
_controller.dispose();
_focusNode.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final t = context.t;
final cubit = context.read<QuickAddCubit>();
return BlocListener<QuickAddCubit, QuickAddState>(
listenWhen: (prev, curr) => prev.addedCount != curr.addedCount,
listener: (context, _) {
_controller.clear();
_focusNode.requestFocus();
},
child: BlocBuilder<QuickAddCubit, QuickAddState>(
buildWhen: (prev, curr) => prev.showLabelError != curr.showLabelError,
builder: (context, state) => TextField(
key: const Key('quickAdd.labelField'),
controller: _controller,
focusNode: _focusNode,
autofocus: true,
textInputAction: TextInputAction.done,
textCapitalization: TextCapitalization.sentences,
decoration: InputDecoration(
labelText: t.quickAdd.labelField,
errorText: state.showLabelError ? t.quickAdd.labelRequired : null,
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(8)),
),
),
onChanged: cubit.labelChanged,
onSubmitted: (_) => cubit.submit(),
),
),
);
}
}
class _MoreSection extends StatelessWidget {
const _MoreSection();
@override
Widget build(BuildContext context) {
final t = context.t;
final state = context.watch<QuickAddCubit>().state;
final cubit = context.read<QuickAddCubit>();
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(height: 8),
if (state.photoBytes != null)
ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.memory(
state.photoBytes!,
height: 120,
fit: BoxFit.cover,
),
),
Align(
alignment: AlignmentDirectional.centerStart,
child: OutlinedButton.icon(
onPressed: () async {
final bytes = await pickPhoto(context);
if (bytes != null) cubit.photoPicked(bytes);
},
icon: const Icon(Icons.photo_camera_outlined),
label: Text(t.quickAdd.addPhoto),
),
),
],
);
}
}