A Spotify-shaped music player screen built with
shadcn_flutter, and the companion
project for the post in blog.md.
Sidebar, browse grid, now playing bar. Roughly three hundred lines, no network calls, no assets to download. It exists to show how the package's components compose into a real screen rather than a gallery of widgets.
flutter pub get
flutter run -d chromeAlso runs on macOS, Windows, Linux, Android and iOS. The layout assumes a wide window, so a desktop target or a browser is the best way to see it.
flutter analyze
flutter test| File | What's in it |
|---|---|
lib/main.dart |
ShadcnApp, the light and dark ThemeData, and the two theme constants |
lib/cadence_page.dart |
The Scaffold and its headers / footers / child slots |
lib/data.dart |
Albums, playlists and the current track, all const |
lib/widgets/sidebar.dart |
Navigation and playlists |
lib/widgets/browse.dart |
The two album shelves |
lib/widgets/now_playing.dart |
The footer player bar |
lib/widgets/album_art.dart |
Gradient stand-in artwork |
Every file has exactly one import at the top of it,
package:shadcn_flutter/shadcn_flutter.dart. Adding
package:flutter/material.dart alongside it produces 13 ambiguous name errors,
which section 3 of the post goes into.
Two constants at the top of lib/main.dart drive the theming screenshots in
sections 8 of the post:
const Color? kAccent = null; // try Colors.violet
const double kRadius = 0.5; // try 0.0 or 2.0Light and dark come from the toggle in the app bar.
Built against Flutter 3.47.1, Dart 3.13.1 and shadcn_flutter 0.0.53. The
package is pre-1.0 and marked experimental, so newer versions may differ.