DEV Community

Cover image for WINAMP - Flutter CodePen Challenge
Ishan Sharma
Ishan Sharma

Posted on

WINAMP - Flutter CodePen Challenge

As you might know, the Flutter CodePen challenge is currently ongoing for this month of July.

For those who don't know,

The Flutter CodePen challenge is a month-long challenge in July to build user experiences with CodePen’s new Flutter editor.

You can read more about it here.

CODE PEN :

codepen.io/ishandeveloper/pen/WNrzveY

LIVE WORKING DEMO :

winamp.ishandeveloper.com

SOURCE CODE :

github.com/ishandeveloper/WinAMP_Flutter

QUICK SHOWCASE:

Note : The GIF might take some time to load.

WinAMP Music GIF

This was my first Pen that I've ever created (I have forked a few before) on my own. It's a tribute to the WinAMP Music Player.

I originally made this as a part of the #Hack20 Flutter Hackathon. This project of mine was chosen as one of the Top 5 submissions this year.

Few Hacks

I have used a bunch of hacks towards building this project. Mainly, as currently there is no native support for playing audio files in flutter web, I used dart:js package to actually call the custom JavaScript functions using Dart.

All Thanks to this amazing post here.

A Brief Look At The Widget Tree

I have tried to make it as modular as possible by using a lot of widgets, and would be honest the code is somewhat messy, because I had to create all this in less than 8 hours.

 MaterialApp             
 └── LayoutBuilder
   └── UI
     └── Scaffold
       └── Navbar
       └── Main (Column)
         └── Row
           └── SidebarText
           └── MusicInfoWidget
           └── TrackName
           └── MiniScrollControls
           └── MonoStereoButtons
         └── Row
           └── Column 
             └── Seekbar
             └── Controls 
Enter fullscreen mode Exit fullscreen mode

Inspiration Behind This

Almost a decade ago, most of us used Winamp for listening to music on our PC devices. It was one of the first music player apps, that was compatible with most modern file types mp3, mp4, avi etc and it featured a wide variety of amazing skins, along with a radio and a browser.

This is just a small attempt to recreate that same experience using @flutter .

CodePen

Here's the actual codepen. If any bottom overflow occurs, please switch to full view.

Keep Fluttering 💜

Catch you guys in the next one. 🤙🏻

Latest comments (2)

Collapse
 
rahuldkjain profile image
Rahul Jain

Amazing work Ishan💯

Collapse
 
ishandeveloper profile image
Ishan Sharma

Thank you so much, Rahul! 😄