WINAMP - Flutter CodePen Challenge

#flutter #challenge #codepen #flutterchallenge

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.

QUICK SHOWCASE:

Note : The GIF might take some time to load.

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

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 .