After updating my app to Material3 (with no changes to the app code itself), a strange thing is happening: the snackbar appears off-center, and partially off the screen.
After lots of investigation, I discovered this: if I set MaterialApp(theme: ThemeData(useMaterial3: false)), the snackbar returns to appearing normally (centered in the screen).
Likewise, if I leave useMaterial3: true and remove the MaterialApp(locale: const Locale("he")) definition, the snackbar also returns to appearing normally (centered in the screen). But, with useMaterial3=true and locale=he the snackbar appears in the wrong place (before changing the app to Material3, the snackbar worked as expected).
The app's MaterialApp definition is below, as is the snackbar code.
Note: When I use the Widget Inspector, I can see an empty rectangular area that is pushing the snackbar over to the right, but that rectangular area is not defined anywhere in my code, and it does not respond to clicks in the Widget Inspector, and it does not appear in the widget tree shown in the Widget Inspector. See the image I prepared, below.
(Side note, which you can see in the image: in the Widget Inspector mode, it shows a floating Search button that does not exist in my code and that does not appear when the application itself is running!).
This really appears to me to be a bug in Flutter's framework code (although I'd be happy to hear otherwise) because there is no change in the snackbar code itself (or any other actual code in the app), just the MaterialApp initialization specs. I'd be happy to hear any suggestions, including how to report this to the Flutter team (if you think it is a Flutter bug).
Stateless widget that launches the app:
@override
Widget build(BuildContext context) {
return MaterialApp(
title: txtAppTitle,
debugShowCheckedModeBanner: false,
theme: ThemeData(
useMaterial3: true,
primarySwatch: materialColor(colorDarkBlue),
colorScheme: ColorScheme.fromSeed(
seedColor: materialColor(colorDarkBlue),
primary: materialColor(colorDarkBlue),
),
appBarTheme: const AppBarTheme(
backgroundColor: colorLightBlue,
foregroundColor: colorWhite,
systemOverlayStyle: SystemUiOverlayStyle(
systemNavigationBarColor: colorLightGrey,
systemNavigationBarDividerColor: colorDarkGrey,
systemNavigationBarIconBrightness: Brightness.dark)),
materialTapTargetSize: MaterialTapTargetSize.padded,
),
locale: const Locale("he"),
supportedLocales: const [
Locale('he'),
Locale('en'),
],
localizationsDelegates: const [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
home: const HomeScreen(),
);
}
Snackbar code:
SnackBar snackBar = SnackBar(
behavior: SnackBarBehavior.floating,
duration: const Duration(seconds: 3),
width: 330,
padding: const EdgeInsetsDirectional.fromSTEB(5, 6, 5, 6),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(35.0),
),
content: Text(
thisMessage,
style: const TextStyle(fontSize: 15, color: colorWhite),
textAlign: TextAlign.center,
),
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
Appearance comparison, with locale=he and useMaterial3=true versus when either of these is set differently (i.e., locale=en or useMaterial3=false):
