(web) Fix navigation buttons showing on edge items

lib/widget/viewer.dart

@@ -71,6 +71,10 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
 
   @override
   build(BuildContext context) {
+    if (!_hasInit) {
+      _updateNavigationState(widget.startIndex);
+      _hasInit = true;
+    }
     return AppTheme(
       child: Scaffold(
         body: Builder(
@@ -158,6 +162,7 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
 
   List<Widget> _buildNavigationButtons(BuildContext context) {
     return [
+      if (_canSwitchRight)
         Align(
           alignment: Alignment.centerRight,
           child: Material(
@@ -165,22 +170,22 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
             child: Visibility(
               visible: _canSwitchPage(),
               child: AnimatedOpacity(
-              opacity: _isShowNext ? 1.0 : 0.0,
+                opacity: _isShowRight ? 1.0 : 0.0,
                 duration: k.animationDurationShort,
                 child: MouseRegion(
                   onEnter: (details) {
                     setState(() {
-                    _isShowNext = true;
+                      _isShowRight = true;
                     });
                   },
                   onExit: (details) {
                     setState(() {
-                    _isShowNext = false;
+                      _isShowRight = false;
                     });
                   },
                   child: Padding(
-                  padding:
+                    padding: const EdgeInsets.symmetric(
-                      const EdgeInsets.symmetric(horizontal: 24, vertical: 36),
+                        horizontal: 24, vertical: 36),
                     child: IconButton(
                       icon: Icon(Icons.arrow_forward_ios_outlined),
                       onPressed: _switchToRightImage,
@@ -191,6 +196,7 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
             ),
           ),
         ),
+      if (_canSwitchLeft)
         Align(
           alignment: Alignment.centerLeft,
           child: Material(
@@ -198,22 +204,22 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
             child: Visibility(
               visible: _canSwitchPage(),
               child: AnimatedOpacity(
-              opacity: _isShowPrevious ? 1.0 : 0.0,
+                opacity: _isShowLeft ? 1.0 : 0.0,
                 duration: k.animationDurationShort,
                 child: MouseRegion(
                   onEnter: (details) {
                     setState(() {
-                    _isShowPrevious = true;
+                      _isShowLeft = true;
                     });
                   },
                   onExit: (details) {
                     setState(() {
-                    _isShowPrevious = false;
+                      _isShowLeft = false;
                     });
                   },
                   child: Padding(
-                  padding:
+                    padding: const EdgeInsets.symmetric(
-                      const EdgeInsets.symmetric(horizontal: 24, vertical: 36),
+                        horizontal: 24, vertical: 36),
                     child: IconButton(
                       icon: Icon(Icons.arrow_back_ios_outlined),
                       onPressed: _switchToLeftImage,
@@ -746,14 +752,19 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
 
   /// Switch to the previous image in the stream
   void _switchToPrevImage() {
-    _pageController.previousPage(
+    _pageController
-        duration: k.animationDurationNormal, curve: Curves.easeInOut);
+        .previousPage(
+            duration: k.animationDurationNormal, curve: Curves.easeInOut)
+        .whenComplete(
+            () => _updateNavigationState(_pageController.page.round()));
   }
 
   /// Switch to the next image in the stream
   void _switchToNextImage() {
-    _pageController.nextPage(
+    _pageController
-        duration: k.animationDurationNormal, curve: Curves.easeInOut);
+        .nextPage(duration: k.animationDurationNormal, curve: Curves.easeInOut)
+        .whenComplete(
+            () => _updateNavigationState(_pageController.page.round()));
   }
 
   /// Switch to the image on the "left", what that means depend on the current
@@ -776,6 +787,36 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
     }
   }
 
+  /// Update the navigation state for [page]
+  void _updateNavigationState(int page) {
+    // currently useless to run on non-web platform
+    if (!kIsWeb) {
+      return;
+    }
+    final hasNext = page < widget.streamFiles.length - 1;
+    final hasPrev = page > 0;
+    final hasLeft =
+        Directionality.of(context) == TextDirection.ltr ? hasPrev : hasNext;
+    if (_canSwitchLeft != hasLeft) {
+      setState(() {
+        _canSwitchLeft = hasLeft;
+        if (!_canSwitchLeft) {
+          _isShowLeft = false;
+        }
+      });
+    }
+    final hasRight =
+        Directionality.of(context) == TextDirection.ltr ? hasNext : hasPrev;
+    if (_canSwitchRight != hasRight) {
+      setState(() {
+        _canSwitchRight = hasRight;
+        if (!_canSwitchRight) {
+          _isShowRight = false;
+        }
+      });
+    }
+  }
+
   bool _canSwitchPage() => !_isZoomed();
   bool _canOpenDetailPane() => !_isZoomed();
   bool _canZoom() => !_isDetailPaneActive;
@@ -788,6 +829,8 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
         a: true,
       );
 
+  var _hasInit = false;
+
   var _isShowAppBar = true;
   var _isAppBarActive = true;
 
@@ -795,8 +838,10 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
   var _isDetailPaneActive = false;
   var _isClosingDetailPane = false;
 
-  var _isShowNext = false;
+  var _canSwitchRight = true;
-  var _isShowPrevious = false;
+  var _canSwitchLeft = true;
+  var _isShowRight = false;
+  var _isShowLeft = false;
 
   var _isZooming = false;
   var _wasZoomed = false;