flutter
[Edge to Edge Enforcement] Documentation for migrating apps to new Edge-to-Edge behavior
Steps to reproduce
Hi,
I've tried various options to get the content to scroll behind the bottom system navigation bar as Google intended, while still getting padding for lists and no content cut off. I also read this: https://docs.flutter.dev/release/breaking-changes/default-systemuimode-edge-to-edge but there is only a guide for opt-out what will not work in the future.
Option 1: Wrap your app with SafeArea(top: false, bottom: true) → The content does not flow behind the system navigation bar, the behavior is the same as before. I'm not even sure if this is a legitimate approach to preserve the old layout style, but with Edge-to-Edge policy soon being enforced, will apps that retain the previous behavior and styling still pass Play Store review?
Option 2: Wrap your app with MediaQuery.viewPaddingOf(context).bottom padding → The content does not flow behind the system navigation bar, the behavior is the same as before. I don't know why Flutter interprets it this way and doesn't simply add padding when necessary.
Option 3, and apparently the only one that works: Go through your entire app and check every scrollable area, lists, column, bottom sheet and so on and manually add MediaQuery.viewPaddingOf(context).bottom.
Current Result
Is this truly the only viable solution to support the new feature? Since opting out won’t be possible in the future, I’d prefer to implement it the correct way from the start. Calling SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge) doesn’t seem to make a difference and is likely either already invoked internally or enforced by default. Should we remove this?
Expected results
Clear documentation and guidelines are essential at this point, especially since this behavior is being enforced and apps will no longer be eligible for updates in approximately 55 days if not properly addressed. What´s the recommended solution to support system control overlays the content and what´s the best way to prevent it and is it even a viable solution in the long term?
This is also related to: https://github.com/flutter/flutter/issues/170640
I'm on Flutter version: Flutter 3.27.4
@Sesa1988 There's an open issue to update documentation : https://github.com/flutter/flutter/issues/165327 so you can follow-up in it for further updates. I'll close this in favor of it. If you disagree, write in comments and I'll reopen it.
@Sesa1988 There's an open issue to update documentation : https://github.com/flutter/flutter/issues/165327 so you can follow-up in it for further updates. I'll close this in favor of it. If you disagree, write in comments and I'll reopen it.
The linked issue addresses status bar styling, deprecated methods and its documentation, while this issue focuses on the lack of documentation for migrating apps to the new behavior.
We need to update the documentation to cover both issues.
Any update on this issue? I tried everything, and could not find a fix to it. Hoping this will be resolved soon.
Hi, @gyanupadhyay and all! Earlier today, I chatted with two of our SWEs about this. Yes, for now, your option 3 seems to be the only workable option. I pointed out that, while this might be ok for small apps, that it really isn't great for enterprise apps and that a global setting would be useful. So, this subject requires more research and we don't really have all the info yet. If you haven't opened an issue for this on the flutter/flutter repo, you might consider doing so.
Here's a direct quote from one of the SWEs that I spoke to:
Hey shams, that is not a easy question for me to get into. I can possibly dig in after I finish [some other] work.My first pass answer is that there are a couple of ways for widgets to get information that needs to be shared across a bunch of widgets and flutter does not use them consistently. InheritedWidgets, Themes, Passed in parameters, and possibly one more that i am forgetting.
This is also related to issue https://github.com/flutter/website/issues/10755.
Does anyone know if there is a deadline for the migration to edge-to-edge layout?
Does anyone know if there is a deadline for the migration to edge-to-edge layout?
The deadline is Android 16: https://developer.android.com/about/versions/16/behavior-changes-16#edge-to-edge
Hi @sfshaza2! Are you still actively working on this? Wondering because https://github.com/flutter/flutter/issues/168635 surfaced, suggesting this documentation may be really helpful to developers. Working on a repro for that issue, so I can definitely help out test different options we are considering including in the documentation.
@camsim99, I am not working on this. It didn't seem that we had a good solution. But, if we do, let's get something out!