feat: added sort and tab reversion on anime and manga list

RyanYuuki · Nov 30, 2024 · da3c9b1 · da3c9b1
1 parent 98af645
commit da3c9b1
Show file tree

Hide file tree

Showing 2 changed files with 136 additions and 32 deletions.
diff --git a/lib/pages/Android/user/anilist_pages/anime_list.dart b/lib/pages/Android/user/anilist_pages/anime_list.dart
@@ -7,7 +7,14 @@ import 'package:flutter/material.dart';
 import 'package:iconsax/iconsax.dart';
 import 'package:provider/provider.dart';
 
-class AnimeList extends StatelessWidget {
+class AnimeList extends StatefulWidget {
+  const AnimeList({super.key});
+
+  @override
+  State<AnimeList> createState() => _AnimeListState();
+}
+
+class _AnimeListState extends State<AnimeList> {
   final List<String> tabs = [
     'WATCHING',
     'COMPLETED TV',
@@ -20,8 +27,8 @@ class AnimeList extends StatelessWidget {
     'FAVOURITES',
     'ALL',
   ];
-
-  AnimeList({super.key});
+  bool isReversed = false;
+  bool isItemsReversed = false;
 
   @override
   Widget build(BuildContext context) {
@@ -33,6 +40,27 @@ class AnimeList extends StatelessWidget {
       length: tabs.length,
       child: Scaffold(
         appBar: AppBar(
+          actions: [
+            IconButton(
+                style: ElevatedButton.styleFrom(
+                    backgroundColor: isReversed
+                        ? Theme.of(context).colorScheme.surfaceContainer
+                        : Colors.transparent),
+                onPressed: () {
+                  setState(() {
+                    isReversed = !isReversed;
+                  });
+                },
+                icon: const Icon(Iconsax.arrow_swap_horizontal)),
+            IconButton(
+                onPressed: () {
+                  setState(() {
+                    isItemsReversed = !isItemsReversed;
+                  });
+                },
+                icon: Icon(
+                    isItemsReversed ? Iconsax.arrow_up : Iconsax.arrow_bottom)),
+          ],
           leading: IconButton(
               onPressed: () => Navigator.pop(context),
               icon: const Icon(Icons.arrow_back_ios_new)),
@@ -44,22 +72,42 @@ class AnimeList extends StatelessWidget {
             physics: const BouncingScrollPhysics(),
             tabAlignment: TabAlignment.start,
             isScrollable: true,
-            tabs: tabs
-                .map((tab) => Tab(
-                    child: Text(tab,
-                        style:
-                            const TextStyle(fontFamily: 'Poppins-SemiBold'))))
-                .toList(),
+            tabs: isReversed
+                ? tabs.reversed
+                    .toList()
+                    .map((tab) => Tab(
+                        child: Text(tab,
+                            style: const TextStyle(
+                                fontFamily: 'Poppins-SemiBold'))))
+                    .toList()
+                : tabs
+                    .map((tab) => Tab(
+                        child: Text(tab,
+                            style: const TextStyle(
+                                fontFamily: 'Poppins-SemiBold'))))
+                    .toList(),
           ),
         ),
         backgroundColor: Theme.of(context).colorScheme.surface,
         body: TabBarView(
-          children: tabs
-              .map((tab) => AnimeListContent(
-                    tabType: tab,
-                    animeData: animeList,
-                  ))
-              .toList(),
+          children: isReversed
+              ? tabs.reversed
+                  .toList()
+                  .map((tab) => AnimeListContent(
+                        tabType: tab,
+                        animeData: isItemsReversed
+                            ? animeList.reversed.toList()
+                            : animeList,
+                      ))
+                  .toList()
+              : tabs
+                  .map((tab) => AnimeListContent(
+                        tabType: tab,
+                        animeData: isItemsReversed
+                            ? animeList.reversed.toList()
+                            : animeList,
+                      ))
+                  .toList(),
         ),
       ),
     );
@@ -70,8 +118,11 @@ class AnimeListContent extends StatelessWidget {
   final String tabType;
   final dynamic animeData;
 
-  const AnimeListContent(
-      {super.key, required this.tabType, required this.animeData});
+  const AnimeListContent({
+    super.key,
+    required this.tabType,
+    required this.animeData,
+  });
 
   int getResponsiveCrossAxisCount(double screenWidth, {int itemWidth = 150}) {
     return (screenWidth / itemWidth).floor().clamp(1, 10);
@@ -107,7 +158,8 @@ class AnimeListContent extends StatelessWidget {
         ),
         desktopBuilder: GridView.builder(
           gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-              crossAxisCount: getResponsiveCrossAxisCount(MediaQuery.of(context).size.width),
+              crossAxisCount: getResponsiveCrossAxisCount(
+                  MediaQuery.of(context).size.width),
               mainAxisExtent: 270,
               crossAxisSpacing: 10),
           itemCount: filteredAnimeList.length,

diff --git a/lib/pages/Android/user/anilist_pages/manga_list.dart b/lib/pages/Android/user/anilist_pages/manga_list.dart
@@ -3,9 +3,17 @@ import 'package:anymex/components/platform_builder.dart';
 import 'package:anymex/pages/Android/Manga/details_page.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
+import 'package:iconsax/iconsax.dart';
 import 'package:provider/provider.dart';
 
-class AnilistMangaList extends StatelessWidget {
+class AnilistMangaList extends StatefulWidget {
+  const AnilistMangaList({super.key});
+
+  @override
+  State<AnilistMangaList> createState() => _AnilistMangaListState();
+}
+
+class _AnilistMangaListState extends State<AnilistMangaList> {
   final List<String> tabs = [
     'READING',
     'COMPLETED',
@@ -16,7 +24,8 @@ class AnilistMangaList extends StatelessWidget {
     'ALL',
   ];
 
-  AnilistMangaList({super.key});
+  bool isReversed = false;
+  bool isItemsReversed = false;
 
   @override
   Widget build(BuildContext context) {
@@ -28,31 +37,74 @@ class AnilistMangaList extends StatelessWidget {
       length: tabs.length,
       child: Scaffold(
         appBar: AppBar(
+          actions: [
+            IconButton(
+                style: ElevatedButton.styleFrom(
+                    backgroundColor: isReversed
+                        ? Theme.of(context).colorScheme.surfaceContainer
+                        : Colors.transparent),
+                onPressed: () {
+                  setState(() {
+                    isReversed = !isReversed;
+                  });
+                },
+                icon: const Icon(Iconsax.arrow_swap_horizontal)),
+            IconButton(
+                onPressed: () {
+                  setState(() {
+                    isItemsReversed = !isItemsReversed;
+                  });
+                },
+                icon: Icon(
+                    isItemsReversed ? Iconsax.arrow_up : Iconsax.arrow_bottom)),
+          ],
           leading: IconButton(
               onPressed: () => Navigator.pop(context),
               icon: const Icon(Icons.arrow_back_ios_new)),
           title: Text("$userName's Manga List",
               style: TextStyle(
                   fontSize: 16, color: Theme.of(context).colorScheme.primary)),
           bottom: TabBar(
+            padding: const EdgeInsets.symmetric(horizontal: 10),
+            physics: const BouncingScrollPhysics(),
             tabAlignment: TabAlignment.start,
             isScrollable: true,
-            tabs: tabs
-                .map((tab) => Tab(
-                    child: Text(tab,
-                        style:
-                            const TextStyle(fontFamily: 'Poppins-SemiBold'))))
-                .toList(),
+            tabs: isReversed
+                ? tabs.reversed
+                    .toList()
+                    .map((tab) => Tab(
+                        child: Text(tab,
+                            style: const TextStyle(
+                                fontFamily: 'Poppins-SemiBold'))))
+                    .toList()
+                : tabs
+                    .map((tab) => Tab(
+                        child: Text(tab,
+                            style: const TextStyle(
+                                fontFamily: 'Poppins-SemiBold'))))
+                    .toList(),
           ),
         ),
         backgroundColor: Theme.of(context).colorScheme.surface,
         body: TabBarView(
-          children: tabs
-              .map((tab) => MangaListContent(
-                    tabType: tab,
-                    mangaData: mangaList,
-                  ))
-              .toList(),
+          children: isReversed
+              ? tabs.reversed
+                  .toList()
+                  .map((tab) => MangaListContent(
+                        tabType: tab,
+                        mangaData: isItemsReversed
+                            ? mangaList.reversed.toList()
+                            : mangaList,
+                      ))
+                  .toList()
+              : tabs
+                  .map((tab) => MangaListContent(
+                        tabType: tab,
+                        mangaData: isItemsReversed
+                            ? mangaList.reversed.toList()
+                            : mangaList,
+                      ))
+                  .toList(),
         ),
       ),
     );