Unverified Commit 97e0a058 authored by Bruno Leroux's avatar Bruno Leroux Committed by GitHub

Fix floating SnackBar throws when FAB is on the top (#129274)

## Description

This PR updates how a floating snack bar is positionned when a `Scaffold` defines a FAB with `Scaffold.floatingActionButtonLocation` sets to one of the top locations.

**Before this PR:**
- When a FAB location is set to the top of the `Scaffold`, a floating `SnackBar` can't be displayed and an assert throws in debug mode.

**After this PR:**
- When a FAB location is set to the top of the `Scaffold`, a floating `SnackBar` will be displayed at the bottom of the screen, above a `NavigationBar` for instance (the top FAB is ignored when computing the floating snack bar position).

![image](https://github.com/flutter/flutter/assets/840911/08fcee6c-b286-4749-ad0b-ba09e653bd94)

## Motivation

This is a edge case related to a discrepancy between the Material spec and the Flutter `Scaffold` customizability:
- Material spec states that a floating `SnackBar` should be displayed above a FAB. But, in Material spec, FABs are expected to be on the bottom.
- Since https://github.com/flutter/flutter/issues/51465, Flutter `Scaffold` makes it valid to show a FAB on the top of the `Scaffold`.

## Related Issue

fixes https://github.com/flutter/flutter/issues/128150

## Tests

Adds 1 test.
parent 283437a2
......@@ -1142,7 +1142,31 @@ class _ScaffoldLayout extends MultiChildLayoutDelegate {
}
final double snackBarYOffsetBase;
if (floatingActionButtonRect.size != Size.zero && isSnackBarFloating) {
final bool showAboveFab = switch (currentFloatingActionButtonLocation) {
FloatingActionButtonLocation.startTop
|| FloatingActionButtonLocation.centerTop
|| FloatingActionButtonLocation.endTop
|| FloatingActionButtonLocation.miniStartTop
|| FloatingActionButtonLocation.miniCenterTop
|| FloatingActionButtonLocation.miniEndTop => false,
FloatingActionButtonLocation.startDocked
|| FloatingActionButtonLocation.startFloat
|| FloatingActionButtonLocation.centerDocked
|| FloatingActionButtonLocation.centerFloat
|| FloatingActionButtonLocation.endContained
|| FloatingActionButtonLocation.endDocked
|| FloatingActionButtonLocation.endFloat
|| FloatingActionButtonLocation.miniStartDocked
|| FloatingActionButtonLocation.miniStartFloat
|| FloatingActionButtonLocation.miniCenterDocked
|| FloatingActionButtonLocation.miniCenterFloat
|| FloatingActionButtonLocation.miniEndDocked
|| FloatingActionButtonLocation.miniEndFloat => true,
FloatingActionButtonLocation() => throw FlutterError(
'$currentFloatingActionButtonLocation is an unknown FloatingActionButtonLocation value.'
),
};
if (floatingActionButtonRect.size != Size.zero && isSnackBarFloating && showAboveFab) {
snackBarYOffsetBase = floatingActionButtonRect.top;
} else {
// SnackBarBehavior.fixed applies a SafeArea automatically.
......
......@@ -12,19 +12,22 @@ import 'theme.dart';
/// Defines where a [SnackBar] should appear within a [Scaffold] and how its
/// location should be adjusted when the scaffold also includes a
/// [FloatingActionButton] or a [BottomNavigationBar].
/// [FloatingActionButton], a [BottomNavigationBar], or a [NavigationBar].
enum SnackBarBehavior {
/// Fixes the [SnackBar] at the bottom of the [Scaffold].
///
/// The exception is that the [SnackBar] will be shown above a
/// [BottomNavigationBar]. Additionally, the [SnackBar] will cause other
/// non-fixed widgets inside [Scaffold] to be pushed above (for example, the
/// [FloatingActionButton]).
/// [BottomNavigationBar] or a [NavigationBar]. Additionally, the [SnackBar]
/// will cause other non-fixed widgets inside [Scaffold] to be pushed above
/// (for example, the [FloatingActionButton]).
fixed,
/// This behavior will cause [SnackBar] to be shown above other widgets in the
/// [Scaffold]. This includes being displayed above a [BottomNavigationBar]
/// and a [FloatingActionButton].
/// [Scaffold]. This includes being displayed above a [BottomNavigationBar] or
/// a [NavigationBar], and a [FloatingActionButton] when its location is on the
/// bottom. When the floating action button location is on the top, this behavior
/// will cause the [SnackBar] to be shown above other widgets in the [Scaffold]
/// except the floating action button.
///
/// See <https://material.io/design/components/snackbars.html> for more details.
floating,
......
......@@ -2071,6 +2071,59 @@ void main() {
},
);
testWidgets(
'${SnackBarBehavior.floating} should not align SnackBar with the top of FloatingActionButton '
'when Scaffold has a FloatingActionButton and floatingActionButtonLocation is set to a top position',
(WidgetTester tester) async {
Future<void> pumpApp({required FloatingActionButtonLocation fabLocation}) async {
return tester.pumpWidget(MaterialApp(
home: Scaffold(
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.send),
onPressed: () {},
),
floatingActionButtonLocation: fabLocation,
body: Builder(
builder: (BuildContext context) {
return GestureDetector(
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: const Text('I am a snack bar.'),
duration: const Duration(seconds: 2),
action: SnackBarAction(label: 'ACTION', onPressed: () {}),
behavior: SnackBarBehavior.floating,
));
},
child: const Text('X'),
);
},
),
),
));
}
const List<FloatingActionButtonLocation> topLocations = <FloatingActionButtonLocation>[
FloatingActionButtonLocation.startTop,
FloatingActionButtonLocation.centerTop,
FloatingActionButtonLocation.endTop,
FloatingActionButtonLocation.miniStartTop,
FloatingActionButtonLocation.miniCenterTop,
FloatingActionButtonLocation.miniEndTop,
];
for (final FloatingActionButtonLocation location in topLocations) {
await pumpApp(fabLocation: location);
await tester.tap(find.text('X'));
await tester.pumpAndSettle(); // Have the SnackBar fully animate out.
final Offset snackBarBottomLeft = tester.getBottomLeft(find.byType(SnackBar));
expect(snackBarBottomLeft.dy, 600); // Device height is 600.
}
},
);
testWidgets(
'${SnackBarBehavior.fixed} should align SnackBar with the top of BottomNavigationBar '
'when Scaffold has a BottomNavigationBar and FloatingActionButton',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment