From 3ed8b0fda2cb8145a2bc6c8f8c6af82db6a40547 Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Wed, 7 Dec 2022 12:04:01 +0600 Subject: [PATCH] feat: static shimmer for track tile, playbutton card and track tile --- .../LoaderShimmers/ShimmerCategories.dart | 27 +-- .../LoaderShimmers/ShimmerPlaybuttonCard.dart | 218 ++++++++++++------ .../LoaderShimmers/ShimmerTrackTile.dart | 162 +++++++------ 3 files changed, 244 insertions(+), 163 deletions(-) diff --git a/lib/components/LoaderShimmers/ShimmerCategories.dart b/lib/components/LoaderShimmers/ShimmerCategories.dart index 4c2319221..7d5ff4351 100644 --- a/lib/components/LoaderShimmers/ShimmerCategories.dart +++ b/lib/components/LoaderShimmers/ShimmerCategories.dart @@ -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), + ), ], ), ); diff --git a/lib/components/LoaderShimmers/ShimmerPlaybuttonCard.dart b/lib/components/LoaderShimmers/ShimmerPlaybuttonCard.dart index cfed9690f..a6c579910 100644 --- a/lib/components/LoaderShimmers/ShimmerPlaybuttonCard.dart +++ b/lib/components/LoaderShimmers/ShimmerPlaybuttonCard.dart @@ -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()?.shimmerColor ?? - Colors.white; - final shimmerBackgroundColor = Theme.of(context) - .extension() - ?.shimmerBackgroundColor ?? - Colors.grey; + final shimmerTheme = Theme.of(context).extension(); - 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()?.shimmerColor ?? +// Colors.white; +// final shimmerBackgroundColor = Theme.of(context) +// .extension() +// ?.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, +// ), +// ), +// ), +// ], +// ), +// ); +// } +// } diff --git a/lib/components/LoaderShimmers/ShimmerTrackTile.dart b/lib/components/LoaderShimmers/ShimmerTrackTile.dart index f9c8d9ef8..7ceddab6f 100644 --- a/lib/components/LoaderShimmers/ShimmerTrackTile.dart +++ b/lib/components/LoaderShimmers/ShimmerTrackTile.dart @@ -1,95 +1,107 @@ import 'package:flutter/material.dart'; -import 'package:skeleton_text/skeleton_text.dart'; import 'package:spotube/extensions/ShimmerColorTheme.dart'; -class ShimmerTrackTile extends StatelessWidget { - final bool noSliver; - - const ShimmerTrackTile({ - Key? key, - this.noSliver = false, - }) : super(key: key); +class ShimmerTrackTilePainter extends CustomPainter { + final Color background; + final Color foreground; + ShimmerTrackTilePainter({ + required this.background, + required this.foreground, + }); @override - Widget build(BuildContext context) { - final shimmerColor = - Theme.of(context).extension()?.shimmerColor ?? - Colors.white; - final shimmerBackgroundColor = Theme.of(context) - .extension() - ?.shimmerBackgroundColor ?? - Colors.grey; + void paint(Canvas canvas, Size size) { + final paint = Paint() + ..color = background + ..style = PaintingStyle.fill; - final single = 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), - ), - ), - ], - ), - ), - ], + canvas.drawRRect( + RRect.fromRectAndRadius( + Rect.fromLTWH(0, 0, size.width, size.height), + const Radius.circular(5), ), + paint, ); + canvas.drawRRect( + RRect.fromRectAndRadius( + const Rect.fromLTWH(5, 5, 40, 40), + const Radius.circular(5), + ), + Paint()..color = foreground, + ); + + canvas.drawCircle( + const Offset(70, 25), + 15, + Paint()..color = foreground, + ); + + canvas.drawRRect( + RRect.fromRectAndRadius( + const Rect.fromLTWH(95, 10, 100, 10), + const Radius.circular(5), + ), + Paint()..color = foreground, + ); + + canvas.drawRRect( + RRect.fromRectAndRadius( + const Rect.fromLTWH(95, 30, 170, 7), + const Radius.circular(5), + ), + Paint()..color = foreground, + ); + } + + @override + bool shouldRepaint(CustomPainter oldDelegate) { + return false; + } +} + +class ShimmerTrackTile extends StatelessWidget { + final bool noSliver; + const ShimmerTrackTile({super.key, this.noSliver = false}); + + @override + Widget build(BuildContext context) { + final shimmerTheme = Theme.of(context).extension(); + if (noSliver) { return ListView.builder( - shrinkWrap: true, itemCount: 5, - physics: const NeverScrollableScrollPhysics(), - itemBuilder: (context, _) => single, + itemBuilder: (context, index) { + return Padding( + padding: const EdgeInsets.only(bottom: 8.0, left: 8, right: 8), + child: CustomPaint( + size: const Size(double.infinity, 50), + painter: ShimmerTrackTilePainter( + background: shimmerTheme?.shimmerBackgroundColor ?? + Theme.of(context).scaffoldBackgroundColor, + foreground: + shimmerTheme?.shimmerColor ?? Theme.of(context).cardColor, + ), + ), + ); + }, ); } return SliverList( delegate: SliverChildBuilderDelegate( - (BuildContext context, int index) => single, + (BuildContext context, int index) => Padding( + padding: const EdgeInsets.only(bottom: 8.0, left: 8, right: 8), + child: CustomPaint( + size: const Size(double.infinity, 50), + painter: ShimmerTrackTilePainter( + background: shimmerTheme?.shimmerBackgroundColor ?? + Theme.of(context).scaffoldBackgroundColor, + foreground: + shimmerTheme?.shimmerColor ?? Theme.of(context).cardColor, + ), + ), + ), childCount: 5, ), );