https://twitter.com/rudrankriyam/status/1420077340437061632

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