Skip to content

Commit

Permalink
feat: static shimmer for track tile, playbutton card and track tile
Browse files Browse the repository at this point in the history
  • Loading branch information
@KRTirtho
KRTirtho committed Dec 7, 2022
1 parent 69995be commit 3ed8b0f
Show file tree
Hide file tree
Showing 3 changed files with 244 additions and 163 deletions.
27 changes: 12 additions & 15 deletions lib/components/LoaderShimmers/ShimmerCategories.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,25 +20,22 @@ class ShimmerCategories extends StatelessWidget {
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
Container(
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),
),
height: 10,
width: 100,
decoration: BoxDecoration(
color: shimmerBackgroundColor,
borderRadius: BorderRadius.circular(10),
),
),
const ShimmerPlaybuttonCard(count: 7),
const SizedBox(height: 10),
const Align(
alignment: Alignment.topCenter,
child: ShimmerPlaybuttonCard(count: 7),
),
],
),
);
Expand Down
218 changes: 145 additions & 73 deletions lib/components/LoaderShimmers/ShimmerPlaybuttonCard.dart
View file
Original file line number Diff line number Diff line change
@@ -1,89 +1,161 @@
import 'package:flutter/material.dart';
import 'package:skeleton_text/skeleton_text.dart';
import 'package:spotube/extensions/ShimmerColorTheme.dart';

class ShimmerPlaybuttonCardPainter extends CustomPainter {
final Color background;
final Color foreground;
ShimmerPlaybuttonCardPainter({
required this.background,
required this.foreground,
});

@override
void paint(Canvas canvas, Size size) {
canvas.drawRRect(
RRect.fromRectAndRadius(
Rect.fromLTWH(0, 0, size.width, size.height),
const Radius.circular(10),
),
Paint()..color = background,
);

canvas.drawRRect(
RRect.fromRectAndRadius(
Rect.fromLTWH(0, 0, size.width, size.height - 45),
const Radius.circular(10),
),
Paint()..color = foreground,
);

canvas.drawRRect(
RRect.fromRectAndRadius(
Rect.fromLTWH(size.width / 4, size.height - 27, size.width / 2, 10),
const Radius.circular(10),
),
Paint()..color = foreground,
);
}

@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}

class ShimmerPlaybuttonCard extends StatelessWidget {
final int count;
const ShimmerPlaybuttonCard({Key? key, this.count = 4}) : super(key: key);

const ShimmerPlaybuttonCard({
Key? key,
this.count = 1,
}) : super(key: key);

@override
Widget build(BuildContext context) {
final shimmerColor =
Theme.of(context).extension<ShimmerColorTheme>()?.shimmerColor ??
Colors.white;
final shimmerBackgroundColor = Theme.of(context)
.extension<ShimmerColorTheme>()
?.shimmerBackgroundColor ??
Colors.grey;
final shimmerTheme = Theme.of(context).extension<ShimmerColorTheme>();

final card = Stack(
return Row(
mainAxisSize: MainAxisSize.min,
children: [
SkeletonAnimation(
shimmerColor: shimmerColor,
borderRadius: BorderRadius.circular(20),
shimmerDuration: 1000,
child: Container(
width: 200,
height: 220,
decoration: BoxDecoration(
color: shimmerBackgroundColor,
borderRadius: BorderRadius.circular(10),
for (var i = 0; i < count; i++) ...[
CustomPaint(
size: const Size(200, 250),
painter: ShimmerPlaybuttonCardPainter(
background: shimmerTheme?.shimmerBackgroundColor ??
Theme.of(context).scaffoldBackgroundColor,
foreground:
shimmerTheme?.shimmerColor ?? Theme.of(context).cardColor,
),
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),
),
),
],
),
const SizedBox(width: 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,
),
),
),
],
),
);
}
}

// 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 ??
// Colors.white;
// final shimmerBackgroundColor = Theme.of(context)
// .extension<ShimmerColorTheme>()
// ?.shimmerBackgroundColor ??
// Colors.grey;

// 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,
// ),
// ),
// ),
// ],
// ),
// );
// }
// }
Loading

0 comments on commit 3ed8b0f

Please sign in to comment.