Detail page: Remove use of GlobalKeys for top and bottom bar and use ValueNotifier instead to update UI state

lib/ui/viewer/file/detail_page.dart

@@ -76,8 +76,7 @@ class _DetailPageState extends State<DetailPage> {
   bool _hasLoadedTillStart = false;
   bool _hasLoadedTillEnd = false;
   bool _shouldHideAppBar = false;
-  GlobalKey<FadingAppBarState>? _appBarKey;
-  GlobalKey<FadingBottomBarState>? _bottomBarKey;
+  final _enableFullScreenNotifier = ValueNotifier(false);
 
   @override
   void initState() {
@@ -111,8 +110,6 @@ class _DetailPageState extends State<DetailPage> {
           _files!.length.toString() +
           " files .",
     );
-    _appBarKey = GlobalKey<FadingAppBarState>();
-    _bottomBarKey = GlobalKey<FadingBottomBarState>();
     return Scaffold(
       appBar: FadingAppBar(
         _files![_selectedIndex],
@@ -120,7 +117,7 @@ class _DetailPageState extends State<DetailPage> {
         Configuration.instance.getUserID(),
         100,
         widget.config.mode == DetailPageMode.full,
-        key: _appBarKey,
+        enableFullScreenNotifier: _enableFullScreenNotifier,
       ),
       extendBodyBehindAppBar: true,
       resizeToAvoidBottomInset: false,
@@ -134,7 +131,7 @@ class _DetailPageState extends State<DetailPage> {
               widget.config.mode == DetailPageMode.minimalistic,
               onFileRemoved: _onFileRemoved,
               userID: Configuration.instance.getUserID(),
-              key: _bottomBarKey,
+              enableFullScreenNotifier: _enableFullScreenNotifier,
             ),
           ],
         ),
@@ -192,13 +189,8 @@ class _DetailPageState extends State<DetailPage> {
   }
 
   void _toggleFullScreen() {
-    if (_shouldHideAppBar) {
-      _appBarKey!.currentState!.hide();
-      _bottomBarKey!.currentState!.hide();
-    } else {
-      _appBarKey!.currentState!.show();
-      _bottomBarKey!.currentState!.show();
-    }
+    _enableFullScreenNotifier.value = !_enableFullScreenNotifier.value;
+
     Future.delayed(Duration.zero, () {
       SystemChrome.setEnabledSystemUIMode(
         //to hide status bar?
@@ -246,7 +238,7 @@ class _DetailPageState extends State<DetailPage> {
       final length = files.length;
       files.addAll(_files!);
       _files = files;
-      _pageController!.jumpToPage(length);
+      _pageController.jumpToPage(length);
       _selectedIndex = length;
     });
   }

lib/ui/viewer/file/fading_app_bar.dart

@@ -36,6 +36,7 @@ class FadingAppBar extends StatefulWidget implements PreferredSizeWidget {
   final double height;
   final bool shouldShowActions;
   final int? userID;
+  final ValueNotifier<bool> enableFullScreenNotifier;
 
   const FadingAppBar(
     this.file,
@@ -43,6 +44,7 @@ class FadingAppBar extends StatefulWidget implements PreferredSizeWidget {
     this.userID,
     this.height,
     this.shouldShowActions, {
+    required this.enableFullScreenNotifier,
     Key? key,
   }) : super(key: key);
 
@@ -55,51 +57,41 @@ class FadingAppBar extends StatefulWidget implements PreferredSizeWidget {
 
 class FadingAppBarState extends State<FadingAppBar> {
   final _logger = Logger("FadingAppBar");
-  bool _shouldHide = false;
 
   @override
   Widget build(BuildContext context) {
     return CustomAppBar(
-      IgnorePointer(
-        ignoring: _shouldHide,
-        child: AnimatedOpacity(
-          opacity: _shouldHide ? 0 : 1,
-          duration: const Duration(milliseconds: 150),
-          child: Container(
-            decoration: BoxDecoration(
-              gradient: LinearGradient(
-                begin: Alignment.topCenter,
-                end: Alignment.bottomCenter,
-                colors: [
-                  Colors.black.withOpacity(0.72),
-                  Colors.black.withOpacity(0.6),
-                  Colors.transparent,
-                ],
-                stops: const [0, 0.2, 1],
+      ValueListenableBuilder(
+        valueListenable: widget.enableFullScreenNotifier,
+        builder: (context, bool isFullScreen, _) {
+          return IgnorePointer(
+            ignoring: isFullScreen,
+            child: AnimatedOpacity(
+              opacity: isFullScreen ? 0 : 1,
+              duration: const Duration(milliseconds: 150),
+              child: Container(
+                decoration: BoxDecoration(
+                  gradient: LinearGradient(
+                    begin: Alignment.topCenter,
+                    end: Alignment.bottomCenter,
+                    colors: [
+                      Colors.black.withOpacity(0.72),
+                      Colors.black.withOpacity(0.6),
+                      Colors.transparent,
+                    ],
+                    stops: const [0, 0.2, 1],
+                  ),
+                ),
+                child: _buildAppBar(),
               ),
             ),
-            child: _buildAppBar(),
-          ),
-        ),
+          );
+        },
       ),
       Size.fromHeight(Platform.isAndroid ? 80 : 96),
     );
   }
 
-  void hide() {
-    setState(() {
-      _shouldHide = true;
-    });
-  }
-
-  void show() {
-    if (mounted) {
-      setState(() {
-        _shouldHide = false;
-      });
-    }
-  }
-
   AppBar _buildAppBar() {
     debugPrint("building app bar");
 

lib/ui/viewer/file/fading_bottom_bar.dart

@@ -20,12 +20,14 @@ class FadingBottomBar extends StatefulWidget {
   final Function(File) onFileRemoved;
   final bool showOnlyInfoButton;
   final int? userID;
+  final ValueNotifier<bool> enableFullScreenNotifier;
 
   const FadingBottomBar(
     this.file,
     this.onEditRequested,
     this.showOnlyInfoButton, {
     required this.onFileRemoved,
+    required this.enableFullScreenNotifier,
     this.userID,
     Key? key,
   }) : super(key: key);
@@ -35,7 +37,6 @@ class FadingBottomBar extends StatefulWidget {
 }
 
 class FadingBottomBarState extends State<FadingBottomBar> {
-  bool _shouldHide = false;
   final GlobalKey shareButtonKey = GlobalKey();
 
   @override
@@ -43,18 +44,6 @@ class FadingBottomBarState extends State<FadingBottomBar> {
     return _getBottomBar();
   }
 
-  void hide() {
-    setState(() {
-      _shouldHide = true;
-    });
-  }
-
-  void show() {
-    setState(() {
-      _shouldHide = false;
-    });
-  }
-
   void safeRefresh() {
     if (mounted) {
       setState(() {});
@@ -155,60 +144,65 @@ class FadingBottomBarState extends State<FadingBottomBar> {
       );
     }
     final safeAreaBottomPadding = MediaQuery.of(context).padding.bottom * .5;
-    return IgnorePointer(
-      ignoring: _shouldHide,
-      child: AnimatedOpacity(
-        opacity: _shouldHide ? 0 : 1,
-        duration: const Duration(milliseconds: 150),
-        child: Align(
-          alignment: Alignment.bottomCenter,
-          child: Container(
-            decoration: BoxDecoration(
-              gradient: LinearGradient(
-                begin: Alignment.topCenter,
-                end: Alignment.bottomCenter,
-                colors: [
-                  Colors.transparent,
-                  Colors.black.withOpacity(0.6),
-                  Colors.black.withOpacity(0.72),
-                ],
-                stops: const [0, 0.8, 1],
-              ),
-            ),
-            child: Padding(
-              padding: EdgeInsets.only(bottom: safeAreaBottomPadding),
-              child: Column(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  widget.file.caption?.isNotEmpty ?? false
-                      ? Padding(
-                          padding: const EdgeInsets.fromLTRB(
-                            16,
-                            28,
-                            16,
-                            12,
-                          ),
-                          child: Text(
-                            widget.file.caption!,
-                            overflow: TextOverflow.ellipsis,
-                            maxLines: 4,
-                            style: getEnteTextTheme(context)
-                                .small
-                                .copyWith(color: textBaseDark),
-                            textAlign: TextAlign.center,
-                          ),
-                        )
-                      : const SizedBox.shrink(),
-                  Row(
-                    mainAxisAlignment: MainAxisAlignment.spaceAround,
-                    children: children,
+    return ValueListenableBuilder(
+      valueListenable: widget.enableFullScreenNotifier,
+      builder: (BuildContext context, bool isFullScreen, _) {
+        return IgnorePointer(
+          ignoring: isFullScreen,
+          child: AnimatedOpacity(
+            opacity: isFullScreen ? 0 : 1,
+            duration: const Duration(milliseconds: 150),
+            child: Align(
+              alignment: Alignment.bottomCenter,
+              child: Container(
+                decoration: BoxDecoration(
+                  gradient: LinearGradient(
+                    begin: Alignment.topCenter,
+                    end: Alignment.bottomCenter,
+                    colors: [
+                      Colors.transparent,
+                      Colors.black.withOpacity(0.6),
+                      Colors.black.withOpacity(0.72),
+                    ],
+                    stops: const [0, 0.8, 1],
                   ),
-                ],
+                ),
+                child: Padding(
+                  padding: EdgeInsets.only(bottom: safeAreaBottomPadding),
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      widget.file.caption?.isNotEmpty ?? false
+                          ? Padding(
+                              padding: const EdgeInsets.fromLTRB(
+                                16,
+                                28,
+                                16,
+                                12,
+                              ),
+                              child: Text(
+                                widget.file.caption!,
+                                overflow: TextOverflow.ellipsis,
+                                maxLines: 4,
+                                style: getEnteTextTheme(context)
+                                    .small
+                                    .copyWith(color: textBaseDark),
+                                textAlign: TextAlign.center,
+                              ),
+                            )
+                          : const SizedBox.shrink(),
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceAround,
+                        children: children,
+                      ),
+                    ],
+                  ),
+                ),
               ),
             ),
           ),
-        ),
-      ),
+        );
+      },
     );
   }