Add sliding panel

raag-music · Jan 20, 2022 · 8de980f · 8de980f
1 parent e0a2768
commit 8de980f
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 118 deletions.
diff --git a/lib/provider/audio_helper.dart b/lib/provider/audio_helper.dart
@@ -1,10 +1,12 @@
 import 'dart:io';
 import 'dart:math';
+import 'dart:typed_data';
 
-import 'package:flutter/animation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_audio_query/flutter_audio_query.dart';
 import 'package:http/http.dart' as http;
 import 'package:path_provider/path_provider.dart';
+import 'package:raag/model/music_model.dart';
 
 AnimationController playPauseController;
 
@@ -55,3 +57,23 @@ Future<File> urlToFile(String imageUrl) async {
   return file;
 }
 
+Widget getAlbumArt(Song song, Color iconColor) {
+  final defaultIcon = Icon(Icons.music_note_sharp,
+      size: 24, color: iconColor);
+  if (song?.albumArtwork !=
+      null) // Directly access album art when scoped storage approach is not used (less than Android API level 29)
+    return Image(
+      image: FileImage(File(song.albumArtwork)),
+    );
+  return FutureBuilder(
+    future:
+        FlutterAudioQuery().getArtwork(type: ResourceType.SONG, id: song?.id),
+    builder: (context, snapshot) {
+      Uint8List _imageBytes = snapshot.data;
+      if (_imageBytes == null || _imageBytes.isEmpty)
+        return defaultIcon;
+      else
+        return Image.memory(_imageBytes, fit: BoxFit.cover);
+    },
+  );
+}
diff --git a/lib/provider/player_provider.dart b/lib/provider/player_provider.dart
@@ -1,10 +1,12 @@
 import 'package:audio_manager/audio_manager.dart';
 import 'package:flutter/material.dart';
+import 'package:raag/model/music_model.dart';
 
 enum PlayerState { stopped, playing, paused }
 
 class PlayerProvider extends ChangeNotifier {
   PlayerState playerState;
+  Song nowPlaying;
 
   double _slider = 0.0;
   AudioManager audioManagerInstance = AudioManager.instance;
@@ -51,31 +53,18 @@ class PlayerProvider extends ChangeNotifier {
     });
   }
 
-  void play(String url, String title, String displayName, String albumArtWork) {
+  void play(Song song) {
     if (audioManagerInstance.isPlaying) audioManagerInstance.toPause();
     playerState = PlayerState.playing;
     audioManagerInstance
-        .start("file://$url", title,
-            desc: displayName,
+        .start("file://${song.filePath}", song.title,
+            desc: song.displayName,
             auto: true,
-            cover: albumArtWork ?? 'assets/images/musical.png')
-        .then((err) {
-      print(err);
-    });
-    notifyListeners();
-  }
-
-    void playLocal(String url, String title, String displayName, String albumArtWork) {
-    if (audioManagerInstance.isPlaying) audioManagerInstance.toPause();
-    playerState = PlayerState.playing;
-    audioManagerInstance
-        .start(url, title,
-            desc: displayName,
-            auto: true,
-            cover: albumArtWork ?? 'assets/images/musical.png')
+            cover: song.albumArtwork ?? 'assets/images/musical.png')
         .then((err) {
       print(err);
     });
+    nowPlaying = song;
     notifyListeners();
   }
 
@@ -98,6 +87,7 @@ class PlayerProvider extends ChangeNotifier {
     audioManagerInstance.stop();
     playerState = PlayerState.stopped;
     _slider = 0.0;
+    nowPlaying = null;
     notifyListeners();
     disposePlayer();
   }

diff --git a/lib/view/home_scaffold.dart b/lib/view/home_scaffold.dart
@@ -1,8 +1,6 @@
-import 'package:audio_manager/audio_manager.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
-import 'package:raag/provider/player_provider.dart';
 import 'package:receive_sharing_intent/receive_sharing_intent.dart';
 
 import 'package:raag/provider/settings_provider.dart';
@@ -11,7 +9,6 @@ import 'package:raag/view/playback_controls.dart';
 import 'package:raag/view/settings.dart';
 import 'package:raag/widgets/my_music_list.dart';
 import 'package:raag/provider/audio_helper.dart';
-import 'package:sliding_up_panel/sliding_up_panel.dart';
 
 class HomeScaffold extends StatefulWidget {
   @override

diff --git a/lib/view/now_playing.dart b/lib/view/now_playing.dart
diff --git a/lib/view/playback_controls.dart b/lib/view/playback_controls.dart
@@ -12,7 +12,7 @@ class PlayBackControls extends StatefulWidget {
   _PlayBackControlsState createState() => _PlayBackControlsState();
 }
 
-class _PlayBackControlsState extends State<PlayBackControls>
+class _PlayBackControlsState extends State<PlayBackControls> 
     with TickerProviderStateMixin {
   PanelController panelController = PanelController();
 
@@ -31,12 +31,24 @@ class _PlayBackControlsState extends State<PlayBackControls>
 
   @override
   Widget build(BuildContext context) {
-    final provider = Provider.of<PlayerProvider>(context);
+    final playerProvider = Provider.of<PlayerProvider>(context);
+
+    final sh = MediaQuery.of(context).size.height;
+    final sw = MediaQuery.of(context).size.width;
 
     return SlidingUpPanel(
-      collapsed: CollapsedControls(
-        provider: provider,
-        panelController: panelController,
+      collapsed: ClipRRect(
+        borderRadius: BorderRadius.only(
+          topLeft: Radius.circular(20),
+          topRight: Radius.circular(20),
+        ),
+        child: BackdropFilter(
+          filter: new ImageFilter.blur(sigmaX: 20.0, sigmaY: 20.0),
+          child: CollapsedControls(
+            provider: playerProvider,
+            panelController: panelController,
+          ),
+        ),
       ),
       renderPanelSheet: false,
       controller: panelController,
@@ -52,17 +64,32 @@ class _PlayBackControlsState extends State<PlayBackControls>
             color: Theme.of(context).backgroundColor.withOpacity(0.65),
           ),
           child: BackdropFilter(
-            filter: new ImageFilter.blur(sigmaX: 20.0, sigmaY: 20.0),
-            child: Column(
-              children: [
-                Container(
-                  color: Colors.red,
-                  height: 100,
-                  width: 100,
-                )
-              ],
-            ),
-          ),
+              filter: new ImageFilter.blur(sigmaX: 20.0, sigmaY: 20.0),
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                children: [
+                  Center(
+                    child: Container(
+                      width: sw * .8,
+                      child: Text(
+                        playerProvider.nowPlaying?.title ?? 'Not playing',
+                        style: Theme.of(context)
+                            .textTheme
+                            .headline1
+                            .copyWith(fontSize: sh * .036),
+                        textAlign: TextAlign.center,
+                        softWrap: false,
+                      ),
+                    ),
+                  ),
+                  Container(
+                      color: Theme.of(context).colorScheme.secondary,
+                      width: sh * .35,
+                      height: sh * .35,
+                      child: getAlbumArt(playerProvider.nowPlaying,
+                          Theme.of(context).dividerColor)),
+                ],
+              )),
         ),
       ),
     );

