page view

lib/components/illust_widget.dart

@@ -10,10 +10,12 @@ import '../pages/illust_page.dart';
 import 'md.dart';
 
 class IllustWidget extends StatefulWidget {
-  const IllustWidget(this.illust, {super.key});
+  const IllustWidget(this.illust, {this.onTap, super.key});
 
   final Illust illust;
 
+  final void Function()? onTap;
+
   @override
   State<IllustWidget> createState() => _IllustWidgetState();
 }
@@ -45,7 +47,7 @@ class _IllustWidgetState extends State<IllustWidget> {
                   padding: EdgeInsets.zero,
                   margin: EdgeInsets.zero,
                   child: GestureDetector(
-                    onTap: (){
+                    onTap: widget.onTap ?? (){
                       context.to(() => IllustPage(widget.illust, favoriteCallback: (v) {
                         setState(() {
                           widget.illust.isBookmarked = v;

lib/network/network.dart

@@ -208,13 +208,14 @@ class Network {
     }
   }
 
+  static const recommendationUrl = "/v1/illust/recommended?include_privacy_policy=true&filter=for_android&include_ranking_illusts=true";
+
   Future<Res<List<Illust>>> getRecommendedIllusts() async {
-    var res = await apiGet(
+    var res = await apiGet(recommendationUrl);
-        "/v1/illust/recommended?include_privacy_policy=true&filter=for_android&include_ranking_illusts=true");
     if (res.success) {
       return Res((res.data["illusts"] as List)
           .map((e) => Illust.fromJson(e))
-          .toList());
+          .toList(), subData: recommendationUrl);
     } else {
       return Res.error(res.errorMessage);
     }

lib/pages/bookmarks.dart

@@ -5,6 +5,7 @@ import 'package:pixes/components/segmented_button.dart';
 import 'package:pixes/components/title_bar.dart';
 import 'package:pixes/foundation/app.dart';
 import 'package:pixes/network/network.dart';
+import 'package:pixes/pages/illust_page.dart';
 import 'package:pixes/utils/translation.dart';
 
 import '../components/illust_widget.dart';
@@ -83,7 +84,13 @@ class _OneBookmarkedPageState extends MultiPageLoadingState<_OneBookmarkedPage,
           if(index == data.length - 1){
             nextPage();
           }
-          return IllustWidget(data[index]);
+          return IllustWidget(data[index], onTap: () {
+            context.to(() => IllustGalleryPage(
+              illusts: data,
+              initialPage: index,
+              nextUrl: nextUrl
+            ));
+          },);
         },
       );
     });

lib/pages/following_artworks.dart

@@ -9,6 +9,7 @@ import '../components/illust_widget.dart';
 import '../components/loading.dart';
 import '../components/segmented_button.dart';
 import '../network/network.dart';
+import 'illust_page.dart';
 
 class FollowingArtworksPage extends StatefulWidget {
   const FollowingArtworksPage({super.key});
@@ -84,7 +85,13 @@ class _OneFollowingPageState extends MultiPageLoadingState<_OneFollowingPage, Il
           if(index == data.length - 1){
             nextPage();
           }
-          return IllustWidget(data[index]);
+          return IllustWidget(data[index], onTap: () {
+            context.to(() => IllustGalleryPage(
+                illusts: data,
+                initialPage: index,
+                nextUrl: nextUrl
+            ));
+          });
         },
       );
     });

lib/pages/history.dart

@@ -4,11 +4,11 @@ import 'package:pixes/appdata.dart';
 import 'package:pixes/components/loading.dart';
 import 'package:pixes/components/title_bar.dart';
 import 'package:pixes/foundation/app.dart';
-import 'package:pixes/network/models.dart';
 import 'package:pixes/network/network.dart';
 import 'package:pixes/utils/translation.dart';
 
 import '../components/illust_widget.dart';
+import 'illust_page.dart';
 
 class HistoryPage extends StatefulWidget {
   const HistoryPage({super.key});
@@ -36,7 +36,12 @@ class _HistoryPageState extends MultiPageLoadingState<HistoryPage, Illust> {
                 if(index == data.length - 1){
                   nextPage();
                 }
-                return IllustWidget(data[index]);
+                return IllustWidget(data[index], onTap: () {
+                  context.to(() => IllustGalleryPage(
+                      illusts: data,
+                      initialPage: index,
+                  ));
+                });
               },
             );
           }),

lib/pages/illust_page.dart

@@ -28,17 +28,100 @@ import '../components/ugoira.dart';
 const _kBottomBarHeight = 64.0;
 
 class IllustGalleryPage extends StatefulWidget {
-  const IllustGalleryPage({super.key});
+  const IllustGalleryPage({required this.illusts, required this.initialPage,
+    this.nextUrl, super.key});
+
+  final List<Illust> illusts;
+
+  final int initialPage;
+
+  final String? nextUrl;
 
   @override
   State<IllustGalleryPage> createState() => _IllustGalleryPageState();
 }
 
 class _IllustGalleryPageState extends State<IllustGalleryPage> {
+  late List<Illust> illusts;
+
+  late final PageController controller;
+
+  String? nextUrl;
+
+  bool loading = false;
+
+  @override
+  void initState() {
+    illusts = List.from(widget.illusts);
+    controller = PageController(initialPage: widget.initialPage);
+    nextUrl = widget.nextUrl;
+    if(nextUrl == "end") {
+      nextUrl = null;
+    }
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
-    // TODO
+    var length = illusts.length;
-    return const Placeholder();
+    if(nextUrl != null) {
+      length++;
+    }
+
+    return CallbackShortcuts(
+      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]);
+          },
+        ),
+      ),
+    );
+  }
+
+  Widget buildLast(){
+    if(nextUrl == null) {
+      return const SizedBox();
+    }
+    load();
+    return const Center(
+      child: ProgressRing(),
+    );
+  }
+
+  void load() async {
+    if(loading) return;
+    loading = true;
+
+    var res = await Network().getIllustsWithNextUrl(nextUrl!);
+    loading = false;
+    if(res.error) {
+      if(mounted) {
+        context.showToast(message: "Network Error");
+      }
+    } else {
+      nextUrl = res.subData;
+      illusts.addAll(res.data);
+      setState(() {});
+    }
   }
 }
 
@@ -964,7 +1047,7 @@ class _IllustPageWithIdState extends LoadingState<IllustPageWithId, Illust> {
 }
 
 class _RelatedIllustsPage extends StatefulWidget {
-  const _RelatedIllustsPage(this.id, {super.key});
+  const _RelatedIllustsPage(this.id);
 
   final String id;
 

lib/pages/ranking.dart

@@ -8,6 +8,7 @@ import '../components/illust_widget.dart';
 import '../components/loading.dart';
 import '../components/title_bar.dart';
 import '../network/network.dart';
+import 'illust_page.dart';
 
 class RankingPage extends StatefulWidget {
   const RankingPage({super.key});
@@ -97,7 +98,13 @@ class _OneRankingPageState extends MultiPageLoadingState<_OneRankingPage, Illust
           if(index == data.length - 1){
             nextPage();
           }
-          return IllustWidget(data[index]);
+          return IllustWidget(data[index], onTap: () {
+            context.to(() => IllustGalleryPage(
+                illusts: data,
+                initialPage: index,
+                nextUrl: nextUrl
+            ));
+          });
         },
       );
     });

lib/pages/recommendation_page.dart

@@ -5,6 +5,7 @@ import 'package:pixes/components/loading.dart';
 import 'package:pixes/components/title_bar.dart';
 import 'package:pixes/foundation/app.dart';
 import 'package:pixes/network/network.dart';
+import 'package:pixes/pages/illust_page.dart';
 import 'package:pixes/utils/translation.dart';
 
 import '../components/grid.dart';
@@ -82,7 +83,10 @@ class _RecommendationArtworksPageState extends MultiPageLoadingState<_Recommenda
           if(index == data.length - 1){
             nextPage();
           }
-          return IllustWidget(data[index]);
+          return IllustWidget(data[index], onTap: () {
+            context.to(() => IllustGalleryPage(illusts: data,
+              initialPage: index, nextUrl: Network.recommendationUrl,));
+          },);
         },
       );
     });

lib/pages/search_page.dart

@@ -426,7 +426,13 @@ class _SearchResultPageState extends MultiPageLoadingState<SearchResultPage, Ill
               if(index == data.length - 1){
                 nextPage();
               }
-              return IllustWidget(data[index]);
+              return IllustWidget(data[index], onTap: () {
+                context.to(() => IllustGalleryPage(
+                    illusts: data,
+                    initialPage: index,
+                    nextUrl: nextUrl
+                ));
+              },);
             },
             childCount: data.length,
           ),

lib/pages/user_info_page.dart

@@ -15,6 +15,7 @@ import 'package:pixes/utils/translation.dart';
 import 'package:url_launcher/url_launcher_string.dart';
 
 import '../components/illust_widget.dart';
+import 'illust_page.dart';
 
 class UserInfoPage extends StatefulWidget {
   const UserInfoPage(this.id, {this.followCallback, super.key});
@@ -311,7 +312,13 @@ class _UserArtworksState extends MultiPageLoadingState<_UserArtworks, Illust> {
           if(index == data.length - 1){
             nextPage();
           }
-          return IllustWidget(data[index]);
+          return IllustWidget(data[index], onTap: () {
+            context.to(() => IllustGalleryPage(
+                illusts: data,
+                initialPage: index,
+                nextUrl: nextUrl
+            ));
+          });
         },
         childCount: data.length,
       ),