Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Finamp Android does not draw the app Edge to Edge #917

Closed
pohuing opened this issue Oct 9, 2024 · 3 comments · Fixed by #940
Closed

Finamp Android does not draw the app Edge to Edge #917

pohuing opened this issue Oct 9, 2024 · 3 comments · Fixed by #940

Comments

@pohuing
Copy link

pohuing commented Oct 9, 2024

Android can let app draw behind the navigation pill. The small indicator at the bottom of the screen if you use gesture based navigation.

Most apps use this space either as additional screen space, drawing their app contents behind it as well, causing a scrolling list for instance to draw from the edge of your screen. Some also just put a placeholder there in a fitting color. Finamp currently does neither. Leaving the space black. Also there's rumors that the EdgeToEdge mode will be forced by Android in Android 15.

Note the black bar at the bottom:

Album view Player screen Song detail bottom sheet
Screenshot 2024-10-09 213348 Screenshot 2024-10-09 213401 Screenshot_20241009-213334

Possible solutions

In Flutter this can be changed with SystemChrome similar to how Findroid already fixes the status bar on iOS by making the space transparent. This causes the SafeArea from Scaffold to be visible, creating a more coherent(imo) appearance.

await SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(systemNavigationBarColor: Colors.transparent));

I am not entirely sure if these system chrome changes stick around during the entire app lifetime. So there might be a need for supplying a WidgetsBindingObserver. I use these solutions in conjunction in my private projects without issues(though I only have an Android phone):

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

/// Class to set the system UI overlay style to edge to edge.
class UIOverlaySetterObserver extends WidgetsBindingObserver {
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) async {
    switch (state) {
      case AppLifecycleState.resumed:
        SystemChrome.setSystemUIOverlayStyle(
          const SystemUiOverlayStyle(
            systemNavigationBarColor: Colors.transparent,
          ),
        );
        await SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
        break;
      default:
        break;
    }
  }
}

which would be used in main.dart

final binding = WidgetsFlutterBinding.ensureInitialized();
binding.addObserver(UIOverlaySetterObserver());
@pohuing
Copy link
Author

pohuing commented Oct 9, 2024

I would like to make PR but right now my Flutter installation is FUBAR and my internet too slow to reinstall the entire toolchain. So that would have to wait a bit

@pohuing
Copy link
Author

pohuing commented Nov 1, 2024

flutter 3.24.4 magically fixed my gradle woes and I finally got around to trying this out.

@pohuing
Copy link
Author

pohuing commented Nov 1, 2024

This is what findroid looks like with the app drawing in edge to edge

Album view Player screen Song detail bottom sheet
Screenshot_20241101-214733 Screenshot_20241101-214738 Screenshot_20241101-214744

@Chaphasilor Chaphasilor linked a pull request Nov 3, 2024 that will close this issue
@pohuing pohuing closed this as completed Nov 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant