Add panel background to unsafe area

Author: elibon99

lib/app/logging.dart

@@ -118,14 +118,15 @@ class LogPanelVisibilityNotifier extends StateNotifier<bool> {
   }
 }
 
-class LoggingPanel extends ConsumerStatefulWidget {
-  const LoggingPanel({super.key});
+class _LoggingPanel extends ConsumerStatefulWidget {
+  final bool safeArea;
+  const _LoggingPanel({this.safeArea = false});
 
   @override
-  ConsumerState<LoggingPanel> createState() => _LoggingPanelState();
+  ConsumerState<_LoggingPanel> createState() => _LoggingPanelState();
 }
 
-class _LoggingPanelState extends ConsumerState<LoggingPanel> {
+class _LoggingPanelState extends ConsumerState<_LoggingPanel> {
   bool _runningDiagnostics = false;
 
   List<Widget> _buildChipsList(Level logLevel) {
@@ -217,14 +218,10 @@ class _LoggingPanelState extends ConsumerState<LoggingPanel> {
     final logLevel = ref.watch(logLevelProvider);
     final sensitiveLogs = ref.watch(
         logLevelProvider.select((level) => level.value <= Level.CONFIG.value));
-    final visible = ref.watch(logPanelVisibilityProvider);
-
-    if (!visible) {
-      return const SizedBox();
-    }
 
     return _Panel(
       sensitive: sensitiveLogs,
+      safeArea: widget.safeArea,
       child: Wrap(
         alignment: WrapAlignment.spaceBetween,
         runSpacing: 4.0,
@@ -269,43 +266,40 @@ class _LoggingPanelState extends ConsumerState<LoggingPanel> {
   }
 }
 
-class WarningPanel extends ConsumerWidget {
-  const WarningPanel({super.key});
+class _WarningPanel extends StatelessWidget {
+  final bool safeArea;
+  const _WarningPanel({this.safeArea = false});
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
+  Widget build(BuildContext context) {
     final l10n = AppLocalizations.of(context);
-    final allowScreenshots =
-        isAndroid ? ref.watch(androidAllowScreenshotsProvider) : false;
-
-    if (!allowScreenshots) {
-      return SizedBox();
-    }
 
     return _Panel(
-      sensitive: allowScreenshots,
-      child: Row(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          Padding(
-            padding: const EdgeInsets.only(left: 12.0, top: 8.0, bottom: 8.0),
-            child: Icon(
-              Symbols.warning_amber,
-              size: 24,
+        sensitive: true,
+        safeArea: safeArea,
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Padding(
+              padding: const EdgeInsets.only(left: 12.0, top: 8.0, bottom: 8.0),
+              child: Icon(
+                Symbols.warning_amber,
+                size: 24,
+              ),
             ),
-          ),
-          const SizedBox(width: 8.0),
-          Flexible(child: Text(l10n.l_warning_allow_screenshots))
-        ],
-      ),
-    );
+            const SizedBox(width: 8.0),
+            Flexible(child: Text(l10n.l_warning_allow_screenshots))
+          ],
+        ));
   }
 }
 
 class _Panel extends StatelessWidget {
   final Widget child;
   final bool sensitive;
-  const _Panel({required this.child, required this.sensitive});
+  final bool safeArea;
+  const _Panel(
+      {required this.child, required this.sensitive, this.safeArea = true});
 
   @override
   Widget build(BuildContext context) {
@@ -346,18 +340,48 @@ class _Panel extends StatelessWidget {
         ? sensitiveColor.withValues(alpha: 0.3)
         : colorScheme.secondaryContainer.withValues(alpha: 0.3);
 
+    final content = Padding(
+      padding: const EdgeInsets.all(4.0),
+      child: child,
+    );
+
     return ColoredBox(
       color: colorScheme.surface,
       child: Theme(
         data: localThemeData,
         child: ColoredBox(
           color: panelBackgroundColor,
-          child: Padding(
-            padding: const EdgeInsets.all(4.0),
-            child: child,
-          ),
+          child: safeArea ? SafeArea(child: content) : content,
         ),
       ),
     );
   }
 }
+
+class PanelList extends ConsumerWidget {
+  const PanelList({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final logPanelVisible = ref.watch(logPanelVisibilityProvider);
+    final allowScreenshots =
+        isAndroid ? ref.watch(androidAllowScreenshotsProvider) : false;
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        if (allowScreenshots)
+          Flexible(
+            child: _WarningPanel(
+              safeArea: !logPanelVisible,
+            ),
+          ),
+        if (allowScreenshots && logPanelVisible) const SizedBox(height: 4.0),
+        if (logPanelVisible)
+          Flexible(
+            child: _LoggingPanel(safeArea: true),
+          )
+      ],
+    );
+  }
+}

lib/app/views/app_page.dart

@@ -755,17 +755,8 @@ class _AppPageState extends ConsumerState<AppPage> {
           ],
         ),
       ),
-      bottomNavigationBar: SafeArea(
-        child: Column(
-          key: loggingPanelKey,
-          mainAxisSize: MainAxisSize.min,
-          crossAxisAlignment: CrossAxisAlignment.stretch,
-          spacing: 4.0,
-          children: [
-            Flexible(child: WarningPanel()),
-            Flexible(child: LoggingPanel()),
-          ],
-        ),
+      bottomNavigationBar: PanelList(
+        key: loggingPanelKey,
       ),
       drawer: hasDrawer ? _buildDrawer(context) : null,
       body: body,

lib/widgets/toast.dart

@@ -129,28 +129,32 @@ void Function() showToast(
       loggingPanelKey.currentContext?.findRenderObject() as RenderBox?;
   final panelHeight = panelBox?.size.height ?? 0.0;
 
+  final content = Align(
+    alignment: Alignment.bottomCenter,
+    child: Container(
+      height: 50,
+      width: 400,
+      margin: const EdgeInsets.all(8),
+      child: Toast(
+        message,
+        duration,
+        backgroundColor: backgroundColor,
+        textStyle: textStyle,
+        onComplete: close,
+      ),
+    ),
+  );
+
   entry = OverlayEntry(builder: (context) {
     return Positioned(
       bottom: MediaQuery.of(context).viewInsets.bottom + panelHeight,
       left: 0,
       right: 0,
-      child: SafeArea(
-        child: Align(
-          alignment: Alignment.bottomCenter,
-          child: Container(
-            height: 50,
-            width: 400,
-            margin: const EdgeInsets.all(8),
-            child: Toast(
-              message,
-              duration,
-              backgroundColor: backgroundColor,
-              textStyle: textStyle,
-              onComplete: close,
+      child: panelHeight > 0
+          ? content // Panel already adds SafeArea
+          : SafeArea(
+              child: content,
             ),
-          ),
-        ),
-      ),
     );
   });
   Timer.run(() {