Skip to content

Instantly share code, notes, and snippets.

@Nash0x7E2

Nash0x7E2/musadora.dart

Last active September 18, 2021 23:23
Show Gist options
  • Save Nash0x7E2/b5d1120b9a25a4f771d80386a2b7075f to your computer and use it in GitHub Desktop.
Save Nash0x7E2/b5d1120b9a25a4f771d80386a2b7075f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
musadora.dart
import 'dart:ui';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
void main() {
runApp(const App());
}
const kBorderRadius = 12.0;
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const CupertinoApp(
debugShowCheckedModeBanner: false,
home: Musadora(),
);
}
}
class Musadora extends StatelessWidget {
const Musadora({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Column(
children: [
Expanded(
child: CustomScrollView(
slivers: [
CupertinoSliverNavigationBar(
backgroundColor: Colors.white,
border: Border.all(style: BorderStyle.none),
largeTitle: const Text('Musadora'),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => _AnimatedWidget(
builder: (context, animation) {
return MusicTile(
key: ValueKey<int>(index),
song: Songs.sampleSongs[index],
animation: animation,
);
},
),
childCount: Songs.sampleSongs.length,
),
)
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
const Icon(
CupertinoIcons.square_arrow_down_fill,
size: 54.0,
color: CupertinoColors.activeGreen,
),
Image.asset('assets/shazam_logo.png', height: 100.0),
const Icon(
CupertinoIcons.stop_circle_fill,
color: Colors.red,
size: 54.0,
),
],
),
)
],
),
),
);
}
}
class MusicTile extends StatelessWidget {
const MusicTile({
Key? key,
required this.song,
required this.animation,
}) : super(key: key);
final Songs song;
final Animation<double> animation;
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 12.0),
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(kBorderRadius),
),
height: 116,
child: Stack(
children: [
Positioned.fill(
child: CachedNetworkImage(
imageUrl: song.imageUrl,
fit: BoxFit.fill,
filterQuality: FilterQuality.low,
),
),
_BackgroundBlur(),
_AlbumRow(song: song, animation: animation),
AnimatedBuilder(
animation: animation,
builder: (context, child) {
return DecoratedBox(
decoration: BoxDecoration(
gradient: RadialGradient(
radius: 2.5 * animation.value,
colors: [
Colors.transparent,
Colors.white.withOpacity(0.2),
Colors.white,
],
),
),
child: const SizedBox.expand(),
);
},
),
],
),
);
}
}
class _AlbumRow extends StatelessWidget {
const _AlbumRow({
Key? key,
required this.song,
required this.animation,
}) : super(key: key);
final Songs song;
final Animation<double> animation;
@override
Widget build(BuildContext context) {
return Positioned.fill(
child: Row(
children: [
ScaleTransition(
scale: animation,
child: ClipRRect(
borderRadius: BorderRadius.circular(kBorderRadius),
clipBehavior: Clip.hardEdge,
child: CachedNetworkImage(
imageUrl: song.imageUrl,
),
),
),
const SizedBox(width: 8.0),
_InfoText(
artist: song.singer,
title: song.title,
),
],
),
);
}
}
class _InfoText extends StatelessWidget {
const _InfoText({Key? key, required this.title, required this.artist})
: super(key: key);
final String title;
final String artist;
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
title,
style: const TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 4.0),
Text(
artist,
style: const TextStyle(
color: Colors.white,
fontSize: 14.5,
fontWeight: FontWeight.normal,
),
),
],
);
}
}
typedef AnimationBuilder = Widget Function(
BuildContext context, Animation<double> animation);
class _AnimatedWidget extends StatefulWidget {
const _AnimatedWidget({Key? key, required this.builder}) : super(key: key);
final AnimationBuilder builder;
@override
_AnimatedWidgetState createState() => _AnimatedWidgetState();
}
class _AnimatedWidgetState extends State<_AnimatedWidget>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 1000),
);
animation = CurvedAnimation(
parent: _controller,
curve: Curves.ease,
);
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Builder(
builder: (context) => widget.builder(context, animation),
);
}
}
class _BackgroundBlur extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16.0, sigmaY: 16.0),
child: ColoredBox(
color: Colors.grey.withOpacity(0.35),
child: const SizedBox.expand(),
),
),
);
}
}
class Songs {
const Songs({
required this.imageUrl,
required this.title,
required this.singer,
});
final String imageUrl;
final String title;
final String singer;
static const sampleSongs = [
Songs(
imageUrl:
'https://images-na.ssl-images-amazon.com/images/I/61hEN-PkBFL._AC_UL600_SR600,600_.jpg',
singer: 'Juice WRLD',
title: 'Righteous',
),
Songs(
imageUrl:
'https://i.scdn.co/image/ab67616d0000b2731e5ea14cb78c42a7e58fc2fd',
singer: 'Leroy Sanchez',
title: 'Drivers License',
),
Songs(
imageUrl:
'https://images.complex.com/complex/images/c_fill,dpr_auto,f_auto,q_90,w_1400/fl_lossy,pg_1/m7ll2zgzoxostwcoswzi/joji-nectar',
singer: 'Joji',
title: 'Run',
),
Songs(
imageUrl:
'https://i.scdn.co/image/ab67616d0000b27384d018c392f9d31c6d5e66e4',
singer: 'The Paper Kites',
title: 'On The Train Ride Home',
),
Songs(
imageUrl: 'https://upload.wikimedia.org/wikipedia/en/4/49/Sum41chuck.jpg',
title: 'Pieces',
singer: 'Sum 41',
),
Songs(
imageUrl:
'https://upload.wikimedia.org/wikipedia/en/thumb/9/96/The_Weeknd_-_Trilogy.png/220px-The_Weeknd_-_Trilogy.png',
title: 'Twenty Eight',
singer: 'The Weekend',
),
Songs(
imageUrl:
'https://cdns-images.dzcdn.net/images/cover/3cf1fcb32210e54655c85055ba8ffe6f/350x350.jpg',
title: "Darlin'",
singer: 'Goodbye June',
),
Songs(
imageUrl:
'https://i1.sndcdn.com/artworks-000241790708-ana0uy-t500x500.jpg',
title: "Particles (Piano Version)",
singer: 'Nothing But Thieves',
),
Songs(
imageUrl:
'https://images.genius.com/0e255dc92fe2f0eb89b6991b2b8f824b.1000x1000x1.jpg',
title: "As The World Caves In",
singer: 'Sarah Cothran',
),
Songs(
imageUrl: 'https://image.joox.com/JOOXcover/0/19315b6915fefbb5/640.jpg',
title: "you were good to me",
singer: 'Jeremy Zucker & Chelsea Cutler',
),
Songs(
imageUrl:
'https://arhsharbinger.com/wp-content/uploads/2021/06/sour.jpeg',
title: "favourite crime",
singer: 'Olivia Rodrigo',
),
Songs(
imageUrl:
'https://66.media.tumblr.com/1d1f1b4ea553a1e6cf97aa070249631c/b2a57c60c7cd6f9b-c8/s540x810/c1691785b05c40b73ccb8f22a25bd63e2afd612e.jpg',
title: "that way",
singer: 'Tate McRae',
),
Songs(
imageUrl:
'https://static.wikia.nocookie.net/wherearetheavocados/images/0/06/DyGkj-cU0AAGLH-.jpeg/revision/latest?cb=20190525003458',
title: "i love you",
singer: 'Billie Eilish',
),
Songs(
imageUrl:
'https://static.wikia.nocookie.net/wherearetheavocados/images/0/06/DyGkj-cU0AAGLH-.jpeg/revision/latest?cb=20190525003458',
title: "i love you",
singer: 'Billie Eilish',
),
Songs(
imageUrl:
'https://images.genius.com/b826bffa6a542a466c2143f4702b9f25.1000x1000x1.png',
title: "Your Power",
singer: 'Billie Eilish',
),
Songs(
imageUrl:
'https://images.squarespace-cdn.com/content/v1/56c346b607eaa09d9189a870/1591220632125-75IZM10R1ZHMBZ04II3J/Do+You+Turn+Red+EP+ART_Peter+Manos_FLAUNT_2.jpg?format=1000w',
title: "In My Head",
singer: 'Peter Mannos',
),
Songs(
imageUrl:
'https://images.genius.com/5fab98160904269f83e447e31258833a.1000x1000x1.jpg',
title: "IDK YOU YET",
singer: 'Alexander 23',
),
Songs(
imageUrl:
'https://cdns-images.dzcdn.net/images/cover/0a5209aec8e37012eb07eb6ef01fa7e6/500x500.jpg',
title: "Heather",
singer: 'Conan Gray',
),
Songs(
imageUrl:
'https://linkstorage.linkfire.com/medialinks/images/488e0805-8a35-4e3e-bed7-ece658ffef3a/artwork-440x440.jpg',
title: "Bad Habits",
singer: 'Ed Sheeran',
),
Songs(
imageUrl:
'https://images.genius.com/d38b9d81d6213efd7f51a7b3d9441191.1000x1000x1.jpg',
title: "Astronomy",
singer: 'Conan Gray',
),
Songs(
title: "good 4 you",
imageUrl:
'https://arhsharbinger.com/wp-content/uploads/2021/06/sour.jpeg',
singer: 'Olivia Rodrigo',
),
Songs(
imageUrl:
'https://i.scdn.co/image/ab67616d0000b27363ba168dece1f7815898090b',
title: "Feels",
singer: 'WATTS & Khalid',
),
];
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment