improve shortcuts

lib/pages/illust_page.dart

@@ -24,12 +24,14 @@ import '../components/illust_widget.dart';
 import '../components/md.dart';
 import '../components/ugoira.dart';
 
-
 const _kBottomBarHeight = 64.0;
 
 class IllustGalleryPage extends StatefulWidget {
-  const IllustGalleryPage({required this.illusts, required this.initialPage,
+  const IllustGalleryPage(
-    this.nextUrl, super.key});
+      {required this.illusts,
+      required this.initialPage,
+      this.nextUrl,
+      super.key});
 
   final List<Illust> illusts;
 
@@ -61,6 +63,19 @@ class _IllustGalleryPageState extends State<IllustGalleryPage> {
     super.initState();
   }
 
+  void nextPage() {
+    var length = illusts.length;
+    if (controller.page == length - 1) return;
+    controller.nextPage(
+        duration: const Duration(milliseconds: 200), curve: Curves.ease);
+  }
+
+  void previousPage() {
+    if (controller.page == 0) return;
+    controller.previousPage(
+        duration: const Duration(milliseconds: 200), curve: Curves.ease);
+  }
+
   @override
   Widget build(BuildContext context) {
     var length = illusts.length;
@@ -68,32 +83,16 @@ class _IllustGalleryPageState extends State<IllustGalleryPage> {
       length++;
     }
 
-    return CallbackShortcuts(
+    return PageView.builder(
-      bindings: {
-        LogicalKeySet(LogicalKeyboardKey.arrowLeft): () {
-          if(controller.page == 0) return;
-          controller.previousPage(
-              duration: const Duration(milliseconds: 200), curve: Curves.ease);
-        },
-        LogicalKeySet(LogicalKeyboardKey.arrowRight): () {
-          if(controller.page == length-1) return;
-          controller.nextPage(
-              duration: const Duration(milliseconds: 200), curve: Curves.ease);
-        }
-      },
-      child: Focus(
-        autofocus: true,
-        child: PageView.builder(
       controller: controller,
       itemCount: length,
       itemBuilder: (context, index) {
         if (index == illusts.length) {
           return buildLast();
         }
-            return IllustPage(illusts[index]);
+        return IllustPage(illusts[index],
+            nextPage: nextPage, previousPage: previousPage);
       },
-        ),
-      ),
     );
   }
 
@@ -125,14 +124,18 @@ class _IllustGalleryPageState extends State<IllustGalleryPage> {
   }
 }
 
-
 class IllustPage extends StatefulWidget {
-  const IllustPage(this.illust, {this.favoriteCallback, super.key});
+  const IllustPage(this.illust,
+      {this.favoriteCallback, this.nextPage, this.previousPage, super.key});
 
   final Illust illust;
 
   final void Function(bool)? favoriteCallback;
 
+  final void Function()? nextPage;
+
+  final void Function()? previousPage;
+
   @override
   State<IllustPage> createState() => _IllustPageState();
 }
@@ -140,7 +143,7 @@ class IllustPage extends StatefulWidget {
 class _IllustPageState extends State<IllustPage> {
   @override
   Widget build(BuildContext context) {
-    return ColoredBox(
+    return buildKeyboardListener(ColoredBox(
       color: FluentTheme.of(context).micaBackgroundColor,
       child: SizedBox.expand(
         child: ColoredBox(
@@ -166,11 +169,41 @@ class _IllustPageState extends State<IllustPage> {
           }),
         ),
       ),
+    ));
+  }
+
+  final scrollController = ScrollController();
+
+  Widget buildKeyboardListener(Widget child) {
+    return KeyboardListener(
+      focusNode: FocusNode(),
+      autofocus: true,
+      onKeyEvent: (event) {
+        if (event is! KeyUpEvent) return;
+        const kShortcutScrollOffset = 200;
+        if (event.logicalKey == LogicalKeyboardKey.arrowDown) {
+          scrollController.animateTo(
+              scrollController.offset + kShortcutScrollOffset,
+              duration: const Duration(milliseconds: 200),
+              curve: Curves.easeOut);
+        } else if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
+          scrollController.animateTo(
+              scrollController.offset - kShortcutScrollOffset,
+              duration: const Duration(milliseconds: 200),
+              curve: Curves.easeOut);
+        } else if (event.logicalKey == LogicalKeyboardKey.arrowRight) {
+          widget.nextPage?.call();
+        } else if (event.logicalKey == LogicalKeyboardKey.arrowLeft) {
+          widget.previousPage?.call();
+        }
+      },
+      child: child,
     );
   }
 
   Widget buildBody(double width, double height) {
     return ListView.builder(
+        controller: scrollController,
         itemCount: widget.illust.images.length + 2,
         padding: EdgeInsets.zero,
         itemBuilder: (context, index) {
@@ -227,7 +260,8 @@ class _IllustPageState extends State<IllustPage> {
           child: Image(
               key: ValueKey(index),
               image: downloadFile == null
-                  ? CachedImageProvider(widget.illust.images[index].large) as ImageProvider
+                  ? CachedImageProvider(widget.illust.images[index].large)
+                      as ImageProvider
                   : FileImage(downloadFile) as ImageProvider,
               width: imageWidth,
               fit: BoxFit.cover,
@@ -237,7 +271,8 @@ class _IllustPageState extends State<IllustPage> {
                 double? value;
                 if (loadingProgress.expectedTotalBytes != null) {
                   value = (loadingProgress.cumulativeBytesLoaded /
-                      loadingProgress.expectedTotalBytes!)*100;
+                          loadingProgress.expectedTotalBytes!) *
+                      100;
                 }
                 if (value != null && (value > 100 || value < 0)) {
                   value = null;
@@ -251,8 +286,7 @@ class _IllustPageState extends State<IllustPage> {
                     ),
                   ),
                 );
-              }
+              }),
-          ),
         ),
       );
     } else {
@@ -271,7 +305,8 @@ class _IllustPageState extends State<IllustPage> {
 }
 
 class _BottomBar extends StatefulWidget {
-  const _BottomBar(this.illust, this.height, this.width, {this.favoriteCallback});
+  const _BottomBar(this.illust, this.height, this.width,
+      {this.favoriteCallback});
 
   final void Function(bool)? favoriteCallback;
 
@@ -299,7 +334,8 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
   late final AnimationController animationController;
 
   double get minValue => pageHeight - widgetHeight;
-  double get maxValue => pageHeight - _kBottomBarHeight - context.padding.bottom;
+  double get maxValue =>
+      pageHeight - _kBottomBarHeight - context.padding.bottom;
 
   @override
   void initState() {
@@ -315,9 +351,7 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
       ..onEnd = _handlePointerUp
       ..onCancel = _handlePointerCancel;
     animationController = AnimationController(
-      vsync: this, duration: const Duration(milliseconds: 180),
+        vsync: this, duration: const Duration(milliseconds: 180), value: 1);
-      value: 1
-    );
     super.initState();
   }
 
@@ -344,7 +378,8 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
   }
 
   void _handlePointerCancel() {
-    if(animationController.value == 1 || animationController.value == 0) return;
+    if (animationController.value == 1 || animationController.value == 0)
+      return;
     if (animationController.value >= 0.5) {
       animationController.forward();
     } else {
@@ -402,7 +437,8 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
               }
             },
             child: Card(
-              borderRadius: const BorderRadius.vertical(top: Radius.circular(8)),
+              borderRadius:
+                  const BorderRadius.vertical(top: Radius.circular(8)),
               backgroundColor:
                   FluentTheme.of(context).micaBackgroundColor.withOpacity(0.96),
               padding: const EdgeInsets.symmetric(horizontal: 8),
@@ -420,9 +456,11 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
                       "${"Artwork ID".tl}: ${widget.illust.id}\n"
                       "${"Artist ID".tl}: ${widget.illust.author.id}\n"
                       "${widget.illust.createDate.toString().split('.').first}",
-                      style: TextStyle(color: ColorScheme.of(context).outline),)
+                      style: TextStyle(color: ColorScheme.of(context).outline),
-                        .paddingLeft(4),
+                    ).paddingLeft(4),
-                    SizedBox(height: 8 + context.padding.bottom,)
+                    SizedBox(
+                      height: 8 + context.padding.bottom,
+                    )
                   ],
                 ),
               ),