diff --git a/lib/widgets/song_widget.dart b/lib/widgets/song_widget.dart
@@ -1,8 +1,4 @@
-import 'dart:io';
-import 'dart:typed_data';
-
 import 'package:flutter/material.dart';
-import 'package:flutter_audio_query/flutter_audio_query.dart';
 import 'package:provider/provider.dart';
 import 'package:raag/model/music_model.dart';
 import 'package:raag/provider/audio_helper.dart';
@@ -20,27 +16,6 @@ class SongWidget extends StatelessWidget {
     final screenHeight = MediaQuery.of(context).size.height;
     final provider = Provider.of<PlayerProvider>(context, listen: false);
 
-    Widget getAlbumArt(Song song, BuildContext context) {
-      final defaultIcon = Icon(Icons.music_note_sharp,
-          size: 24, color: Theme.of(context).dividerColor);
-      if (song.albumArtwork !=
-          null) // Directly access album art when scoped storage approach is not used (less than Android API level 29)
-        return Image(
-          image: FileImage(File(song.albumArtwork)),
-        );
-      return FutureBuilder(
-        future: FlutterAudioQuery()
-            .getArtwork(type: ResourceType.SONG, id: song.id),
-        builder: (context, snapshot) {
-          Uint8List _imageBytes = snapshot.data;
-          if (_imageBytes == null || _imageBytes.isEmpty)
-            return defaultIcon;
-          else
-            return Image.memory(_imageBytes);
-        },
-      );
-    }
-
     return Column(
       children: [
         Flexible(
@@ -68,8 +43,7 @@ class SongWidget extends StatelessWidget {
                               onTap: () {
                                 if (provider.playerState == PlayerState.playing)
                                   provider.pause();
-                                provider.play(song.filePath, song.title,
-                                    song.displayName, song.albumArtwork);
+                                provider.play(song);
                                 playPauseController.forward();
                               },
                               child: Card(
@@ -88,8 +62,10 @@ class SongWidget extends StatelessWidget {
                                                   .secondary,
                                               width: 50,
                                               height: 50,
-                                              child:
-                                                  getAlbumArt(song, context))),
+                                              child: getAlbumArt(
+                                                  song,
+                                                  Theme.of(context)
+                                                      .dividerColor))),
                                       SizedBox(
                                         width: screenWidth * 0.03,
                                       ),