flutter
flutter copied to clipboard
[3.7][Android] Animation for modal bottom sheet stops working on some devices
Hi,
after the update to 3.7 the modal bottom sheets don't have any open animations.
There is just one weird thing as well:
- Debug mode: Its working like expected
- Profile mode (real device): No animation
- Release mode with SKSL (real device): No animation
- macOS: Its working like expected
I didn't test it without SKSL.
Please try this without using SkSL. We no longer recommend using SkSL caching on Android:
See https://docs.flutter.dev/perf/shader
Unfortunately, this approach doesn’t work well on Android due to precompiled shaders being device or GPU-specific. The Android hardware ecosystem is large enough that the GPU-specific precompiled shaders bundled with an application will work on only a small subset of devices, and will likely make jank worse on the other devices, or even create rendering errors.
Please try this without using SkSL. We no longer recommend using SkSL caching on Android:
See https://docs.flutter.dev/perf/shader
Unfortunately, this approach doesn’t work well on Android due to precompiled shaders being device or GPU-specific. The Android hardware ecosystem is large enough that the GPU-specific precompiled shaders bundled with an application will work on only a small subset of devices, and will likely make jank worse on the other devices, or even create rendering errors.
- I deleted all data of my installed app and deinstalled it.
- Build the latest version of my app without the reference to a SKSL file
- Released it to the play store as internal test track
- The issue is still the same
I noticed one weird behaviour:
- I open the app and trigger the open modal bottom sheet animation pretty fast after start
- It's working for this part of the UI and I can open it with animations
- I navigate to the next bottom nav bar screen and trigger other open modal bottom sheet animations
It breaks after that and does not work anymore, it also not works when I navigate to the second screen first and trigger the animations from the first screen.
It worked perfectly fine always before the update.
Hi @Sesa1988, please provide a minimal complete reproducible code sample so that we can investigate the issue.
If you could also share some recordings of the issue, that would be great.
Thank you
Hi @Sesa1988, please provide a minimal complete reproducible code sample so that we can investigate the issue.
If you could also share some recordings of the issue, that would be great.
Thank you
Hi @danagbemava-nc @jonahwilliams ,
here is the repo: https://github.com/Sesa1988/flutter_no_drawer_animation
- You have to run it on a real device, check the readme for reproduction steps.
- The same happens on my real app when I just switch tabs in the bottom navigation as well and
- It worked like expected without any issues on previous versions
- I think sometimes you don't have to navigate anywhere at least in my real app to reproduce it, most of the time you have
https://user-images.githubusercontent.com/26410357/214576634-3d46cc03-7fea-41f8-9a99-1d0a898b5da6.mp4
Hi @Sesa1988, I cannot seem to reproduce the issue using your sample and the steps outlined. See the recording below. What device are you testing on? I tested on a Pixel 7
recording
https://user-images.githubusercontent.com/88313112/214784220-bf640747-9050-4a1c-b155-a285358c5d52.mp4
Hi @danagbemava-nc
I tested it on a Samsung Galaxy 22+ and latest updates.
I had a version with shaders installed before, could this be an issue? If I remember correctly, I was also able to reproduce this on a pixel emulator, at least sometimes, it felt pretty random.
EDIT: I tested it on a S20+ and there is no issue. Maybe its something related to resolution or refresh rate.
Hi @Sesa1988, can you test this on the master channel to see if the issue still reproduces there?
If it does, please provide the updated output of flutter doctor -v
.
Thank you
Hi @Sesa1988, can you test this on the master channel to see if the issue still reproduces there?
If it does, please provide the updated output of
flutter doctor -v
.Thank you
Hi @danagbemava-nc , sure I will do that now.
Hi @Sesa1988, can you test this on the master channel to see if the issue still reproduces there?
If it does, please provide the updated output of
flutter doctor -v
.Thank you
flutter doctor -v
[!] Flutter (Channel master, 3.7.0-27.0.pre.25, on macOS 13.0 22A380 darwin-x64, locale en-DE)
• Flutter version 3.7.0-27.0.pre.25 on channel master at /Users/UserOne/Development/flutter
! Warning: `flutter` on your path resolves to /Users/userone/Development/flutter/bin/flutter, which is not inside
your current Flutter SDK checkout at /Users/UserOne/Development/flutter. Consider adding
/Users/UserOne/Development/flutter/bin to the front of your path.
! Warning: `dart` on your path resolves to /Users/userone/Development/flutter/bin/dart, which is not inside your
current Flutter SDK checkout at /Users/UserOne/Development/flutter. Consider adding
/Users/UserOne/Development/flutter/bin to the front of your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision c9affdba9d (9 hours ago), 2023-01-25 21:25:02 -0800
• Engine revision 8f1e5dc1b1
• Dart version 3.0.0 (build 3.0.0-157.0.dev)
• DevTools version 2.20.1
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to
perform update checks and upgrades.
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
• Android SDK at /Users/userone/Library/Android/sdk
• Platform android-33, build-tools 33.0.1
• Java binary at: /Users/userone/Library/Java/JavaVirtualMachines/corretto-1.8.0_302/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment Corretto-8.302.08.1 (build 1.8.0_302-b08)
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14B47b
• CocoaPods version 1.11.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[!] Android Studio (version 2022.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
✗ Unable to find bundled Java version.
• Try updating or re-installing Android Studio.
[✓] VS Code (version 1.74.3)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.58.0
[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-x64 • macOS 13.0 22A380 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 109.0.5414.119
[✓] HTTP Host Availability
• All required HTTP hosts are available
I got this error on update licences:
error
Error: A JNI error has occurred, please check your installation and try again
Exception in thread "main" java.lang.UnsupportedClassVersionError: com/android/prefs/AndroidLocationsProvider has been compiled by a more recent version of the Java Runtime (class file version 55.0), this version of the Java Runtime only recognizes class file versions up to 52.0
- I added this to .zshrc: export JAVA_HOME=$(/usr/libexec/java_home)
- I copied the jbr content and created a jbe folder, copied the contents folder and it fixed the error
- Added path entry to fix warning
- Executed ln -s jbr jre
Is this the correct approach? at least no more errors and warnings are shown. The no-drawer animation behavior is still happening
Hi @Sesa1988, thanks for the info.
One final thing, what android versions are the devices you tested using?
Hi @Sesa1988, thanks for the info.
One final thing, what android versions are the devices you tested using?
Hi @danagbemava-nc ,
It's Android 13 on the Samsung S22+ and S20+.
I tested it also on a Xiaomi mi 10 pro and animations worked properly there.
I am experiencing the same issue. Animation for showModalBottomSheet
works at first, but then stops working.
I can also reproduce the issue from the sample posted above (in both debug and release mode). On Samsung Galaxy S8 (G950F), Android 9. This is the EU version with Exynos 8895 chipset and Mali-G71 MP20 GPU.
@Sesa1988 are your Samsung devices using Qualcomm or Exynos chipset?
I am experiencing the same issue. Animation for
showModalBottomSheet
works at first, but then stops working.I can also reproduce the issue from the sample posted above (in both debug and release mode). On Samsung Galaxy S8 (G950F), Android 9. This is the EU version with Exynos 8895 chipset and Mali-G71 MP20 GPU.
@Sesa1988 are your Samsung devices using Qualcomm or Exynos chipset?
I think it should be Exynos because I bought it in Germany.
This seems like it might be affecting Samsung devices. I asked @huycozy to look into reproducing the issue but it did not reproduce on his end.
His device info
Samsung Galaxy Tab A7 Lite, Android 13 OneUI 5.0, SM-T225
Mediatek MT8768T Helio P22T
I could not reproduce this on my Pixel 7 or Poco X3 NFC and I do not have a Samsung device to verify this on.
The issue seems to be affecting a certain group of devices. At present, it seems to be affecting Samsung devices but @Sesa1988 was able to reproduce it on the android emulator, albeit it wasn't consistent (see https://github.com/flutter/flutter/issues/119094#issuecomment-1404668663).
Labeling this for further investigation from the team. Since reports seem to indicate that this was working just fine before flutter 3.7, tentatively labeling as a regression
~~@danagbemava-nc Samsung phones with Exynos chipsets seem to be a common denominator.~~
This seems like it might be affecting Samsung devices. I asked @huycozy to look into reproducing the issue but it did not reproduce on his end.
His device info
Samsung Galaxy Tab A7 Lite, Android 13 OneUI 5.0, SM-T225 Mediatek MT8768T Helio P22T
I could not reproduce this on my Pixel 7 or Poco X3 NFC and I do not have a Samsung device to verify this on.
The issue seems to be affecting a certain group of devices. At present, it seems to be affecting Samsung devices but @Sesa1988 was able to reproduce it on the android emulator, albeit it wasn't consistent (see #119094 (comment)).
Labeling this for further investigation from the team. Since reports seem to indicate that this was working just fine before flutter 3.7, tentatively labeling as a regression
@Jure-BB @danagbemava-nc , It also works on my S20+ and I think it also has the Exynos chip when you bought it in Europe. I'm not sure what is so different about the S22+ but It worked without any issues on previous versions and I would like to stay on the latest version if possible.
I also tested with 60 Hz refresh rate and the issue still there. When you slow down animations it looks like that the background gets animated but the dialog is instantly shown.
I experience the same issue on an Samsung S22 Exynos Android 13 and can also reproduce the described behaviour using the repo provided by @Sesa1988
flutter doctor -v
:
[✓] Flutter (Channel stable, 3.7.0, on Microsoft Windows [Version 10.0.22621.1105], locale de-DE)
• Flutter version 3.7.0 on channel stable at C:\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision b06b8b2710 (5 days ago), 2023-01-23 16:55:55 -0800
• Engine revision b24591ed32
• Dart version 2.19.0
• DevTools version 2.20.1
[✗] Windows Version (Unable to confirm if installed Windows version is 10 or greater)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
• Android SDK at C:\Users\andrs\AppData\Local\Android\sdk
• Platform android-33, build-tools 32.0.0
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
• All Android licenses accepted.
[✓] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe
[✓] Visual Studio - develop for Windows (Visual Studio Build Tools 2019 16.11.10)
• Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools
• Visual Studio Build Tools 2019 version 16.11.32126.315
• Windows 10 SDK version 10.0.19041.0
[✓] Android Studio (version 2021.3)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
[✓] VS Code, 64-bit edition (version 1.74.2)
• VS Code at C:\Program Files\Microsoft VS Code
• Flutter extension can be installed from:
🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[✓] Connected device (4 available)
• SM S901B (mobile) • R3CT30R6T4N • android-arm64 • Android 13 (API 33)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22621.1105]
• Chrome (web) • chrome • web-javascript • Google Chrome 109.0.5414.120
• Edge (web) • edge • web-javascript • Microsoft Edge 109.0.1518.61
[✓] HTTP Host Availability
• All required HTTP hosts are available
! Doctor found issues in 1 category.
cc @reidbaker
also the same issue for me, animation doesn't work on Samsung s22 ultra and OnePlus 7 Pro
Same issue on Redmi lmi, but in a opposed way: the animation of modal bottom sheet does not work at first startup.
From the second start, all animation runs nicely.
The bottom sheets we use in our app are also not behaving smoothly after upgrading from Flutter 3.3.10 to 3.7.1.
- When showing the bottom sheet, there is no slide up animation. The bottom sheet just appears in the screen.
- You cannot drag the bottom sheet down, although at the end of the gesture the bottom sheet does get dismissed (without animation). The barrier color does animate while dragging down.
- It happens independently if your bottom sheet is building just a simple widget (first bottom sheet in the video) or if it uses a
DraggableScrollableSheet
(second bottom sheet in the video). - They are still working fine in iOS and web, so the issue is specific to Android.
- I can reproduce it in debug, profile and release builds in all the devices I have (Google Pixel 6, Google Pixel 3 and Xiaomi MI6)
- I am not using SKSL in Android
- I am not using material3 yet
Flutter 3.3.10: | Flutter 3.7.1: |
---|---|
Source code bottom sheet 1:
class ConfirmationBottomSheet extends StatelessWidget {
const ConfirmationBottomSheet({
super.key,
this.image,
required this.title,
this.description,
required this.confirmButtonText,
required this.destructive,
this.onClosePressed,
this.onConfirmPressed,
});
final Widget? image;
final String title;
final String? description;
final String confirmButtonText;
final bool destructive;
final VoidCallback? onClosePressed;
final VoidCallback? onConfirmPressed;
@override
Widget build(final BuildContext context) {
final theme = context.theme;
return SafeArea(
child: Stack(
children: [
Padding(
padding: const EdgeInsets.all(BrxsSpacing.tiny),
child: IconButton(
onPressed: () => onClosePressed?.call(),
splashRadius: 20,
icon: Container(
alignment: Alignment.center,
width: 28,
height: 28,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: theme.colorTheme.neutral[200],
),
child: Icon(
Icons.close_rounded,
size: 20,
color: theme.colorTheme.neutral[600],
),
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: BrxsSpacing.medium),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(height: 60),
if (image != null)
SizedBox(
width: 192,
height: 96,
child: image,
),
if (image != null) const SizedBox(height: BrxsSpacing.medium),
Text(
title,
style: theme.textTheme.heading4,
textAlign: TextAlign.center,
),
if (description != null) const SizedBox(height: BrxsSpacing.medium),
if (description != null)
MarkdownText(
text: description!,
textStyle: theme.textTheme.bigBodyText,
linkStyle: theme.textTheme.mediumLinkText,
textAlign: WrapAlignment.center,
),
const SizedBox(height: BrxsSpacing.big),
BrxsButton(
text: confirmButtonText,
buttonStyle: destructive ? BrxButtonStyle.destructive : BrxButtonStyle.primary,
onPressed: () => onConfirmPressed?.call(),
),
const SizedBox(height: BrxsSpacing.big),
],
),
),
],
),
);
}
}
Future<void> showConfirmationBottomSheet({
required final BuildContext context,
final Widget? image,
required final String title,
final String? description,
required final String confirmButtonText,
final bool destructive = false,
final VoidCallback? onClosePressed,
final VoidCallback? onConfirmPressed,
}) async {
final theme = context.theme;
final confirmed = await showModalBottomSheet<bool?>(
context: context,
backgroundColor: BrxsColors.white,
constraints: const BoxConstraints(maxWidth: BrxsDimens.maxBodyWidth),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
),
barrierColor: theme.colorTheme.overlay,
isScrollControlled: true,
useRootNavigator: true,
builder: (final context) => ConfirmationBottomSheet(
image: image,
title: title,
description: description,
confirmButtonText: confirmButtonText,
destructive: destructive,
onClosePressed: () => Navigator.of(context).pop(false),
onConfirmPressed: () => Navigator.of(context).pop(true),
),
);
if (confirmed == null || !confirmed) {
onClosePressed?.call();
} else {
onConfirmPressed?.call();
}
}
Source code bottom sheet 2:
class ActionsBottomSheet extends StatelessWidget {
const ActionsBottomSheet({
super.key,
required this.items,
this.label,
this.topPadding = 0,
required this.scrollController,
required this.onActionPressed,
});
final List<GenericListItem> items;
final String? label;
final double topPadding;
final ScrollController scrollController;
final void Function(GenericListItem) onActionPressed;
@override
Widget build(final BuildContext context) {
final theme = context.theme;
return Container(
padding: EdgeInsets.only(top: topPadding + BrxsSpacing.small),
alignment: Alignment.center,
child: Container(
padding: const EdgeInsets.only(top: BrxsSpacing.small),
constraints: const BoxConstraints(maxWidth: BrxsDimens.maxBodyWidth),
decoration: BoxDecoration(
color: BrxsLightColorTheme.surfaceColor,
borderRadius: const BorderRadius.vertical(top: Radius.circular(16)),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 4,
blurRadius: 4,
offset: const Offset(0, 3),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Container(
width: 44,
height: 5,
decoration: BoxDecoration(
color: theme.colorTheme.neutral[300],
borderRadius: BorderRadius.circular(3),
),
),
),
const SizedBox(height: BrxsSpacing.medium),
if (label != null)
Padding(
padding: const EdgeInsets.only(
left: BrxsSpacing.medium,
right: BrxsSpacing.medium,
bottom: BrxsSpacing.small,
),
child: Text(
label!.toUpperCase(),
style: theme.textTheme.sectionLabel,
textAlign: TextAlign.left,
),
),
Expanded(
child: GenericList(
size: GenericListSize.small,
controller: scrollController,
separated: true,
items: items,
onItemTap: onActionPressed,
),
),
const SizedBox(height: BrxsSpacing.big),
],
),
),
);
}
}
Future<void> showActionsBottomSheet({
required final BuildContext context,
required final List<GenericListItem> items,
final String? label,
final double? initialExpansion,
final void Function(GenericListItem)? onActionPressed,
final VoidCallback? onClosePressed,
}) async {
final theme = context.theme;
final mainContext = context;
final mediaQuery = MediaQuery.of(mainContext);
final screenHeight = mediaQuery.size.height;
final itemsHeight =
62 + (label == null ? 0 : 30) + mediaQuery.viewPadding.top + mediaQuery.viewPadding.bottom + 65 * items.length;
final finalInitialExpansion = initialExpansion ?? (itemsHeight / screenHeight).clamp(0, 0.99999);
GenericListItem? actionPressed;
final confirmed = await showModalBottomSheet<bool?>(
context: context,
backgroundColor: BrxsColors.transparent,
barrierColor: theme.colorTheme.overlay,
isScrollControlled: true,
useRootNavigator: true,
builder: (final context) => DraggableScrollableSheet(
expand: false,
initialChildSize: finalInitialExpansion,
minChildSize: finalInitialExpansion,
builder: (final _, final controller) => ActionsBottomSheet(
items: items,
label: label,
topPadding: mediaQuery.padding.top,
onActionPressed: (final item) {
actionPressed = item;
Navigator.of(context).pop(true);
},
scrollController: controller,
),
),
);
if (confirmed == null || !confirmed || actionPressed == null) {
onClosePressed?.call();
} else {
onActionPressed?.call(actionPressed!);
}
}
Same issue on pixel 6a
same issue on oneplus 8t Android 13
@chinmaygarde @huycozy Were you able to reproduce it by now? This issue would force everyone to downgrade the Flutter version since you can't release an update with a completely broken animation.
Did someone tested the animation after an downgrade from 3.7.1 to 3.3.10?
@chinmaygarde @huycozy Were you able to reproduce it by now? This issue would force everyone to downgrade the Flutter version since you can't release an update with a completely broken animation.
Did someone tested the animation after an downgrade from 3.7.1 to 3.3.10?
yes, after the downgrade, it works as expected
I was only able to repro on a physical Android device.
I bisected to 94d578f9bb67d180b18e3e548c0c685f0edca291
, which was first introduced in the 3.4.0-17.0.pre
release.
I bisected to
94d578f9bb67d180b18e3e548c0c685f0edca291
, which was first introduced in the3.4.0-17.0.pre
release.
This commit is an engine roll which contains one commit related to animations: https://github.com/flutter/engine/pull/35478.
This engine commit fixed https://github.com/flutter/flutter/issues/109521 which is related to MediaQuery.of(context).accessibleNavigation
.
BottomSheet
queries this value to enable or disable its animation: https://github.com/flutter/flutter/blob/001c4951b61957f94d66fe1600efe6e0aa40248b/packages/flutter/lib/src/material/bottom_sheet.dart#L565
I don't have a device to reproduce this. If I had one I would add a print
statement to show MediaQuery.of(context).accessibleNavigation
value and confirm that, at one point, it started to return true
.
I bisected to
94d578f9bb67d180b18e3e548c0c685f0edca291
, which was first introduced in the3.4.0-17.0.pre
release.This commit is an engine roll which contains one commit related to animations: flutter/engine#35478. This engine commit fixed #109521 which is related to
MediaQuery.of(context).accessibleNavigation
.
BottomSheet
queries this value to enable or disable its animation:https://github.com/flutter/flutter/blob/001c4951b61957f94d66fe1600efe6e0aa40248b/packages/flutter/lib/src/material/bottom_sheet.dart#L565
I don't have a device to reproduce this. If I had one I would add a
MediaQuery.of(context).accessibleNavigation
value and confirm that, at one point, it started to returntrue
.
I reproduce it on my devices, it print true
my flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.7.3, on Microsoft Windows [Version 10.0.22623.1255], locale zh-CN)
[√] Windows Version (Installed version of Windows is version 10 or higher)
Checking Android licenses is taking an unexpectedly long time...[√] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio 生成工具 2022 17.4.4)
[!] Android Studio (version 2022.1)
X Unable to find bundled Java version.
[√] IntelliJ IDEA Ultimate Edition (version 2022.3)
[√] VS Code (version 1.75.0)
[√] Connected device (4 available)
[!] HTTP Host Availability
I checked my accessiblity settings, I did open a services. And I turn it off, the animation come back! But it should not related to animation, that should be a bug.
Confirmed that in my case (Samsung Galaxy S22, Android 13) this seems to be related to accessibility services being enabled. For me this was Bitwarden (password manager) but it's fairly common for apps to use this as a mechanism to 'draw over' other content on the screen.
When I disable Bitwarden under Accessibility in my device settings, the bottom sheet animations work as normal.