gliphui_music_player 1.0.0

A premium, Spotify-grade music player for Flutter. Features a highly immersive UI, smooth animations, background lock screen controls, and a fully functional mini-player.

Gliph Music Player 🎵

A premium, highly-immersive music player package for Flutter, designed to feel exactly like a top-tier music streaming app (e.g., Spotify, Apple Music). It features gorgeous background blur, smooth crossfading animations, a fully functional mini-player, and full lock screen / background playback support on both iOS and Android.

Features ✨

• Immersive Design: A beautiful, blurred, color-blended background based on the current track's album art.
• Hero Artwork: A stunning center album cover with deep drop shadows.
• Fluid Animations: Smooth AnimatedSwitcher transitions between the full player, mini player, and song changes.
• Mini Player: A floating mini-player that docks to the bottom of the screen when the user minimizes the full player.
• Marquee Text: Automatically scrolls long song titles and artist names smoothly.
• Background Playback: Powered by just_audio and just_audio_background to ensure your audio continues playing perfectly on the lock screen with media notification controls.

Installation 📦

Add the dependency to your pubspec.yaml:

dependencies:
  gliphui_music_player: ^1.0.0

Setup (Crucial for Background Audio) ⚙️

Because this package supports background audio and lock screen controls, you must configure your app properly.

1. Initialize the Package

In your main.dart, you must call JustAudioBackground.init() before runApp().

import 'package:flutter/material.dart';
import 'package:just_audio_background/just_audio_background.dart';
import 'package:gliphui_music_player/gliphui_music_player.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await JustAudioBackground.init(
    androidNotificationChannelId: 'com.your.app.channel.audio',
    androidNotificationChannelName: 'Audio playback',
    androidNotificationOngoing: true,
  );
  
  runApp(const MyApp());
}

2. Android Configuration

Update your android/app/src/main/AndroidManifest.xml to include the required permissions and service declarations inside the <application> tag:

<manifest xmlns:android="http://schemas.android.com/apk/res/android" ...>
    
    <!-- Add WAKE_LOCK and FOREGROUND_SERVICE permissions -->
    <uses-permission android:name="android.permission.WAKE_LOCK"/>
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK" />

    <application ...>
        ...
        <!-- Add the AudioService and MediaButtonReceiver -->
        <service android:name="com.ryanheise.audioservice.AudioService"
            android:foregroundServiceType="mediaPlayback"
            android:exported="true">
            <intent-filter>
                <action android:name="android.media.browse.MediaBrowserService" />
            </intent-filter>
        </service>

        <receiver android:name="com.ryanheise.audioservice.MediaButtonReceiver"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MEDIA_BUTTON" />
            </intent-filter>
        </receiver>
    </application>
</manifest>

3. iOS Configuration

Add the following to your ios/Runner/Info.plist:

<key>UIBackgroundModes</key>
<array>
    <string>audio</string>
</array>

Usage 🚀

Simply push GliphMusicPlayer to your navigation stack and pass it a list of Track objects!

import 'package:flutter/material.dart';
import 'package:gliphui_music_player/gliphui_music_player.dart';

class MyMusicApp extends StatelessWidget {
  const MyMusicApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => GliphMusicPlayer(
                    accentColor: const Color(0xFF1DB954), // Spotify Green
                    tracks: const [
                      Track(
                        id: 'song-1',
                        url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
                        title: 'SoundHelix Song 1',
                        artist: 'T. Schürger',
                        album: 'SoundHelix',
                        coverUrl: 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?auto=format&fit=crop&w=500&q=60',
                      ),
                      Track(
                        id: 'song-2',
                        url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
                        title: 'SoundHelix Song 2',
                        artist: 'T. Schürger',
                        album: 'SoundHelix',
                        coverUrl: 'https://images.unsplash.com/photo-1493225457124-a1a2a5956017?auto=format&fit=crop&w=500&q=60',
                      ),
                    ],
                  ),
                ),
              );
            },
            child: const Text('Open Premium Player'),
          ),
        ),
      ),
    );
  }
}