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.
This commit is contained in:
parent
5b64fe14b3
commit
dc0d18562f
2 changed files with 48 additions and 10 deletions
|
|
@ -83,20 +83,27 @@ class QuickAddSheet extends StatelessWidget {
|
||||||
),
|
),
|
||||||
if (state.expanded) const _MoreSection(),
|
if (state.expanded) const _MoreSection(),
|
||||||
const SizedBox(height: 8),
|
const SizedBox(height: 8),
|
||||||
Row(
|
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: [
|
children: [
|
||||||
TextButton(
|
TextButton(
|
||||||
onPressed: () => Navigator.of(context).pop(),
|
onPressed: () => Navigator.of(context).pop(),
|
||||||
child: Text(t.quickAdd.cancel),
|
child: Text(t.quickAdd.cancel),
|
||||||
),
|
),
|
||||||
if (state.addedCount > 0) ...[
|
|
||||||
const SizedBox(width: 8),
|
|
||||||
Text(
|
|
||||||
t.quickAdd.addedCount(n: state.addedCount),
|
|
||||||
style: Theme.of(context).textTheme.bodySmall,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
const Spacer(),
|
|
||||||
TextButton(
|
TextButton(
|
||||||
key: const Key('quickAdd.saveAndAddAnother'),
|
key: const Key('quickAdd.saveAndAddAnother'),
|
||||||
onPressed: state.submitting
|
onPressed: state.submitting
|
||||||
|
|
@ -104,7 +111,6 @@ class QuickAddSheet extends StatelessWidget {
|
||||||
: cubit.submitAndAddAnother,
|
: cubit.submitAndAddAnother,
|
||||||
child: Text(t.quickAdd.saveAndAddAnother),
|
child: Text(t.quickAdd.saveAndAddAnother),
|
||||||
),
|
),
|
||||||
const SizedBox(width: 8),
|
|
||||||
FilledButton(
|
FilledButton(
|
||||||
key: const Key('quickAdd.save'),
|
key: const Key('quickAdd.save'),
|
||||||
onPressed: state.submitting ? null : cubit.submit,
|
onPressed: state.submitting ? null : cubit.submit,
|
||||||
|
|
|
||||||
|
|
@ -20,8 +20,11 @@ import 'package:tane/ui/inventory_list_screen.dart';
|
||||||
import 'package:tane/ui/market_screen.dart';
|
import 'package:tane/ui/market_screen.dart';
|
||||||
import 'package:tane/ui/plantares_screen.dart';
|
import 'package:tane/ui/plantares_screen.dart';
|
||||||
import 'package:tane/ui/profile_screen.dart';
|
import 'package:tane/ui/profile_screen.dart';
|
||||||
|
import 'package:tane/ui/quick_add_sheet.dart';
|
||||||
import 'package:tane/ui/sales_screen.dart';
|
import 'package:tane/ui/sales_screen.dart';
|
||||||
import 'package:tane/ui/settings_screen.dart';
|
import 'package:tane/ui/settings_screen.dart';
|
||||||
|
import 'package:tane/state/quick_add_cubit.dart';
|
||||||
|
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||||
|
|
||||||
import '../support/test_support.dart';
|
import '../support/test_support.dart';
|
||||||
|
|
||||||
|
|
@ -322,6 +325,35 @@ void main() {
|
||||||
await disposeTree(tester);
|
await disposeTree(tester);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// The quick-add sheet's action row (Cancel / "Save & add another" / Save) is
|
||||||
|
// the one modal we DO guard: unlike the height concern that excludes sheets
|
||||||
|
// above, this is a *horizontal* overflow (three text buttons + the longest
|
||||||
|
// "Guardar y añadir otra" label don't fit a narrow phone). We give it a
|
||||||
|
// bounded height by pumping it inside a Scaffold body, so only the width
|
||||||
|
// constraint bites — reproducing the reported "Guardar cut off" report.
|
||||||
|
for (final locale in longLocales) {
|
||||||
|
testWidgets('quick-add action row fits a small screen (${locale.languageCode})',
|
||||||
|
(tester) async {
|
||||||
|
final db = newTestDatabase();
|
||||||
|
addTearDown(db.close);
|
||||||
|
final repo = newTestRepository(db);
|
||||||
|
await pumpSmall(
|
||||||
|
tester,
|
||||||
|
wrapScreen(
|
||||||
|
repository: repo,
|
||||||
|
locale: locale,
|
||||||
|
child: Scaffold(
|
||||||
|
body: BlocProvider(
|
||||||
|
create: (_) => QuickAddCubit(repo),
|
||||||
|
child: const QuickAddSheet(),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
await disposeTree(tester);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// NOTE: the variety-detail screen is deliberately NOT overflow-checked here.
|
// NOTE: the variety-detail screen is deliberately NOT overflow-checked here.
|
||||||
// It reports a ~2px overflow on a RenderFlex that is already DISPOSED/DEFUNCT
|
// It reports a ~2px overflow on a RenderFlex that is already DISPOSED/DEFUNCT
|
||||||
// — a transient stale frame while its cubit's Drift stream rebuilds during
|
// — a transient stale frame while its cubit's Drift stream rebuilds during
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue