refactor: move duplicated widgets into one file

gokadzev · gokadzev · commit 10a1a7dc2d1b · 2026-03-08T20:45:34.000+04:00
diff --git a/lib/screens/playlist_page.dart b/lib/screens/playlist_page.dart
@@ -42,6 +42,8 @@ import 'package:musify/utilities/utils.dart';
 import 'package:musify/widgets/edit_playlist_dialog.dart';
 import 'package:musify/widgets/playlist_cube.dart';
 import 'package:musify/widgets/playlist_header.dart';
+import 'package:musify/widgets/playlists_page/playlist_search_bar.dart';
+import 'package:musify/widgets/playlists_page/shuffle_play_button.dart';
 import 'package:musify/widgets/song_bar.dart';
 import 'package:musify/widgets/sort_chips.dart';
 import 'package:musify/widgets/spinner.dart';
@@ -245,8 +247,20 @@ class _PlaylistPageState extends State<PlaylistPage> {
           spacing: 8,
           runSpacing: 8,
           children: [
-            if (songsLength > 0) _buildPlayButton(primaryColor),
-            if (songsLength > 0) _buildShufflePlayButton(primaryColor),
+            if (songsLength > 0)
+              IconButton.filled(
+                icon: Icon(
+                  FluentIcons.play_24_filled,
+                  color: colorScheme.onPrimary,
+                ),
+                iconSize: 24,
+                onPressed: () => audioHandler.playPlaylistSong(
+                  playlist: _playlist,
+                  songIndex: 0,
+                ),
+              ),
+            if (songsLength > 0)
+              ShufflePlayButton(songs: _playlist['list'] as List? ?? []),
             if (widget.playlistId != null && !isUserCreated)
               _buildLikeButton(primaryColor),
             _buildSyncButton(primaryColor),
@@ -275,85 +289,23 @@ class _PlaylistPageState extends State<PlaylistPage> {
         ],
         if (songsLength > 0) ...[
           const SizedBox(height: 16),
-          _buildSearchBar(colorScheme),
+          PlaylistSearchBar(
+            query: _searchQuery,
+            onChanged: (value) {
+              setState(() => _searchQuery = value);
+              _pagingController.refresh();
+            },
+            onCleared: () {
+              setState(() => _searchQuery = '');
+              _pagingController.refresh();
+            },
+          ),
         ],
         const SizedBox(height: 16),
       ],
     );
   }
 
-  Widget _buildSearchBar(ColorScheme colorScheme) {
-    return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 16),
-      child: SearchBar(
-        hintText: context.l10n!.search,
-        leading: Icon(
-          Icons.search_rounded,
-          color: colorScheme.onSurfaceVariant,
-        ),
-        trailing: [
-          if (_searchQuery.isNotEmpty)
-            IconButton(
-              icon: const Icon(Icons.close_rounded),
-              onPressed: () {
-                setState(() => _searchQuery = '');
-                _pagingController.refresh();
-              },
-            ),
-        ],
-        onChanged: (value) {
-          setState(() => _searchQuery = value);
-          _pagingController.refresh();
-        },
-        elevation: const WidgetStatePropertyAll(0),
-        backgroundColor: WidgetStatePropertyAll(
-          colorScheme.surfaceContainerHigh,
-        ),
-        shape: WidgetStatePropertyAll(
-          RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
-        ),
-        padding: const WidgetStatePropertyAll(
-          EdgeInsets.symmetric(horizontal: 12),
-        ),
-      ),
-    );
-  }
-
-  Widget _buildPlayButton(Color primaryColor) {
-    return IconButton.filled(
-      icon: Icon(
-        FluentIcons.play_24_filled,
-        color: Theme.of(context).colorScheme.onPrimary,
-      ),
-      iconSize: 24,
-      onPressed: () =>
-          audioHandler.playPlaylistSong(playlist: _playlist, songIndex: 0),
-    );
-  }
-
-  Widget _buildShufflePlayButton(Color primaryColor) {
-    return IconButton.filledTonal(
-      icon: Icon(FluentIcons.arrow_shuffle_24_filled, color: primaryColor),
-      iconSize: 24,
-      tooltip: 'Shuffle play',
-      onPressed: () async {
-        final playlistSongs = _playlist['list'] as List<dynamic>?;
-        if (playlistSongs == null || playlistSongs.isEmpty) return;
-
-        final shuffledSongs = List<Map>.from(playlistSongs.whereType<Map>());
-        if (shuffledSongs.isEmpty) return;
-
-        shuffledSongs.shuffle();
-
-        await audioHandler.addPlaylistToQueue(
-          shuffledSongs,
-          replace: true,
-          startIndex: 0,
-        );
-      },
-    );
-  }
-
   Widget _buildShareButton(Color primaryColor) {
     return IconButton.filledTonal(
       icon: Icon(FluentIcons.share_24_regular, color: primaryColor),
diff --git a/lib/screens/user_songs_page.dart b/lib/screens/user_songs_page.dart
@@ -30,6 +30,8 @@ import 'package:musify/utilities/flutter_toast.dart';
 import 'package:musify/utilities/utils.dart';
 import 'package:musify/widgets/playlist_cube.dart';
 import 'package:musify/widgets/playlist_header.dart';
+import 'package:musify/widgets/playlists_page/playlist_search_bar.dart';
+import 'package:musify/widgets/playlists_page/shuffle_play_button.dart';
 import 'package:musify/widgets/song_bar.dart';
 import 'package:musify/widgets/sort_chips.dart';
 
@@ -177,7 +179,8 @@ class _UserSongsPageState extends State<UserSongsPage> {
     int songsLength,
     bool isOfflineSongs,
   ) {
-    final primaryColor = Theme.of(context).colorScheme.primary;
+    final colorScheme = Theme.of(context).colorScheme;
+    final primaryColor = colorScheme.primary;
     final isRecentlyPlayed = title == context.l10n!.recentlyPlayed;
 
     return Column(
@@ -188,8 +191,29 @@ class _UserSongsPageState extends State<UserSongsPage> {
           spacing: 8,
           runSpacing: 8,
           children: [
-            if (songsLength > 0) _buildPlayButton(primaryColor, title),
-            if (songsLength > 0) _buildShufflePlayButton(primaryColor),
+            if (songsLength > 0)
+              IconButton.filled(
+                icon: Icon(
+                  FluentIcons.play_24_filled,
+                  color: colorScheme.onPrimary,
+                ),
+                iconSize: 24,
+                onPressed: () {
+                  final songsList = getSongsList(widget.page);
+                  final playlist = {
+                    'ytid': '',
+                    'title': title,
+                    'source': 'user-created',
+                    'list': songsList,
+                  };
+                  audioHandler.playPlaylistSong(
+                    playlist: playlist,
+                    songIndex: 0,
+                  );
+                },
+              ),
+            if (songsLength > 0)
+              ShufflePlayButton(songs: getSongsList(widget.page)),
             if (isRecentlyPlayed && songsLength > 0)
               _buildClearRecentsButton(primaryColor),
           ],
@@ -209,44 +233,19 @@ class _UserSongsPageState extends State<UserSongsPage> {
             },
           ),
         ],
-        if (songsLength > 0) ...[const SizedBox(height: 16), _buildSearchBar()],
+        if (songsLength > 0) ...[
+          const SizedBox(height: 16),
+          PlaylistSearchBar(
+            query: _searchQuery,
+            onChanged: (value) => setState(() => _searchQuery = value),
+            onCleared: () => setState(() => _searchQuery = ''),
+          ),
+        ],
         const SizedBox(height: 16),
       ],
     );
   }
 
-  Widget _buildSearchBar() {
-    final colorScheme = Theme.of(context).colorScheme;
-    return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 16),
-      child: SearchBar(
-        hintText: context.l10n!.search,
-        leading: Icon(
-          Icons.search_rounded,
-          color: colorScheme.onSurfaceVariant,
-        ),
-        trailing: [
-          if (_searchQuery.isNotEmpty)
-            IconButton(
-              icon: const Icon(Icons.close_rounded),
-              onPressed: () => setState(() => _searchQuery = ''),
-            ),
-        ],
-        onChanged: (value) => setState(() => _searchQuery = value),
-        elevation: const WidgetStatePropertyAll(0),
-        backgroundColor: WidgetStatePropertyAll(
-          colorScheme.surfaceContainerHigh,
-        ),
-        shape: WidgetStatePropertyAll(
-          RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
-        ),
-        padding: const WidgetStatePropertyAll(
-          EdgeInsets.symmetric(horizontal: 12),
-        ),
-      ),
-    );
-  }
-
   Widget _buildPlaylistImage(String title, IconData icon) {
     final screenWidth = MediaQuery.sizeOf(context).width;
     final isLandscape = screenWidth > MediaQuery.sizeOf(context).height;
@@ -257,49 +256,6 @@ class _UserSongsPageState extends State<UserSongsPage> {
     );
   }
 
