kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2025-09-12 23:45:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Shimmer Loading animations for Playlist,Album, artist & categories

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2022-06-14 14:52:39 +06:00
parent b4bb93c81e
commit 063b239b5d
16 changed files with 619 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
lib/components/Album/AlbumView.dart
View File

@ -1,6 +1,7 @@
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:spotify/spotify.dart';
import 'package:spotube/components/LoaderShimmers/ShimmerTrackTile.dart';
import 'package:spotube/components/Shared/HeartButton.dart';
import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
import 'package:spotube/components/Shared/TracksTableView.dart';
@ -122,7 +123,7 @@ class AlbumView extends HookConsumerWidget {
);
},
error: (error, _) => Text("Error $error"),
loading: () => const CircularProgressIndicator(),
loading: () => const ShimmerTrackTile(),
),
],
),

1
lib/components/Artist/ArtistCard.dart
View File

@ -1,7 +1,6 @@
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:marquee/marquee.dart';
import 'package:spotify/spotify.dart';
import 'package:spotube/components/Shared/SpotubeMarqueeText.dart';

17
lib/components/Artist/ArtistProfile.dart
View File

@ -7,6 +7,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:spotify/spotify.dart';
import 'package:spotube/components/Album/AlbumCard.dart';
import 'package:spotube/components/Artist/ArtistCard.dart';
import 'package:spotube/components/LoaderShimmers/ShimmerArtistProfile.dart';
import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
import 'package:spotube/components/Shared/TrackTile.dart';
import 'package:spotube/helpers/image-to-url-string.dart';
@ -14,7 +15,6 @@ import 'package:spotube/helpers/readable-number.dart';
import 'package:spotube/helpers/zero-pad-num-str.dart';
import 'package:spotube/hooks/useBreakpointValue.dart';
import 'package:spotube/hooks/useBreakpoints.dart';
import 'package:spotube/hooks/useForceUpdate.dart';
import 'package:spotube/models/CurrentPlaylist.dart';
import 'package:spotube/models/Logger.dart';
import 'package:spotube/provider/Playback.dart';
@ -49,7 +49,6 @@ class ArtistProfile extends HookConsumerWidget {
);
final breakpoint = useBreakpoints();
final update = useForceUpdate();
final Playback playback = ref.watch(playbackProvider);
@ -144,9 +143,7 @@ class ArtistProfile extends HookConsumerWidget {
}
},
child: Text(
isFollowing
? "Following"
: "Follow",
isFollowing ? "Following" : "Follow",
),
);
},
@ -214,8 +211,7 @@ class ArtistProfile extends HookConsumerWidget {
style: Theme.of(context).textTheme.headline4,
),
Container(
margin:
const EdgeInsets.symmetric(horizontal: 5),
margin: const EdgeInsets.symmetric(horizontal: 5),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(50),
@ -237,8 +233,7 @@ class ArtistProfile extends HookConsumerWidget {
String? thumbnailUrl = imageToUrlString(
track.value.album?.images,
index:
(track.value.album?.images?.length ?? 1) -
1);
(track.value.album?.images?.length ?? 1) - 1);
return TrackTile(
playback,
duration: duration,
@ -326,8 +321,8 @@ class ArtistProfile extends HookConsumerWidget {
);
},
error: (_, __) => const Text("Life's miserable"),
loading: () =>
const Center(child: CircularProgressIndicator.adaptive())),
loading: () => const ShimmerArtistProfile(),
),
),
);
}

7
lib/components/Category/CategoryCard.dart
View File

