Fix layout for Android 15 edge-to-edge, closes #22

Author: Correct-Syntax

lib/ui/views/reader/reader_view.dart

@@ -29,15 +29,15 @@ class ReaderView extends StackedView<ReaderViewModel> {
     ReaderViewModel viewModel,
     Widget? child,
   ) {
-    // Color the statusbar
+    // Color the statusbar based on the active theme.
     SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
       statusBarBrightness: Brightness.dark,
       statusBarIconBrightness: Brightness.light,
       statusBarColor: context.theme.appColors.appbarBackground,
     ));
     return Scaffold(
       key: _scaffoldKey,
-      backgroundColor: context.theme.appColors.background,
+      backgroundColor: context.theme.appColors.appbarBackground,
       appBar: viewModel.showSecondaryArea
           ? PreferredSize(
               preferredSize: const Size(double.infinity, kToolbarHeight),
@@ -64,7 +64,8 @@ class ReaderView extends StackedView<ReaderViewModel> {
                   ),
                 ),
                 if (viewModel.primaryAreaBible != 'KJV' || viewModel.secondaryAreaBible != 'KJV')
-                  Padding(
+                  Container(
+                    color: context.theme.appColors.background,
                     padding: const EdgeInsets.symmetric(vertical: 4.0, horizontal: 12.0),
                     child: Text(
                       'This is still a very early look into the unfinished text of the Open English Translation of the Bible. Please double-check the text in advance before using in public.',

lib/ui/views/reader/widgets/primary_reader_appbar/primary_reader_appbar.dart

@@ -29,43 +29,44 @@ class PrimaryReaderAppbar extends StackedView<PrimaryReaderAppbarModel> {
     PrimaryReaderAppbarModel viewModel,
     Widget? child,
   ) {
-    return Container(
-      color: context.theme.appColors.appbarBackground,
-      height: kToolbarHeight,
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        children: [
-          InkWell(
-            onTap: onTapSearch,
-            child: Padding(
-              padding: const EdgeInsets.all(16.0),
-              child: PhosphorIcon(
-                PhosphorIcons.magnifyingGlass(PhosphorIconsStyle.bold),
-                color: context.theme.appColors.appbarIcon,
-                size: 20.0,
-                semanticLabel: 'Search',
+    return SafeArea(
+      child: Container(
+        color: context.theme.appColors.appbarBackground,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            InkWell(
+              onTap: onTapSearch,
+              child: Padding(
+                padding: const EdgeInsets.all(16.0),
+                child: PhosphorIcon(
+                  PhosphorIcons.magnifyingGlass(PhosphorIconsStyle.bold),
+                  color: context.theme.appColors.appbarIcon,
+                  size: 20.0,
+                  semanticLabel: 'Search',
+                ),
               ),
             ),
-          ),
-          ReaderSelectorBtn(
-            readerArea: Area.primary,
-            isActive: isReaderAreaPopupActive,
-            onTapBook: onTapBook,
-            onTapBibleVersion: onTapBibleVersion,
-          ),
-          InkWell(
-            onTap: onTapMenu,
-            child: Padding(
-              padding: const EdgeInsets.all(16.0),
-              child: PhosphorIcon(
-                PhosphorIcons.list(PhosphorIconsStyle.bold),
-                color: context.theme.appColors.appbarIcon,
-                size: 20.0,
-                semanticLabel: 'Menu',
+            ReaderSelectorBtn(
+              readerArea: Area.primary,
+              isActive: isReaderAreaPopupActive,
+              onTapBook: onTapBook,
+              onTapBibleVersion: onTapBibleVersion,
+            ),
+            InkWell(
+              onTap: onTapMenu,
+              child: Padding(
+                padding: const EdgeInsets.all(16.0),
+                child: PhosphorIcon(
+                  PhosphorIcons.list(PhosphorIconsStyle.bold),
+                  color: context.theme.appColors.appbarIcon,
+                  size: 20.0,
+                  semanticLabel: 'Menu',
+                ),
               ),
             ),
-          ),
-        ],
+          ],
+        ),
       ),
     );
   }