added animation to gradient for TopMusicPlayer

bytes7bytes7 · bytes7bytes7 · commit 8031e1d145f9 · 2021-07-13T00:05:38.000+03:00
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -33,7 +33,7 @@ android {
         minSdkVersion 16
         targetSdkVersion 30
         versionCode flutterVersionCode.toInteger()
-        versionName "0.0.12"
+        versionName "0.0.13"
     }
 
     buildTypes {
diff --git a/lib/constants.dart b/lib/constants.dart
@@ -13,6 +13,9 @@ abstract class ConstantColors {
   static const Color disabledColor = Color(0xFFC5C5C5);
   static const Color splashColor = Color(0xFF7F2BCF);
   static const Color highlightColor = Color(0xFFB538A7);
+  // TODO: try this colors
+  // Color(0xFFF13AD3),
+  // Color(0xFF63BAC4),
   static const Color errorColor = Color(0xFFB53850);
 }
 
diff --git a/lib/global/global_parameters.dart b/lib/global/global_parameters.dart
@@ -29,7 +29,7 @@ abstract class GlobalParameters {
   static AnimationController playAnimationController;
   static AnimationController waveController;
   static AnimationController circleController;
-  static PageController musicPageController = PageController();
+  static AnimationController radiusController;
   static final ValueNotifier<bool> playNotifier = ValueNotifier(false);
   static final ValueNotifier<Song> currentSong = ValueNotifier(songs[0]);
   static int songNumber = 0;
@@ -42,10 +42,12 @@ abstract class GlobalParameters {
       playNotifier.value = false;
       playAnimationController.reverse();
       waveController.reverse();
+      radiusController.reverse();
     } else {
       playNotifier.value = true;
       playAnimationController.forward();
       waveController.forward();
+      radiusController.forward();
     }
   }
 
@@ -65,32 +67,36 @@ abstract class GlobalParameters {
     songSeconds.value = 0;
   }
 
+  static void moveToPreviousIndex() {
+    if (songNumber != 0) {
+      songNumber--;
+    } else {
+      songNumber = songs.length - 1;
+    }
+  }
+
   static void previousSong() async {
     if (songs.length > 0) {
-      int index = songs.indexOf(currentSong.value);
-      if (index != 0) {
-        index--;
-      } else {
-        index = songs.length - 1;
-      }
-      Song song = songs[index];
-      songNumber = index;
+      moveToPreviousIndex();
+      Song song = songs[songNumber];
       await song.generateColors();
       currentSong.value = song;
       songSeconds.value = 0;
     }
   }
 
+  static void moveToNextIndex() {
+    if (songNumber != songs.length - 1) {
+      songNumber++;
+    } else {
+      songNumber = 0;
+    }
+  }
+
   static void nextSong() async {
     if (songs.length > 0) {
-      int index = songs.indexOf(currentSong.value);
-      if (index != songs.length - 1) {
-        index++;
-      } else {
-        index = 0;
-      }
-      Song song = songs[index];
-      songNumber = index;
+      moveToNextIndex();
+      Song song = songs[songNumber];
       await song.generateColors();
       currentSong.value = song;
       songSeconds.value = 0;
diff --git a/lib/models/song.dart b/lib/models/song.dart
@@ -34,6 +34,7 @@ class Song {
   Color primaryColor;
   Color firstColor;
   Color secondColor;
+  final randomInstance = Random();
 
   Future<void> generateColors() async {
     if(albumImageUrl.isEmpty) {
@@ -101,8 +102,8 @@ class Song {
         List.generate(
           3,
           (index) => PaletteColor(
-            Color((Random().nextDouble() * 0xFFFFFF).toInt()),
-            Random().nextInt(10000),
+            Color((randomInstance.nextDouble() * 0xFFFFFF).toInt()),
+            randomInstance.nextInt(10000),
           ),
         ),
       );
diff --git a/lib/widgets/middle_music_player.dart b/lib/widgets/middle_music_player.dart
@@ -1,10 +1,15 @@
 part of 'music_player.dart';
 
-class MiddleMusicPlayer extends StatelessWidget {
+class MiddleMusicPlayer extends StatefulWidget {
   MiddleMusicPlayer({
     Key key,
   }) : super(key: key);
 
+  @override
+  State<MiddleMusicPlayer> createState() => _MiddleMusicPlayerState();
+}
+
+class _MiddleMusicPlayerState extends State<MiddleMusicPlayer> {
   @override
   Widget build(BuildContext context) {
     Size size = MediaQuery.of(context).size;
diff --git a/lib/widgets/music_player.dart b/lib/widgets/music_player.dart
@@ -29,15 +29,77 @@ class MusicPlayer extends StatefulWidget {
   _MusicPlayerState createState() => _MusicPlayerState();
 }
 
-class _MusicPlayerState extends State<MusicPlayer> {
-  final ValueNotifier<double> topPlayerOpacity = ValueNotifier(0.0);
-  final ValueNotifier<double> middlePlayerOpacity = ValueNotifier(0.0);
-  final ValueNotifier<double> bottomPlayerOpacity = ValueNotifier(1.0);
-  final ValueNotifier<int> progress = ValueNotifier(0);
+class _MusicPlayerState extends State<MusicPlayer>
+    with SingleTickerProviderStateMixin {
+  ValueNotifier<double> topPlayerOpacity;
+  ValueNotifier<double> middlePlayerOpacity;
+  ValueNotifier<double> bottomPlayerOpacity;
+  ValueNotifier<int> progress;
+  Animation<double> _xTween;
+  Animation<double> _yTween;
+  Animation<double> _radiusTween;
+
+  @override
+  void initState() {
+    topPlayerOpacity = ValueNotifier(0.0);
+    middlePlayerOpacity = ValueNotifier(0.0);
+    bottomPlayerOpacity = ValueNotifier(1.0);
+    progress = ValueNotifier(0);
+    GlobalParameters.radiusController = AnimationController(
+      vsync: this,
+      duration: Duration(milliseconds: 800),
+    );
+    _xTween = Tween<double>(begin:0.0, end: 1.0)
+        .animate(GlobalParameters.radiusController);
+    _radiusTween = Tween<double>(begin: 0.35, end: 1.5)
+        .animate(GlobalParameters.radiusController);
+    super.initState();
+  }
+
+  void initTween(
+      {@required double halfOfHeight,
+      @required double paddingTop,
+      @required double firstSizedBox,
+      @required double firstContainer,
+      @required double secondSizedBox,
+      @required double bigCircleRadius}) {
+    if (_yTween == null) {
+      double begin = (-halfOfHeight +
+              paddingTop +
+              firstSizedBox +
+              firstContainer +
+              secondSizedBox +
+              bigCircleRadius) /
+          halfOfHeight;
+      _yTween = Tween<double>(begin: begin, end: -1.0)
+          .animate(GlobalParameters.radiusController);
+    }
+  }
+
+  @override
+  void dispose() {
+    GlobalParameters.radiusController.dispose();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
     Size size = MediaQuery.of(context).size;
+    final double safeHeight = size.height -
+        MediaQuery.of(context).padding.bottom -
+        MediaQuery.of(context).padding.top;
+    final double firstSizedBox = 10.0;
+    final double firstContainer = 45.0;
+    final double secondSizedBox = safeHeight * 0.05;
+    final double bigCircleRadius = 107.0;
+    initTween(
+      halfOfHeight: size.height / 2,
+      paddingTop: MediaQuery.of(context).padding.top,
+      firstSizedBox: firstSizedBox,
+      firstContainer: firstContainer,
+      secondSizedBox: secondSizedBox,
+      bigCircleRadius: bigCircleRadius,
+    );
     return SnappingSheet(
       controller: GlobalParameters.snappingSheetController,
       initialSnappingPosition: SnappingPosition.pixels(
@@ -88,32 +150,42 @@ class _MusicPlayerState extends State<MusicPlayer> {
                 return Stack(
                   children: [
                     FutureBuilder(
-                        future:
-                            GlobalParameters.currentSong.value.generateColors(),
-                        builder: (context, snapshot) {
-                          return Container(
-                            width: double.infinity,
-                            decoration: BoxDecoration(
-                              color: Theme.of(context).scaffoldBackgroundColor,
-                              gradient: LinearGradient(
-                                colors: [
-                                  GlobalParameters
-                                          .currentSong.value.firstColor ??
+                      future:
+                          GlobalParameters.currentSong.value.generateColors(),
+                      builder: (context, snapshot) {
+                        return AnimatedBuilder(
+                            animation: _xTween,
+                            builder: (context, child) {
+                              return Container(
+                                width: double.infinity,
+                                decoration: BoxDecoration(
+                                  color:
                                       Theme.of(context).scaffoldBackgroundColor,
-                                  GlobalParameters.currentSong.value.secondColor
-                                          ?.withOpacity(0) ??
-                                      Theme.of(context).scaffoldBackgroundColor,
-                                ],
-                                begin: Alignment.topRight,
-                                end: Alignment.centerLeft,
-                              ),
-                              borderRadius: BorderRadius.only(
-                                topLeft: Radius.circular(20),
-                                topRight: Radius.circular(20),
-                              ),
-                            ),
-                          );
-                        }),
+                                  gradient: RadialGradient(
+                                    colors: [
+                                      GlobalParameters
+                                              .currentSong.value.firstColor ??
+                                          Theme.of(context)
+                                              .scaffoldBackgroundColor,
+                                      GlobalParameters
+                                              .currentSong.value.secondColor
+                                              ?.withOpacity(0) ??
+                                          Theme.of(context)
+                                              .scaffoldBackgroundColor,
+                                    ],
+                                    center:
+                                        Alignment(_xTween.value, _yTween.value),
+                                    radius: _radiusTween.value,
+                                  ),
+                                  borderRadius: BorderRadius.only(
+                                    topLeft: Radius.circular(20),
+                                    topRight: Radius.circular(20),
+                                  ),
+                                ),
+                              );
+                            });
+                      },
+                    ),
                     SingleChildScrollView(
                       physics: NeverScrollableScrollPhysics(),
                       child: Column(
@@ -125,7 +197,13 @@ class _MusicPlayerState extends State<MusicPlayer> {
                                 visible: (percent == 0) ? false : true,
                                 child: Opacity(
                                   opacity: percent,
-                                  child: TopMusicPlayer(),
+                                  child: TopMusicPlayer(
+                                    safeHeight: safeHeight,
+                                    firstSizedBox: firstSizedBox,
+                                    firstContainer: firstContainer,
+                                    secondSizedBox: secondSizedBox,
+                                    bigCircleRadius: bigCircleRadius,
+                                  ),
                                 ),
                               );
                             },
diff --git a/lib/widgets/player_controls.dart b/lib/widgets/player_controls.dart
@@ -1,9 +1,14 @@
 part of 'music_player.dart';
 
 class PlayerControls extends StatelessWidget {
-  const PlayerControls({
+  PlayerControls({
     Key key,
-  }) : super(key: key);
+    this.pageController,
+  });
+
+  final PageController pageController;
+  final Duration duration = Duration(milliseconds: 400);
+  final Curve curve = Curves.easeInOut;
 
   @override
   Widget build(BuildContext context) {
@@ -15,7 +20,12 @@ class PlayerControls extends StatelessWidget {
           color: Theme.of(context).focusColor,
           iconSize: 60,
           onPressed: () {
-            GlobalParameters.previousSong();
+            if(pageController!=null){
+              GlobalParameters.moveToPreviousIndex();
+              pageController.animateToPage(GlobalParameters.songNumber, duration: duration, curve: curve);
+            }else {
+              GlobalParameters.previousSong();
+            }
           },
         ),
         ValueListenableBuilder(
@@ -38,7 +48,12 @@ class PlayerControls extends StatelessWidget {
           color: Theme.of(context).focusColor,
           iconSize: 60,
           onPressed: () {
-            GlobalParameters.nextSong();
+            if(pageController!=null){
+              GlobalParameters.moveToNextIndex();
+              pageController.animateToPage(GlobalParameters.songNumber, duration: duration, curve: curve);
+            }else {
+              GlobalParameters.nextSong();
+            }
           },
         ),
       ],
diff --git a/lib/widgets/top_music_player.dart b/lib/widgets/top_music_player.dart
diff --git a/test/widget_test.dart b/test/widget_test.dart

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ android {`
`33`	`33`	`minSdkVersion 16`
`34`	`34`	`targetSdkVersion 30`
`35`	`35`	`versionCode flutterVersionCode.toInteger()`
`36`		`- versionName "0.0.12"`
	`36`	`+ versionName "0.0.13"`
`37`	`37`	`}`
`38`	`38`
`39`	`39`	`buildTypes {`
Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,9 @@ abstract class ConstantColors {`
`13`	`13`	`static const Color disabledColor = Color(0xFFC5C5C5);`
`14`	`14`	`static const Color splashColor = Color(0xFF7F2BCF);`
`15`	`15`	`static const Color highlightColor = Color(0xFFB538A7);`
	`16`	`+ // TODO: try this colors`
	`17`	`+ // Color(0xFFF13AD3),`
	`18`	`+ // Color(0xFF63BAC4),`
`16`	`19`	`static const Color errorColor = Color(0xFFB53850);`
`17`	`20`	`}`
`18`	`21`