jmshrv / finamp

A Jellyfin music client for mobile
Mozilla Public License 2.0
2k stars 130 forks source link

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

Closed pohuing closed 1 week ago

pohuing commented 1 month ago

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 commented 1 month ago

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 commented 3 weeks ago

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

pohuing commented 3 weeks ago

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