@ -3,6 +3,7 @@ import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';
import 'package:spotify/spotify.dart';
import 'package:spotube/components/LoaderShimmers/ShimmerPlaybuttonCard.dart';
import 'package:spotube/components/Playlist/PlaylistCard.dart';
import 'package:spotube/hooks/usePaginatedFutureProvider.dart';
import 'package:spotube/models/Logger.dart';
@ -71,6 +72,12 @@ class CategoryCard extends HookConsumerWidget {
scrollController: scrollController,
scrollDirection: Axis.horizontal,
builderDelegate: PagedChildBuilderDelegate<PlaylistSimple>(
firstPageProgressIndicatorBuilder: (context) {
return const ShimmerPlaybuttonCard();
},
newPageProgressIndicatorBuilder: (context) {
return const ShimmerPlaybuttonCard();
},
itemBuilder: (context, playlist, index) {
return PlaylistCard(playlist);
},

5
lib/components/Home/Home.dart
View File

@ -11,6 +11,7 @@ import 'package:spotify/spotify.dart' hide Image, Player, Search;
import 'package:spotube/components/Category/CategoryCard.dart';
import 'package:spotube/components/Home/Sidebar.dart';
import 'package:spotube/components/Home/SpotubeNavigationBar.dart';
import 'package:spotube/components/LoaderShimmers/ShimmerCategories.dart';
import 'package:spotube/components/Lyrics/SyncedLyrics.dart';
import 'package:spotube/components/Search/Search.dart';
import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
@ -138,6 +139,10 @@ class Home extends HookConsumerWidget {
pagingController: pagingController,
builderDelegate:
PagedChildBuilderDelegate<Category>(
firstPageProgressIndicatorBuilder: (_) =>
const ShimmerCategories(),
newPageProgressIndicatorBuilder: (_) =>
const ShimmerCategories(),
itemBuilder: (context, item, index) {
return CategoryCard(item);
},

51
lib/components/LoaderShimmers/ShimmerArtistProfile.dart Normal file
View File

@ -0,0 +1,51 @@
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:skeleton_text/skeleton_text.dart';
import 'package:spotube/components/LoaderShimmers/ShimmerTrackTile.dart';
import 'package:spotube/extensions/ShimmerColorTheme.dart';
import 'package:spotube/hooks/useBreakpointValue.dart';
class ShimmerArtistProfile extends HookWidget {
const ShimmerArtistProfile({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final shimmerColor =
Theme.of(context).extension<ShimmerColorTheme>()!.shimmerColor!;
final shimmerBackgroundColor = Theme.of(context)
.extension<ShimmerColorTheme>()!
.shimmerBackgroundColor!;
final avatarWidth = useBreakpointValue(
sm: MediaQuery.of(context).size.width * 0.80,
md: MediaQuery.of(context).size.width * 0.50,
lg: MediaQuery.of(context).size.width * 0.30,
xl: MediaQuery.of(context).size.width * 0.30,
xxl: MediaQuery.of(context).size.width * 0.30,
);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(20),
child: SkeletonAnimation(
shimmerColor: shimmerColor,
borderRadius: BorderRadius.circular(avatarWidth),
shimmerDuration: 1000,
child: Container(
width: avatarWidth,
height: avatarWidth,
decoration: BoxDecoration(
color: shimmerBackgroundColor,
borderRadius: BorderRadius.circular(avatarWidth),
),
),
),
),
const SizedBox(width: 10),
const Flexible(child: ShimmerTrackTile()),
],
);
}
}

44
lib/components/LoaderShimmers/ShimmerCategories.dart Normal file
View File

@ -0,0 +1,44 @@
import 'package:flutter/material.dart';
import 'package:skeleton_text/skeleton_text.dart';
import 'package:spotube/components/LoaderShimmers/ShimmerPlaybuttonCard.dart';
import 'package:spotube/extensions/ShimmerColorTheme.dart';
class ShimmerCategories extends StatelessWidget {
const ShimmerCategories({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final shimmerColor =
Theme.of(context).extension<ShimmerColorTheme>()!.shimmerColor!;
final shimmerBackgroundColor = Theme.of(context)
.extension<ShimmerColorTheme>()!
.shimmerBackgroundColor!;
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 15),
child: SkeletonAnimation(
shimmerColor: shimmerBackgroundColor,
borderRadius: BorderRadius.circular(20),
shimmerDuration: 1000,
child: Container(
width: 150,
height: 15,
decoration: BoxDecoration(
color: shimmerColor,
borderRadius: BorderRadius.circular(10),
),
margin: const EdgeInsets.only(top: 10),
),
),
),
const ShimmerPlaybuttonCard(count: 7),
],
),
);
}
}

87
lib/components/LoaderShimmers/ShimmerPlaybuttonCard.dart Normal file
View File