-  Widget _buildPlayButton(Color primaryColor, String title) {
-    final songsList = getSongsList(widget.page);
-    final playlist = {
-      'ytid': '',
-      'title': title,
-      'source': 'user-created',
-      'list': songsList,
-    };
-
-    return IconButton.filled(
-      icon: Icon(
-        FluentIcons.play_24_filled,
-        color: Theme.of(context).colorScheme.onPrimary,
-      ),
-      iconSize: 24,
-      onPressed: () =>
-          audioHandler.playPlaylistSong(playlist: playlist, songIndex: 0),
-    );
-  }
-
-  Widget _buildShufflePlayButton(Color primaryColor) {
-    return IconButton.filledTonal(
-      icon: Icon(FluentIcons.arrow_shuffle_24_filled, color: primaryColor),
-      iconSize: 24,
-      tooltip: 'Shuffle play',
-      onPressed: () async {
-        final songsList = getSongsList(widget.page);
-        if (songsList.isEmpty) return;
-
-        final shuffledSongs = List<Map>.from(songsList.whereType<Map>());
-        if (shuffledSongs.isEmpty) return;
-
-        shuffledSongs.shuffle();
-
-        await audioHandler.addPlaylistToQueue(
-          shuffledSongs,
-          replace: true,
-          startIndex: 0,
-        );
-      },
-    );
-  }
-
   Widget _buildClearRecentsButton(Color primaryColor) {
     return IconButton.filledTonal(
       icon: Icon(FluentIcons.delete_24_regular, color: primaryColor),
diff --git a/lib/widgets/playlists_page/playlist_search_bar.dart b/lib/widgets/playlists_page/playlist_search_bar.dart
@@ -0,0 +1,86 @@
+/*
+ *     Copyright (C) 2026 Valeri Gokadze
+ *
+ *     Musify is free software: you can redistribute it and/or modify
+ *     it under the terms of the GNU General Public License as published by
+ *     the Free Software Foundation, either version 3 of the License, or
+ *     (at your option) any later version.
+ *
+ *     Musify is distributed in the hope that it will be useful,
+ *     but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *     GNU General Public License for more details.
+ *
+ *     You should have received a copy of the GNU General Public License
+ *     along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ *
+ *     For more information about Musify, including how to contribute,
+ *     please visit: https://github.com/gokadzev/Musify
+ */
+
+import 'package:flutter/material.dart';
+import 'package:musify/extensions/l10n.dart';
+
+class PlaylistSearchBar extends StatefulWidget {
+  const PlaylistSearchBar({
+    super.key,
+    required this.query,
+    required this.onChanged,
+    required this.onCleared,
+  });
+
+  final String query;
+  final ValueChanged<String> onChanged;
+  final VoidCallback onCleared;
+
+  @override
+  State<PlaylistSearchBar> createState() => _PlaylistSearchBarState();
+}
+
+class _PlaylistSearchBarState extends State<PlaylistSearchBar> {
+  final _controller = SearchController();
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16),
+      child: SearchBar(
+        controller: _controller,
+        hintText: context.l10n!.search,
+        leading: Icon(
+          Icons.search_rounded,
+          color: colorScheme.onSurfaceVariant,
+        ),
+        trailing: [
+          if (widget.query.isNotEmpty)
+            IconButton(
+              icon: const Icon(Icons.close_rounded),
+              onPressed: () {
+                _controller.clear();
+                widget.onCleared();
+              },
+            ),
+        ],
+        onChanged: widget.onChanged,
+        elevation: const WidgetStatePropertyAll(0),
+        backgroundColor: WidgetStatePropertyAll(
+          colorScheme.surfaceContainerHigh,
+        ),
+        shape: WidgetStatePropertyAll(
+          RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
+        ),
+        padding: const WidgetStatePropertyAll(
+          EdgeInsets.symmetric(horizontal: 12),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/widgets/playlists_page/shuffle_play_button.dart b/lib/widgets/playlists_page/shuffle_play_button.dart
