feat: reorderable list

riccardoFasan · Sep 28, 2024 · 94a8051 · 94a8051
1 parent 7701796
commit 94a8051
Show file tree

Hide file tree

Showing 13 changed files with 104 additions and 58 deletions.
diff --git a/lib/app.dart b/lib/app.dart
@@ -29,8 +29,10 @@ class YouTubeDownloaderApp extends StatelessWidget {
             titleTextStyle:
                 TextStyle(fontWeight: FontWeight.w800, fontSize: 26),
           ),
-          textSelectionTheme:
-              const TextSelectionThemeData(cursorColor: AppColors.red),
+          textSelectionTheme: const TextSelectionThemeData(
+            cursorColor: AppColors.red,
+            selectionHandleColor: AppColors.red,
+          ),
           dialogTheme: const DialogTheme(
             backgroundColor: AppColors.black,
             titleTextStyle: TextStyle(

diff --git a/lib/controllers/download_controller.dart b/lib/controllers/download_controller.dart
@@ -29,6 +29,13 @@ class DownloadController extends GetxController {
     _init();
   }
 
+  Future<void> reorder(int oldIndex, int newIndex) async {
+    final Audio audio = _audios.removeAt(oldIndex);
+    final int targetIndex = newIndex > oldIndex ? newIndex - 1 : newIndex;
+    _audios.insert(targetIndex, audio);
+    _update();
+  }
+
   Future<void> download(AudioInfo info) async {
     _subscriptions[info.url] = _getAudioAndSave(info).asStream().listen((_) {
       _subscriptions.remove(info.url);

diff --git a/lib/pages/home_page.dart b/lib/pages/home_page.dart
@@ -1,8 +1,10 @@
+import 'dart:ui';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:youtube_downloader/models/models.dart';
 import 'package:youtube_downloader/pages/pages.dart';
 import 'package:youtube_downloader/controllers/controllers.dart';
+import 'package:youtube_downloader/utils/colors.dart';
 import 'package:youtube_downloader/widgets/widgets.dart';
 
 class HomePage extends StatelessWidget {
@@ -23,9 +25,13 @@ class HomePage extends StatelessWidget {
 
   Widget _buildList() {
     return Obx(
-      () => ListView(
+      () => ReorderableListView(
         shrinkWrap: true,
+        proxyDecorator: _proxyDecorator,
         scrollDirection: Axis.vertical,
+        onReorder: (int oldIndex, int newIndex) {
+          _downloadController.reorder(oldIndex, newIndex);
+        },
         children: <Widget>[
           ..._downloadController.audios.map(
             (Audio audio) => _buildAudioTile(audio),
@@ -36,16 +42,13 @@ class HomePage extends StatelessWidget {
   }
 
   Widget _buildAudioTile(Audio audio) {
-    return Obx(
-      () => AudioTile(
-        key: ValueKey(audio.id),
-        audio: audio,
-        removeCallback: _removeAudio,
-        tapCallback: _playAudio,
-        current: _playerController.isSelected(audio),
-        playing:
-            _playerController.isSelected(audio) && _playerController.playing,
-      ),
+    return AudioTile(
+      key: ValueKey(audio.id),
+      audio: audio,
+      removeCallback: _removeAudio,
+      tapCallback: _playAudio,
+      current: _playerController.isSelected(audio),
+      playing: _playerController.isSelected(audio) && _playerController.playing,
     );
   }
 
@@ -57,4 +60,21 @@ class HomePage extends StatelessWidget {
     _downloadController.delete(audio);
     if (_playerController.isSelected(audio)) _playerController.stop();
   }
+
+  Widget _proxyDecorator(Widget child, int index, Animation<double> animation) {
+    return AnimatedBuilder(
+      animation: animation,
+      builder: (BuildContext context, Widget? child) {
+        final double animValue = Curves.easeInOut.transform(animation.value);
+        final double elevation = lerpDouble(0, 6, animValue)!;
+        return Material(
+          elevation: elevation,
+          color: AppColors.black,
+          shadowColor: Colors.transparent,
+          child: child,
+        );
+      },
+      child: child,
+    );
+  }
 }
diff --git a/lib/utils/colors.dart b/lib/utils/colors.dart
@@ -9,6 +9,7 @@ class AppColors {
   static const Color gray = Color.fromRGBO(68, 68, 68, 1);
   static const Color darkGray = Color.fromRGBO(30, 30, 30, 1);
   static const Color red = Color.fromRGBO(255, 0, 0, 1);
+  static const Color darkRed = Color.fromRGBO(30, 0, 0, 1);
   static const Color green = Color.fromRGBO(13, 177, 106, 1);
 
   const AppColors();

diff --git a/lib/widgets/audio_tile.dart b/lib/widgets/audio_tile.dart
@@ -28,6 +28,7 @@ class AudioTile extends StatelessWidget {
       dismissCallback: () => _removeCallback(_audio),
       icon: AppIcons.trash,
       child: InkWell(
+        borderRadius: BorderRadius.circular(5),
         onTap: () => _tapCallback(_audio),
         child: Padding(
           padding: const EdgeInsets.fromLTRB(18, 10, 18, 10),

diff --git a/lib/widgets/dismissable_tile.dart b/lib/widgets/dismissable_tile.dart
@@ -31,7 +31,7 @@ class DismissableTile extends StatelessWidget {
         secondary ? Alignment.centerRight : Alignment.centerLeft;
     return Container(
       padding: const EdgeInsets.symmetric(horizontal: 20),
-      color: AppColors.red,
+      color: AppColors.darkRed,
       child: Align(
         alignment: alignment,
         child: Icon(
@@ -46,6 +46,8 @@ class DismissableTile extends StatelessWidget {
   Future<bool> _askConfirmation() async {
     final bool? confirmation = await Get.dialog<bool>(
       AlertDialog(
+        shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.all(Radius.circular(10))),
         title: const Text('Are you sure?'),
         content: Text(
           _snackbarText,

diff --git a/lib/widgets/navigation.dart b/lib/widgets/navigation.dart
@@ -84,8 +84,8 @@ class Navigation extends StatelessWidget {
               'Settings',
               () => Get.bottomSheet(SettingsModalSheet(),
                   backgroundColor: AppColors.black,
-                  exitBottomSheetDuration: const Duration(milliseconds: 250),
-                  enterBottomSheetDuration: const Duration(milliseconds: 250)),
+                  exitBottomSheetDuration: const Duration(milliseconds: 150),
+                  enterBottomSheetDuration: const Duration(milliseconds: 150)),
               false,
             ),
           ),
@@ -99,7 +99,7 @@ class Navigation extends StatelessWidget {
     final Color color = active ? AppColors.white : AppColors.lightGray;
     return InkWell(
       onTap: () => onPressed(),
-      borderRadius: BorderRadius.circular(_margin * 2),
+      borderRadius: BorderRadius.circular(_margin),
       child: Padding(
         padding: const EdgeInsets.all(_margin * 2),
         child: Column(

diff --git a/lib/widgets/result_tile.dart b/lib/widgets/result_tile.dart
@@ -19,6 +19,7 @@ class ResultTile extends StatelessWidget {
     final String channel = _result.channel;
     return InkWell(
         onTap: () => _tapCallback(),
+        borderRadius: BorderRadius.circular(5),
         child: Padding(
           padding: const EdgeInsets.fromLTRB(18, 10, 18, 10),
           child: Row(

diff --git a/lib/widgets/seeker_bar.dart b/lib/widgets/seeker_bar.dart
@@ -25,11 +25,9 @@ class SeekerBar extends StatelessWidget {
       controller: controller,
       focusNode: focusNode,
       onChanged: (String query) => _searchCallback(query),
-      backgroundColor:
-          const WidgetStatePropertyAll<Color>(AppColors.darkGray),
+      backgroundColor: const WidgetStatePropertyAll<Color>(AppColors.darkGray),
       overlayColor: const WidgetStatePropertyAll<Color>(AppColors.darkGray),
-      surfaceTintColor:
-          const WidgetStatePropertyAll<Color>(AppColors.darkGray),
+      surfaceTintColor: const WidgetStatePropertyAll<Color>(AppColors.darkGray),
       elevation: const WidgetStatePropertyAll<double>(0),
       textStyle: const WidgetStatePropertyAll<TextStyle>(
         TextStyle(

diff --git a/lib/widgets/select_modal_sheet.dart b/lib/widgets/select_modal_sheet.dart
@@ -29,6 +29,13 @@ class SelectModalSheet<T> extends StatelessWidget {
     return Wrap(
       children: [
         Container(
+          decoration: BoxDecoration(
+            color: AppColors.black,
+            borderRadius: const BorderRadius.only(
+              topLeft: Radius.circular(20),
+              topRight: Radius.circular(20),
+            ),
+          ),
           padding: const EdgeInsets.only(top: 22, left: 22, right: 22),
           margin: const EdgeInsets.only(bottom: 12),
           child: Text(

diff --git a/lib/widgets/settings_modal_sheet.dart b/lib/widgets/settings_modal_sheet.dart
@@ -24,6 +24,13 @@ class SettingsModalSheet extends StatelessWidget {
     return Wrap(
       children: [
         Container(
+          decoration: BoxDecoration(
+            color: AppColors.black,
+            borderRadius: const BorderRadius.only(
+              topLeft: Radius.circular(20),
+              topRight: Radius.circular(20),
+            ),
+          ),
           padding: const EdgeInsets.only(top: 22, left: 22, right: 22),
           margin: const EdgeInsets.only(bottom: 12),
           child: const Text(
@@ -63,8 +70,8 @@ class SettingsModalSheet extends StatelessWidget {
                 selected: _settingsController.downloadsQueueSize,
               ),
               backgroundColor: AppColors.black,
-              exitBottomSheetDuration: const Duration(milliseconds: 250),
-              enterBottomSheetDuration: const Duration(milliseconds: 250)),
+              exitBottomSheetDuration: const Duration(milliseconds: 150),
+              enterBottomSheetDuration: const Duration(milliseconds: 150)),
           child: Padding(
             padding: const EdgeInsets.only(
               top: 12,

diff --git a/pubspec.lock b/pubspec.lock
@@ -77,26 +77,26 @@ packages:
     dependency: "direct main"
     description:
       name: cached_network_image
-      sha256: "4a5d8d2c728b0f3d0245f69f921d7be90cae4c2fd5288f773088672c0893f819"
+      sha256: "7c1183e361e5c8b0a0f21a28401eecdbde252441106a9816400dd4c2b2424916"
       url: "https://pub.dev"
     source: hosted
-    version: "3.4.0"
+    version: "3.4.1"
   cached_network_image_platform_interface:
     dependency: transitive
     description:
       name: cached_network_image_platform_interface
-      sha256: ff0c949e323d2a1b52be73acce5b4a7b04063e61414c8ca542dbba47281630a7
+      sha256: "35814b016e37fbdc91f7ae18c8caf49ba5c88501813f73ce8a07027a395e2829"
       url: "https://pub.dev"
     source: hosted
-    version: "4.1.0"
+    version: "4.1.1"
   cached_network_image_web:
     dependency: transitive
     description:
       name: cached_network_image_web
-      sha256: "6322dde7a5ad92202e64df659241104a43db20ed594c41ca18de1014598d7996"
+      sha256: "980842f4e8e2535b8dbd3d5ca0b1f0ba66bf61d14cc3a17a9b4788a3685ba062"
       url: "https://pub.dev"
     source: hosted
-    version: "1.3.0"
+    version: "1.3.1"
   characters:
     dependency: transitive
     description:
@@ -186,10 +186,10 @@ packages:
     dependency: transitive
     description:
       name: flutter_cache_manager
-      sha256: a77f77806a790eb9ba0118a5a3a936e81c4fea2b61533033b2b0c3d50bbde5ea
+      sha256: "400b6592f16a4409a7f2bb929a9a7e38c72cceb8ffb99ee57bbf2cb2cecf8386"
       url: "https://pub.dev"
     source: hosted
-    version: "3.4.0"
+    version: "3.4.1"
   flutter_keyboard_visibility:
     dependency: "direct main"
     description:
@@ -242,18 +242,18 @@ packages:
     dependency: "direct dev"
     description:
       name: flutter_lints
-      sha256: "3f41d009ba7172d5ff9be5f6e6e6abb4300e263aab8866d2a0842ed2a70f8f0c"
+      sha256: "5398f14efa795ffb7a33e9b6a08798b26a180edac4ad7db3f231e40f82ce11e1"
       url: "https://pub.dev"
     source: hosted
-    version: "4.0.0"
+    version: "5.0.0"
   flutter_local_notifications:
     dependency: "direct main"
     description:
       name: flutter_local_notifications
-      sha256: c500d5d9e7e553f06b61877ca6b9c8b92c570a4c8db371038702e8ce57f8a50f
+      sha256: "49eeef364fddb71515bc78d5a8c51435a68bccd6e4d68e25a942c5e47761ae71"
       url: "https://pub.dev"
     source: hosted
-    version: "17.2.2"
+    version: "17.2.3"
   flutter_local_notifications_linux:
     dependency: transitive
     description:
@@ -324,10 +324,10 @@ packages:
     dependency: "direct main"
     description:
       name: icons_launcher
-      sha256: "9b514ffed6ed69b232fd2bf34c44878c8526be71fc74129a658f35c04c9d4a9d"
+      sha256: a7c83fbc837dc6f81944ef35c3756f533bb2aba32fcca5cbcdb2dbcd877d5ae9
       url: "https://pub.dev"
     source: hosted
-    version: "2.1.7"
+    version: "3.0.0"
   image:
     dependency: transitive
     description:
@@ -356,10 +356,10 @@ packages:
     dependency: "direct main"
     description:
       name: just_audio
-      sha256: ee50602364ba83fa6308f5512dd560c713ec3e1f2bc75f0db43618f0d82ef71a
+      sha256: d8e8aaf417d33e345299c17f6457f72bd4ba0c549dc34607abb5183a354edc4d
       url: "https://pub.dev"
     source: hosted
-    version: "0.9.39"
+    version: "0.9.40"
   just_audio_background:
     dependency: "direct main"
     description:
@@ -380,10 +380,10 @@ packages:
     dependency: transitive
     description:
       name: just_audio_web
-      sha256: "0edb481ad4aa1ff38f8c40f1a3576013c3420bf6669b686fe661627d49bc606c"
+      sha256: "9a98035b8b24b40749507687520ec5ab404e291d2b0937823ff45d92cb18d448"
       url: "https://pub.dev"
     source: hosted
-    version: "0.4.11"
+    version: "0.4.13"
   leak_tracker:
     dependency: transitive
     description:
@@ -412,10 +412,10 @@ packages:
     dependency: transitive
     description:
       name: lints
-      sha256: "976c774dd944a42e83e2467f4cc670daef7eed6295b10b36ae8c85bcbf828235"
+      sha256: "3315600f3fb3b135be672bf4a178c55f274bebe368325ae18462c89ac1e3b413"
       url: "https://pub.dev"
     source: hosted
-    version: "4.0.0"
+    version: "5.0.0"
   matcher:
     dependency: transitive
     description:
@@ -548,10 +548,10 @@ packages:
     dependency: "direct main"
     description:
       name: shared_preferences
-      sha256: c272f9cabca5a81adc9b0894381e9c1def363e980f960fa903c604c471b22f68
+      sha256: "746e5369a43170c25816cc472ee016d3a66bc13fcf430c0bc41ad7b4b2922051"
       url: "https://pub.dev"
     source: hosted
-    version: "2.3.1"
+    version: "2.3.2"
   shared_preferences_android:
     dependency: transitive
     description:
@@ -753,10 +753,10 @@ packages:
     dependency: transitive
     description:
       name: web
-      sha256: "97da13628db363c635202ad97068d47c5b8aa555808e7a9411963c533b449b27"
+      sha256: cd3543bd5798f6ad290ea73d210f423502e71900302dde696f8bff84bf89a1cb
       url: "https://pub.dev"
     source: hosted
-    version: "0.5.1"
+    version: "1.1.0"
   xdg_directories:
     dependency: transitive
     description:
@@ -785,10 +785,10 @@ packages:
     dependency: "direct main"
     description:
       name: youtube_explode_dart
-      sha256: "26c9671d638f3396a1bfb2666f586988ee7b0ba3469e478b22a4c1a168bcf6ee"
+      sha256: "133a65907e6cf839ac7643d92dc5c56b37fcebe4f0a8f0e67716dffa500c0ef0"
       url: "https://pub.dev"
     source: hosted
-    version: "2.2.1"
+    version: "2.2.2"
 sdks:
-  dart: ">=3.4.3 <4.0.0"
+  dart: ">=3.5.0 <4.0.0"
   flutter: ">=3.22.0"