@@ -470,7 +508,8 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
         isFollowing = true;
       });
       var method = widget.illust.author.isFollowed ? "delete" : "add";
-      var res = await Network().follow(widget.illust.author.id.toString(), method);
+      var res =
+          await Network().follow(widget.illust.author.id.toString(), method);
       if (res.error) {
         if (mounted) {
           context.showToast(message: "Network Error");
@@ -502,12 +541,12 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
                 child: ColoredBox(
                   color: ColorScheme.of(context).secondaryContainer,
                   child: GestureDetector(
-                    onTap: () => context.to(() =>
+                    onTap: () => context.to(() => UserInfoPage(
-                        UserInfoPage(
                           widget.illust.author.id.toString(),
                           followCallback: (b) => setState(() {
                             widget.illust.author.isFollowed = b;
-                        }),)),
+                          }),
+                        )),
                     child: AnimatedImage(
                       image: CachedImageProvider(widget.illust.author.avatar),
                       width: 40,
@@ -530,13 +569,17 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
                 ),
               ),
             if (isFollowing)
-              Button(onPressed: follow, child: const SizedBox(
+              Button(
+                  onPressed: follow,
+                  child: const SizedBox(
                     width: 42,
                     height: 24,
                     child: Center(
                       child: SizedBox.square(
                         dimension: 18,
-                    child: ProgressRing(strokeWidth: 2,),
+                        child: ProgressRing(
+                          strokeWidth: 2,
+                        ),
                       ),
                     ),
                   ))
@@ -564,7 +607,8 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
       isBookmarking = true;
     });
     var method = widget.illust.isBookmarked ? "delete" : "add";
-    var res = await Network().addBookmark(widget.illust.id.toString(), method, type);
+    var res =
+        await Network().addBookmark(widget.illust.id.toString(), method, type);
     if (res.error) {
       if (mounted) {
         context.showToast(message: "Network Error");
@@ -579,7 +623,9 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
   }
 
   Iterable<Widget> buildActions(double width) sync* {
-    yield const SizedBox(width: 8,);
+    yield const SizedBox(
+      width: 8,
+    );
 
     void download() {
       DownloadManager().addDownloadingTask(widget.illust);
@@ -598,7 +644,9 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
               const SizedBox(
                 width: 18,
                 height: 18,
-                child: ProgressRing(strokeWidth: 2,),
+                child: ProgressRing(
+                  strokeWidth: 2,
+                ),
               )
             else if (widget.illust.isBookmarked)
               Icon(
@@ -612,7 +660,9 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
                 size: 18,
               ),
             if (showText)
-              const SizedBox(width: 8,),
+              const SizedBox(
+                width: 8,
+              ),
             if (showText)
               if (widget.illust.isBookmarked)
                 Text("Cancel".tl)
@@ -623,7 +673,9 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
       ),
     );
 
-    yield const SizedBox(width: 8,);
+    yield const SizedBox(
+      width: 8,
+    );
 
     if (!widget.illust.downloaded) {
       if (widget.illust.downloading) {
@@ -639,10 +691,14 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
                   size: 18,
                 ),
                 if (showText)
-                  const SizedBox(width: 8,),
+                  const SizedBox(
+                    width: 8,
+                  ),
                 if (showText)
-                  Text("Downloading".tl,
+                  Text(
-                    style: TextStyle(color: ColorScheme.of(context).outline),),
+                    "Downloading".tl,
+                    style: TextStyle(color: ColorScheme.of(context).outline),
+                  ),
               ],
             ),
           ),
@@ -659,9 +715,10 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
                   size: 18,
                 ),
                 if (showText)
-                  const SizedBox(width: 8,),
+                  const SizedBox(
-                if(showText)
+                    width: 8,
-                  Text("Download".tl),
+                  ),
+                if (showText) Text("Download".tl),
               ],
             ),
           ),
@@ -669,7 +726,9 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
       }
     }
 
-    yield const SizedBox(width: 8,);
+    yield const SizedBox(
+      width: 8,
+    );
 
     yield Button(
       onPressed: () => CommentsPage.show(context, widget.illust.id.toString()),
@@ -682,9 +741,10 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
               size: 18,
             ),
             if (showText)
-              const SizedBox(width: 8,),
+              const SizedBox(
-            if(showText)
+                width: 8,
-              Text("Comment".tl),
+              ),
+            if (showText) Text("Comment".tl),
           ],
         ),
       ),
@@ -696,53 +756,89 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
       height: 56,
       child: Row(
         children: [
-          const SizedBox(width: 2,),
+          const SizedBox(
+            width: 2,
+          ),
           Expanded(
             child: Container(
               height: 52,
               decoration: BoxDecoration(
-                  border: Border.all(color: ColorScheme.of(context).outlineVariant, width: 0.6),
+                  border: Border.all(
-                  borderRadius: BorderRadius.circular(4)
+                      color: ColorScheme.of(context).outlineVariant,
-              ),
+                      width: 0.6),
+                  borderRadius: BorderRadius.circular(4)),
               padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
               child: Row(
                 children: [
                   Column(
                     mainAxisSize: MainAxisSize.min,
                     children: [
-                      const Icon(FluentIcons.view, size: 20,),
+                      const Icon(
-                      Text("Views".tl, style: const TextStyle(fontSize: 12),)
+                        FluentIcons.view,
+                        size: 20,
+                      ),
+                      Text(
+                        "Views".tl,
+                        style: const TextStyle(fontSize: 12),
+                      )
                     ],
                   ),
-                  const SizedBox(width: 12,),
+                  const SizedBox(
-                  Text(widget.illust.totalView.toString(), style: TextStyle(color: ColorScheme.of(context).primary, fontWeight: FontWeight.w500, fontSize: 18),)
+                    width: 12,
+                  ),
+                  Text(
+                    widget.illust.totalView.toString(),
+                    style: TextStyle(
+                        color: ColorScheme.of(context).primary,
+                        fontWeight: FontWeight.w500,
+                        fontSize: 18),
+                  )
                 ],
               ),
             ),
           ),
-          const SizedBox(width: 16,),
+          const SizedBox(
-          Expanded(child: Container(
+            width: 16,
+          ),
+          Expanded(
+              child: Container(
             height: 52,
             decoration: BoxDecoration(
-                border: Border.all(color: ColorScheme.of(context).outlineVariant, width: 0.6),
+                border: Border.all(
-                borderRadius: BorderRadius.circular(4)
+                    color: ColorScheme.of(context).outlineVariant, width: 0.6),
-            ),
+                borderRadius: BorderRadius.circular(4)),
             padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
             child: Row(
               children: [
                 Column(
                   mainAxisSize: MainAxisSize.min,
                   children: [
-                    const Icon(FluentIcons.six_point_star, size: 20,),
+                    const Icon(
-                    Text("Favorites".tl, style: const TextStyle(fontSize: 12),)
+                      FluentIcons.six_point_star,
+                      size: 20,
+                    ),
+                    Text(
+                      "Favorites".tl,
+                      style: const TextStyle(fontSize: 12),
+                    )
                   ],
                 ),
-                const SizedBox(width: 12,),
+                const SizedBox(
-                Text(widget.illust.totalBookmarks.toString(), style: TextStyle(color: ColorScheme.of(context).primary, fontWeight: FontWeight.w500, fontSize: 18),)
+                  width: 12,
+                ),
+                Text(
+                  widget.illust.totalBookmarks.toString(),
+                  style: TextStyle(
+                      color: ColorScheme.of(context).primary,
+                      fontWeight: FontWeight.w500,
+                      fontSize: 18),
+                )
               ],
             ),
           )),
-          const SizedBox(width: 2,),
+          const SizedBox(
+            width: 2,
+          ),
         ],
       ),
     );