@ -0,0 +1,87 @@
import 'package:flutter/material.dart';
import 'package:skeleton_text/skeleton_text.dart';
import 'package:spotube/extensions/ShimmerColorTheme.dart';
class ShimmerPlaybuttonCard extends StatelessWidget {
final int count;
const ShimmerPlaybuttonCard({Key? key, this.count = 4}) : super(key: key);
@override
Widget build(BuildContext context) {
final shimmerColor =
Theme.of(context).extension<ShimmerColorTheme>()!.shimmerColor!;
final shimmerBackgroundColor = Theme.of(context)
.extension<ShimmerColorTheme>()!
.shimmerBackgroundColor!;
final card = Stack(
children: [
SkeletonAnimation(
shimmerColor: shimmerColor,
borderRadius: BorderRadius.circular(20),
shimmerDuration: 1000,
child: Container(
width: 200,
height: 220,
decoration: BoxDecoration(
color: shimmerBackgroundColor,
borderRadius: BorderRadius.circular(10),
),
margin: const EdgeInsets.only(top: 10),
),
),
Column(
children: [
SkeletonAnimation(
shimmerColor: shimmerBackgroundColor,
borderRadius: BorderRadius.circular(20),
shimmerDuration: 1000,
child: Container(
width: 200,
height: 180,
decoration: BoxDecoration(
color: shimmerColor,
borderRadius: BorderRadius.circular(10),
),
margin: const EdgeInsets.only(top: 10),
),
),
const SizedBox(height: 5),
SkeletonAnimation(
shimmerColor: shimmerBackgroundColor,
borderRadius: BorderRadius.circular(20),
shimmerDuration: 1000,
child: Container(
width: 150,
height: 10,
decoration: BoxDecoration(
color: shimmerColor,
borderRadius: BorderRadius.circular(10),
),
margin: const EdgeInsets.only(top: 10),
),
),
],
),
],
);
return SingleChildScrollView(
physics: const NeverScrollableScrollPhysics(),
scrollDirection: Axis.horizontal,
child: Row(
children: [
Row(
children: List.generate(
count,
(_) => Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: card,
),
),
),
],
),
);
}
}

85
lib/components/LoaderShimmers/ShimmerTrackTile.dart Normal file
View File

@ -0,0 +1,85 @@
import 'package:flutter/material.dart';
import 'package:skeleton_text/skeleton_text.dart';
import 'package:spotube/extensions/ShimmerColorTheme.dart';
class ShimmerTrackTile extends StatelessWidget {
const ShimmerTrackTile({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final shimmerColor =
Theme.of(context).extension<ShimmerColorTheme>()!.shimmerColor!;
final shimmerBackgroundColor = Theme.of(context)
.extension<ShimmerColorTheme>()!
.shimmerBackgroundColor!;
return Padding(
padding: const EdgeInsets.only(top: 30),
child: ListView.builder(
scrollDirection: Axis.vertical,
physics: const NeverScrollableScrollPhysics(),
itemCount: 5,
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
children: [
SkeletonAnimation(
shimmerColor: shimmerColor,
borderRadius: BorderRadius.circular(20),
shimmerDuration: 1000,
child: Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: shimmerBackgroundColor,
borderRadius: BorderRadius.circular(10),
),
margin: const EdgeInsets.only(top: 10),
),
),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SkeletonAnimation(
shimmerColor: shimmerColor,
borderRadius: BorderRadius.circular(20),
shimmerDuration: 1000,
child: Container(
height: 15,
decoration: BoxDecoration(
color: shimmerBackgroundColor,
borderRadius: BorderRadius.circular(10),
),
margin: const EdgeInsets.only(top: 10),
),
),
SkeletonAnimation(
shimmerColor: shimmerColor,
borderRadius: BorderRadius.circular(20),
shimmerDuration: 1000,
child: Container(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * .8),
height: 10,
decoration: BoxDecoration(
color: shimmerBackgroundColor,
borderRadius: BorderRadius.circular(10),
),
margin: const EdgeInsets.only(top: 10),
),
),
],
),
),
],
),
);
},
),
);
}
}

6
lib/components/Playlist/PlaylistView.dart
View File

@ -2,6 +2,7 @@ import 'dart:convert';
import 'package:flutter/services.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:spotube/components/LoaderShimmers/ShimmerTrackTile.dart';
import 'package:spotube/components/Shared/HeartButton.dart';
import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
import 'package:spotube/components/Shared/TracksTableView.dart';
@ -62,7 +63,7 @@ class PlaylistView extends HookConsumerWidget {
// nav back
const BackButton(),
// heart playlist
if (auth.isLoggedIn)
if (auth.isLoggedIn && playlist.id != "user-liked-tracks")
meSnapshot.when(
data: (me) {
final query = playlistIsFollowedQuery(jsonEncode(
@ -101,6 +102,7 @@ class PlaylistView extends HookConsumerWidget {
loading: () => const CircularProgressIndicator(),
),
if (playlist.id != "user-liked-tracks")
IconButton(
icon: const Icon(Icons.share_rounded),
onPressed: () {
@ -158,7 +160,7 @@ class PlaylistView extends HookConsumerWidget {
);
},
error: (error, _) => Text("Error $error"),
loading: () => const CircularProgressIndicator(),
loading: () => const ShimmerTrackTile(),
),
],
),

1
lib/components/Settings/Settings.dart
View File

@ -4,7 +4,6 @@ import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:spotube/components/Settings/About.dart';
import 'package:spotube/components/Settings/ColorSchemePickerDialog.dart';
import 'package:spotube/components/Settings/SettingsHotkeyTile.dart';

34
lib/extensions/ShimmerColorTheme.dart Normal file
View File

@ -0,0 +1,34 @@
import 'package:flutter/material.dart';
class ShimmerColorTheme extends ThemeExtension<ShimmerColorTheme> {
final Color? shimmerColor;
final Color? shimmerBackgroundColor;
ShimmerColorTheme({
this.shimmerBackgroundColor,
this.shimmerColor,
});
@override
ThemeExtension<ShimmerColorTheme> copyWith(
{Color? shimmerColor, Color? shimmerBackgroundColor}) {
return ShimmerColorTheme(
shimmerBackgroundColor:
shimmerBackgroundColor ?? this.shimmerBackgroundColor,
shimmerColor: shimmerColor ?? this.shimmerColor,
);
}
@override
ThemeExtension<ShimmerColorTheme> lerp(
ThemeExtension<ShimmerColorTheme>? other, double t) {
if (other is! ShimmerColorTheme) {
return this;
}
return ShimmerColorTheme(
shimmerBackgroundColor:
Color.lerp(shimmerBackgroundColor, other.shimmerBackgroundColor, t),
shimmerColor: Color.lerp(shimmerColor, other.shimmerColor, t),
);
}
}

7
lib/themes/dark-theme.dart
View File

@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:spotube/extensions/ShimmerColorTheme.dart';
ThemeData darkTheme({
required MaterialColor accentMaterialColor,
@ -7,6 +8,12 @@ ThemeData darkTheme({
return ThemeData(
useMaterial3: true,
brightness: Brightness.dark,
extensions: [
ShimmerColorTheme(
shimmerBackgroundColor: backgroundMaterialColor[700],
shimmerColor: backgroundMaterialColor[800],
)
],
primaryColor: accentMaterialColor,
primarySwatch: accentMaterialColor,
backgroundColor: backgroundMaterialColor[900],

11
lib/themes/light-theme.dart
View File

@ -1,14 +1,15 @@
import 'package:flutter/material.dart';
import 'package:spotube/extensions/ShimmerColorTheme.dart';
final materialWhite = MaterialColor(Colors.white.value, {
50: Colors.white,
100: Colors.blueGrey[50]!,
200: Colors.white,
300: Colors.white,
400: Colors.white,
400: Colors.blueGrey[300]!,
500: Colors.blueGrey,
600: Colors.white,
700: Colors.white,
700: Colors.grey[700]!,
800: Colors.white,
900: Colors.white,
});
@ -19,6 +20,12 @@ ThemeData lightTheme({
}) {
return ThemeData(
useMaterial3: true,
extensions: [
ShimmerColorTheme(
shimmerBackgroundColor: backgroundMaterialColor[200],
shimmerColor: backgroundMaterialColor[300],
)
],
primaryColor: accentMaterialColor,
primarySwatch: accentMaterialColor,
buttonTheme: ButtonThemeData(

7
pubspec.lock
View File

@ -702,6 +702,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.1"
skeleton_text:
dependency: "direct main"
description:
name: skeleton_text
url: "https://pub.dartlang.org"
source: hosted
version: "3.0.0"
sky_engine:
dependency: transitive
description: flutter

1
pubspec.yaml
View File

@ -61,6 +61,7 @@ dependencies:
version: ^2.0.0
audio_service: ^0.18.4
hookified_infinite_scroll_pagination: ^0.1.0
skeleton_text: ^3.0.0
dev_dependencies:
flutter_test: