Skip to content

Commit bc53e62

Browse files
blerouxbleroux
authored
Add error message and documentation when a SnackBar is off screen (#102073)
1 parent 5764b5d commit bc53e62

File tree

4 files changed

+221
-0
lines changed

4 files changed

+221
-0
lines changed

‎examples/api/lib/material/scaffold/scaffold_messenger_state.show_snack_bar.1.dart‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
// Flutter code sample for SnackBar
6+
7+
import 'package:flutter/material.dart';
8+
9+
void main() => runApp(const SnackBarApp());
10+
11+
class SnackBarApp extends StatelessWidget {
12+
const SnackBarApp({super.key});
13+
14+
@override
15+
Widget build(BuildContext context) {
16+
return const MaterialApp(
17+
home: SnackBarExample(),
18+
);
19+
}
20+
}
21+
22+
class SnackBarExample extends StatefulWidget {
23+
const SnackBarExample({super.key});
24+
25+
@override
26+
State<SnackBarExample> createState() => _SnackBarExampleState();
27+
}
28+
29+
class _SnackBarExampleState extends State<SnackBarExample> {
30+
bool _largeLogo = false;
31+
32+
@override
33+
Widget build(BuildContext context) {
34+
return Scaffold(
35+
appBar: AppBar(title: const Text('SnackBar Sample')),
36+
body: Padding(
37+
padding: const EdgeInsets.all(8.0),
38+
child: Column(
39+
children: <Widget>[
40+
ElevatedButton(
41+
onPressed: () {
42+
const SnackBar snackBar = SnackBar(
43+
content: Text('A SnackBar has been shown.'),
44+
behavior: SnackBarBehavior.floating,
45+
);
46+
ScaffoldMessenger.of(context).showSnackBar(snackBar);
47+
},
48+
child: const Text('Show SnackBar'),
49+
),
50+
const SizedBox(height: 8.0),
51+
ElevatedButton(
52+
onPressed: () {
53+
setState(() => _largeLogo = !_largeLogo);
54+
},
55+
child: Text(_largeLogo ? 'Shrink Logo' : 'Grow Logo'),
56+
),
57+
],
58+
),
59+
),
60+
// A floating [SnackBar] is positioned above [Scaffold.floatingActionButton].
61+
// If the Widget provided to the floatingActionButton slot takes up too much space
62+
// for the SnackBar to be visible, an error will be thrown.
63+
floatingActionButton: Container(
64+
constraints: BoxConstraints.tightFor(
65+
width: 150,
66+
height: _largeLogo ? double.infinity : 150,
67+
),
68+
decoration: const BoxDecoration(
69+
color: Colors.blueGrey,
70+
borderRadius: BorderRadius.all(Radius.circular(20)),
71+
),
72+
child: const FlutterLogo(),
73+
),
74+
);
75+
}
76+
}

‎examples/api/test/material/scaffold/scaffold_messenger_state.show_snack_bar.1_test.dart‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import 'package:flutter/material.dart';
6+
import 'package:flutter_api_samples/material/scaffold/scaffold_messenger_state.show_snack_bar.1.dart' as example;
7+
import 'package:flutter_test/flutter_test.dart';
8+
9+
void main() {
10+
testWidgets('Floating SnackBar is visible', (WidgetTester tester) async {
11+
await tester.pumpWidget(
12+
const example.SnackBarApp(),
13+
);
14+
15+
final Finder buttonFinder = find.byType(ElevatedButton);
16+
await tester.tap(buttonFinder.first);
17+
// Have the SnackBar fully animate out.
18+
await tester.pumpAndSettle();
19+
20+
final Finder snackBarFinder = find.byType(SnackBar);
21+
expect(snackBarFinder, findsOneWidget);
22+
23+
// Grow logo to send SnackBar off screen.
24+
await tester.tap(buttonFinder.last);
25+
await tester.pumpAndSettle();
26+
27+
final AssertionError exception = tester.takeException() as AssertionError;
28+
const String message = 'Floating SnackBar presented off screen.\n'
29+
'A SnackBar with behavior property set to SnackBarBehavior.floating is fully '
30+
'or partially off screen because some or all the widgets provided to '
31+
'Scaffold.floatingActionButton, Scaffold.persistentFooterButtons and '
32+
'Scaffold.bottomNavigationBar take up too much vertical space.\n'
33+
'Consider constraining the size of these widgets to allow room for the SnackBar to be visible.';
34+
expect(exception.message, message);
35+
});
36+
}

‎packages/flutter/lib/src/material/scaffold.dart‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,23 @@ class ScaffoldMessengerState extends State<ScaffoldMessenger> with TickerProvide
264264
///
265265
/// ** See code in examples/api/lib/material/scaffold/scaffold_messenger_state.show_snack_bar.0.dart **
266266
/// {@end-tool}
267+
///
268+
/// ## Relative positioning of floating SnackBars
269+
///
270+
/// A [SnackBar] with [SnackBar.behavior] set to [SnackBarBehavior.floating] is
271+
/// positioned above the widgets provided to [Scaffold.floatingActionButton],
272+
/// [Scaffold.persistentFooterButtons], and [Scaffold.bottomNavigationBar].
273+
/// If some or all of these widgets take up enough space such that the SnackBar
274+
/// would not be visible when positioned above them, an error will be thrown.
275+
/// In this case, consider constraining the size of these widgets to allow room for
276+
/// the SnackBar to be visible.
277+
///
278+
/// {@tool dartpad}
279+
/// Here is an example showing that a floating [SnackBar] appears above [Scaffold.floatingActionButton].
280+
///
281+
/// ** See code in examples/api/lib/material/scaffold/scaffold_messenger_state.show_snack_bar.1.dart **
282+
/// {@end-tool}
283+
///
267284
ScaffoldFeatureController<SnackBar, SnackBarClosedReason> showSnackBar(SnackBar snackBar) {
268285
assert(
269286
_scaffolds.isNotEmpty,
@@ -1118,6 +1135,32 @@ class _ScaffoldLayout extends MultiChildLayoutDelegate {
11181135

11191136
final double xOffset = hasCustomWidth ? (size.width - snackBarWidth!) / 2 : 0.0;
11201137
positionChild(_ScaffoldSlot.snackBar, Offset(xOffset, snackBarYOffsetBase - snackBarSize.height));
1138+
1139+
assert((){
1140+
// Whether a floating SnackBar has been offsetted too high.
1141+
//
1142+
// To improve the developper experience, this assert is done after the call to positionChild.
1143+
// if we assert sooner the SnackBar is visible because its defaults position is (0,0) and
1144+
// it can cause confusion to the user as the error message states that the SnackBar is off screen.
1145+
if (isSnackBarFloating) {
1146+
final bool snackBarVisible = (snackBarYOffsetBase - snackBarSize.height) > 0;
1147+
if (!snackBarVisible) {
1148+
throw FlutterError.fromParts(<DiagnosticsNode>[
1149+
ErrorSummary('Floating SnackBar presented off screen.'),
1150+
ErrorDescription(
1151+
'A SnackBar with behavior property set to SnackBarBehavior.floating is fully '
1152+
'or partially off screen because some or all the widgets provided to '
1153+
'Scaffold.floatingActionButton, Scaffold.persistentFooterButtons and '
1154+
'Scaffold.bottomNavigationBar take up too much vertical space.\n'
1155+
),
1156+
ErrorHint(
1157+
'Consider constraining the size of these widgets to allow room for the SnackBar to be visible.',
1158+
),
1159+
]);
1160+
}
1161+
}
1162+
return true;
1163+
}());
11211164
}
11221165

11231166
if (hasChild(_ScaffoldSlot.statusBar)) {

‎packages/flutter/test/material/snack_bar_test.dart‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1652,6 +1652,72 @@ void main() {
16521652
},
16531653
);
16541654

1655+
void openFloatingSnackBar(WidgetTester tester) {
1656+
final ScaffoldMessengerState scaffoldMessengerState = tester.state(find.byType(ScaffoldMessenger));
1657+
scaffoldMessengerState.showSnackBar(
1658+
const SnackBar(
1659+
content: Text('SnackBar text'),
1660+
behavior: SnackBarBehavior.floating,
1661+
),
1662+
);
1663+
}
1664+
1665+
void expectSnackBarNotVisibleError(WidgetTester tester) {
1666+
final AssertionError exception = tester.takeException() as AssertionError;
1667+
const String message = 'Floating SnackBar presented off screen.\n'
1668+
'A SnackBar with behavior property set to SnackBarBehavior.floating is fully '
1669+
'or partially off screen because some or all the widgets provided to '
1670+
'Scaffold.floatingActionButton, Scaffold.persistentFooterButtons and '
1671+
'Scaffold.bottomNavigationBar take up too much vertical space.\n'
1672+
'Consider constraining the size of these widgets to allow room for the SnackBar to be visible.';
1673+
expect(exception.message, message);
1674+
}
1675+
1676+
testWidgets('Snackbar with SnackBarBehavior.floating will assert when offsetted too high by a large Scaffold.floatingActionButton', (WidgetTester tester) async {
1677+
// Regression test for https://github.com/flutter/flutter/issues/84263
1678+
await tester.pumpWidget(
1679+
MaterialApp(
1680+
home: Scaffold(
1681+
floatingActionButton: Container(),
1682+
),
1683+
),
1684+
);
1685+
1686+
openFloatingSnackBar(tester);
1687+
await tester.pumpAndSettle(); // Have the SnackBar fully animate out.
1688+
expectSnackBarNotVisibleError(tester);
1689+
});
1690+
1691+
testWidgets('Snackbar with SnackBarBehavior.floating will assert when offsetted too high by a large Scaffold.persistentFooterButtons', (WidgetTester tester) async {
1692+
// Regression test for https://github.com/flutter/flutter/issues/84263
1693+
await tester.pumpWidget(
1694+
const MaterialApp(
1695+
home: Scaffold(
1696+
persistentFooterButtons: <Widget>[SizedBox(height: 1000)],
1697+
),
1698+
),
1699+
);
1700+
1701+
openFloatingSnackBar(tester);
1702+
await tester.pumpAndSettle(); // Have the SnackBar fully animate out.
1703+
expectSnackBarNotVisibleError(tester);
1704+
});
1705+
1706+
testWidgets('Snackbar with SnackBarBehavior.floating will assert when offsetted too high by a large Scaffold.bottomNavigationBar', (WidgetTester tester) async {
1707+
// Regression test for https://github.com/flutter/flutter/issues/84263
1708+
await tester.pumpWidget(
1709+
const MaterialApp(
1710+
home: Scaffold(
1711+
bottomNavigationBar: SizedBox(height: 1000),
1712+
),
1713+
),
1714+
);
1715+
1716+
openFloatingSnackBar(tester);
1717+
await tester.pumpAndSettle(); // Have the SnackBar fully animate out.
1718+
expectSnackBarNotVisibleError(tester);
1719+
});
1720+
16551721
testWidgets(
16561722
'SnackBar has correct end padding when it contains an action with fixed behavior',
16571723
(WidgetTester tester) async {

0 commit comments

Comments
 (0)