@@ -767,7 +863,10 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
               },
               child: Card(
                 padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 6),
-                child: Text(text, style: const TextStyle(fontSize: 13),),
+                child: Text(
+                  text,
+                  style: const TextStyle(fontSize: 13),
+                ),
               ),
             ),
           );
@@ -789,7 +888,9 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
                   const SizedBox(
                     width: 18,
                     height: 18,
-                    child: ProgressRing(strokeWidth: 2,),
+                    child: ProgressRing(
+                      strokeWidth: 2,
+                    ),
                   )
                 else if (widget.illust.isBookmarked)
                   Icon(
@@ -802,7 +903,9 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
                     Icons.favorite_border,
                     size: 18,
                   ),
-                  const SizedBox(width: 8,),
+                const SizedBox(
+                  width: 8,
+                ),
                 if (widget.illust.isBookmarked)
                   Text("Cancel".tl)
                 else
@@ -811,23 +914,33 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
             ),
           ),
         ),
-        const SizedBox(width: 6,),
+        const SizedBox(
+          width: 6,
+        ),
         Button(
           onPressed: () {
-            Share.share("${widget.illust.title}\nhttps://pixiv.net/artworks/${widget.illust.id}");
+            Share.share(
+                "${widget.illust.title}\nhttps://pixiv.net/artworks/${widget.illust.id}");
           },
           child: SizedBox(
             height: 28,
             child: Row(
               children: [
-                const Icon(Icons.share, size: 18,),
+                const Icon(
-                const SizedBox(width: 8,),
+                  Icons.share,
+                  size: 18,
+                ),
+                const SizedBox(
+                  width: 8,
+                ),
                 Text("Share".tl)
               ],
             ),
           ),
         ),
-        const SizedBox(width: 6,),
+        const SizedBox(
+          width: 6,
+        ),
         Button(
           onPressed: () {
             var text = "https://pixiv.net/artworks/${widget.illust.id}";
@@ -839,13 +952,17 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
             child: Row(
               children: [
                 const Icon(Icons.copy, size: 18),
-                const SizedBox(width: 8,),
+                const SizedBox(
+                  width: 8,
+                ),
                 Text("Link".tl)
               ],
             ),
           ),
         ),
-        const SizedBox(width: 6,),
+        const SizedBox(
+          width: 6,
+        ),
         Button(
           onPressed: () {
             context.to(() => _RelatedIllustsPage(widget.illust.id.toString()));
@@ -855,7 +972,9 @@ class _BottomBarState extends State<_BottomBar> with TickerProviderStateMixin{
             child: Row(
               children: [
                 const Icon(Icons.stars, size: 18),
-                const SizedBox(width: 8,),
+                const SizedBox(
+                  width: 8,
+                ),
                 Text("Related".tl)
               ],
             ),
@@ -896,7 +1015,8 @@ class _RelatedIllustsPage extends StatefulWidget {
   State<_RelatedIllustsPage> createState() => _RelatedIllustsPageState();
 }
 
-class _RelatedIllustsPageState extends MultiPageLoadingState<_RelatedIllustsPage, Illust> {
+class _RelatedIllustsPageState
+    extends MultiPageLoadingState<_RelatedIllustsPage, Illust> {
   @override
   Widget? buildFrame(BuildContext context, Widget child) {
     return Column(
@@ -913,8 +1033,8 @@ class _RelatedIllustsPageState extends MultiPageLoadingState<_RelatedIllustsPage
   Widget buildContent(BuildContext context, final List<Illust> data) {
     return LayoutBuilder(builder: (context, constrains) {
       return MasonryGridView.builder(
-        padding: const EdgeInsets.symmetric(horizontal: 8)
+        padding: const EdgeInsets.symmetric(horizontal: 8) +
-            + EdgeInsets.only(bottom: context.padding.bottom),
+            EdgeInsets.only(bottom: context.padding.bottom),
         gridDelegate: const SliverSimpleGridDelegateWithMaxCrossAxisExtent(
           maxCrossAxisExtent: 240,
         ),
@@ -946,4 +1066,3 @@ class _RelatedIllustsPageState extends MultiPageLoadingState<_RelatedIllustsPage
     return res;
   }
 }
-