- Redesign Homepage

- buffered Album Image

lib/homepage.dart

 import 'dart:async';
 
 import 'package:ambient/widgets/MusicPlayerState.dart';
+import 'package:drop_shadow_image/drop_shadow_image.dart';
 import 'package:flutter/material.dart';
 
 import 'package:flutter/services.dart';
@@ -9,7 +10,6 @@ import 'package:spotify_sdk/models/track.dart';
 import 'package:spotify_sdk/spotify_sdk.dart';
 import 'dart:developer' as developer;
 
-
 import 'main.dart';
 
 void printErr(String msg) {
@@ -18,6 +18,7 @@ void printErr(String msg) {
 
 class HomePage extends StatelessWidget {
   final pageController;
+
   const HomePage({super.key, this.pageController});
 
   @override
@@ -27,9 +28,7 @@ class HomePage extends StatelessWidget {
       builder: (context, snapshot) {
         var data = snapshot.data;
         if (data != null) {
-          MusicPlayerState
-              .of(context)
-              .connected = data.connected;
+          MusicPlayerState.of(context).connected = data.connected;
         }
         return StreamBuilder<void>(
           stream: MusicPlayerState.of(context).rebuildStream.stream,
@@ -41,7 +40,8 @@ class HomePage extends StatelessWidget {
 
   Widget player(BuildContext context) {
     return Stack(children: [
-      Center(child: ListView(
+      Center(
+        child: ListView(
           shrinkWrap: true,
           padding: const EdgeInsets.all(8),
           children: [
@@ -59,7 +59,8 @@ class HomePage extends StatelessWidget {
                         size: 50,
                       ),
                       onPressed: () async {
-                await MusicPlayerState.of(context).connectToSpotifyRemote();
+                        await MusicPlayerState.of(context)
+                            .connectToSpotifyRemote();
                         buildSnackbar(context);
                       },
                     ),
@@ -76,7 +77,8 @@ class HomePage extends StatelessWidget {
                     child: const Center(child: CircularProgressIndicator()))
                 : const SizedBox(),
           ],
-      ),),
+        ),
+      ),
     ]);
   }
 
@@ -113,20 +115,49 @@ class HomePage extends StatelessWidget {
         mainAxisAlignment: MainAxisAlignment.start,
         crossAxisAlignment: CrossAxisAlignment.start,
         children: <Widget>[
-          Text('''
-            ${track.name}
-            ${track.artist.name}
-            ${track.album.name}
-            ''',
-              maxLines: 20,
+          MusicPlayerState.of(context).connected
+              ? Center(
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      MusicPlayerState.of(context).albumImage != null
+                          ? Padding(
+                              padding: const EdgeInsets.only(top: 30),
+                              child: DropShadowImage(
+                                image: Image(
+                                  image: MusicPlayerState.of(context)
+                                      .albumImage!
+                                      .image,
+                                  width: 250,
+                                  height: 250,
+                                ),
+                                offset: Offset(10, 10),
+                                scale: 1,
+                                blurRadius: 10,
+                                borderRadius: 20,
+                              ),
+                            )
+                          : MusicPlayerState.of(context).spotifyImageWidget(),
+                      Container(
+                          alignment: Alignment.topCenter,
+                          padding: const EdgeInsets.all(2),
+                          child: Column(children: [
+                            Padding(
+                              padding: const EdgeInsets.only(top: 20),
+                              child: Text(track.name,
                                   style: const TextStyle(
                                       fontSize: 16.0,
                                       fontWeight: FontWeight.bold,
                                       color: Colors.black)),
-          MusicPlayerState
-              .of(context)
-              .connected
-              ? MusicPlayerState.of(context).spotifyImageWidget()
+                            ),
+                            Padding(
+                              padding: const EdgeInsets.only(top: 1),
+                              child: Text(track.album.name),
+                            ),
+                          ]))
+                    ],
+                  ),
+                )
               : const Text('Connect to see an image...'),
           Row(
             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
@@ -136,8 +167,10 @@ class HomePage extends StatelessWidget {
                   icon: const Padding(
                       padding: EdgeInsets.zero,
                       child: Icon(Icons.skip_previous_outlined)),
-                onPressed: skipPrevious,
-              ),
+                  onPressed: () {
+                    skipPrevious;
+                    MusicPlayerState.of(context).rebuildStream.sink.add(null);
+                  }),
               StreamBuilder<void>(
                 stream: MusicPlayerState.of(context).playStatedStream.stream,
                 builder: (context, _) => ControlButtons(),
@@ -147,8 +180,10 @@ class HomePage extends StatelessWidget {
                   icon: const Padding(
                       padding: EdgeInsets.zero,
                       child: Icon(Icons.skip_next_outlined)),
-                onPressed: skipNext,
-              ),
+                  onPressed: () {
+                    skipNext();
+                    MusicPlayerState.of(context).rebuildStream.sink.add(null);
+                  }),
             ],
           ),
         ],
@@ -159,8 +194,7 @@ class HomePage extends StatelessWidget {
   //Todo Daniel
   Future<void> queue(String songId) async {
     try {
-      await SpotifySdk.queue(
-          spotifyUri: 'spotify:track:$songId');
+      await SpotifySdk.queue(spotifyUri: 'spotify:track:$songId');
     } on PlatformException catch (e) {
       setStatus(e.code, message: e.message);
     } on MissingPluginException {
@@ -241,15 +275,12 @@ class HomePage extends StatelessWidget {
 
   void buildSnackbar(BuildContext context) {
     final snackBar = SnackBar(
-        content: Text(MusicPlayerState
-            .of(context)
-            .connected
+        content: Text(MusicPlayerState.of(context).connected
             ? 'connect to spotify successful'
             : 'connect to spotify failed'));
 
     ScaffoldMessenger.of(context).showSnackBar(snackBar);
   }
-
 }
 
 class ControlButtons extends StatelessWidget {
@@ -259,22 +290,16 @@ class ControlButtons extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    if (MusicPlayerState
-        .of(context)
-        .playerState == null) {
+    if (MusicPlayerState.of(context).playerState == null) {
       return const Text("PlayState is Null");
     } else {
-      if (MusicPlayerState
-          .of(context)
-          .playerState!
-          .isPaused) {
+      if (MusicPlayerState.of(context).playerState!.isPaused) {
         return IconButton(
             icon: const Icon(Icons.play_arrow_outlined),
             iconSize: 50,
             onPressed: () {
               var state = MusicPlayerState.of(context);
-              SpotifySdk.resume()
-                  .then((value) => state.updatePlayerState());
+              SpotifySdk.resume().then((value) => state.updatePlayerState());
             });
       } else {
         return IconButton(
@@ -283,8 +308,7 @@ class ControlButtons extends StatelessWidget {
           color: primaryColor,
           onPressed: () {
             var state = MusicPlayerState.of(context);
-            SpotifySdk.pause()
-                .then((value) => state.updatePlayerState());
+            SpotifySdk.pause().then((value) => state.updatePlayerState());
           },
         );
       }

lib/main.dart

@@ -133,7 +133,7 @@ class MusicBar extends StatelessWidget {
         color: Colors.grey,
         child: Row(
           children: [
-            MusicPlayerState.of(context).albumImage,
+            MusicPlayerState.of(context).albumImage!,
             StreamBuilder<void>(
               stream: MusicPlayerState.of(context).playStatedStream.stream,
               builder: (context, _) => ControlButtons(),

lib/widgets/musicPlayerState.dart

@@ -17,7 +17,7 @@ class MusicPlayerState extends InheritedWidget {
   StreamController<void> playStatedStream = StreamController.broadcast();
   PlayerState? playerState;
   late ImageUri? currentTrackImageUri;
-  late Image albumImage;
+  Image? albumImage;
 
 
   static MusicPlayerState? maybeOf(BuildContext context) =>
@@ -37,6 +37,7 @@ class MusicPlayerState extends InheritedWidget {
   void updatePlayerState() async {
     playerState = await getPlayerState();
     currentTrackImageUri = playerState?.track?.imageUri;
+    spotifyImageWidget();
     //rebuildStream.sink.add(null);
     playStatedStream.sink.add(null);
   }
@@ -90,7 +91,8 @@ class MusicPlayerState extends InheritedWidget {
         builder: (BuildContext context, AsyncSnapshot<Uint8List?> snapshot) {
           if (snapshot.hasData) {
             albumImage = Image.memory(snapshot.data!);
-            return albumImage;
+            rebuildStream.sink.add(null);
+            return const Center(child: Text('Getting image...'));
           } else if (snapshot.hasError) {
             setStatus(snapshot.error.toString());
             return SizedBox(

pubspec.lock

@@ -99,6 +99,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "4.0.6"
+  drop_shadow_image:
+    dependency: "direct main"
+    description:
+      name: drop_shadow_image
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.9.1"
   fake_async:
     dependency: transitive
     description:

pubspec.yaml

@@ -49,6 +49,7 @@ dependencies:
   cloud_firestore: ^4.3.0
   spotify_sdk: ^2.3.0
   flutter_dotenv: ^5.0.2
+  drop_shadow_image: ^0.9.1
 
 dev_dependencies:
   flutter_test: