Now Playing

Now Playing

The Now Playing template displays audio playback controls and metadata on CarPlay.

⚠️ Android Auto: Now Playing is not available through flutter_carplay on Android. Use the audio_service package instead, which provides native Android Auto media integration.

Basic Usage

// Show the Now Playing template
await FlutterCarplay.showNowPlaying(animated: true);

Integration with audio_service

For a complete audio app, you'll typically use audio_service for playback management and flutter_carplay for the CarPlay UI.

import 'package:audio_service/audio_service.dart';
import 'package:flutter_carplay/flutter_carplay.dart';

class AudioPlayerService extends BaseAudioHandler {
  @override
  Future<void> play() async {
    // Your playback logic
    playbackState.add(playbackState.value.copyWith(
      playing: true,
      // ... other state
    ));
  }

  @override
  Future<void> pause() async {
    // Your pause logic
  }

  // ... other methods
}

// In your app initialization
void setupCarPlay() {
  final flutterCarplay = FlutterCarplay();
  
  flutterCarplay.addListenerOnConnectionChange((status) {
    if (status == CPConnectionStatusTypes.connected) {
      // CarPlay connected, show now playing if audio is active
      FlutterCarplay.showNowPlaying(animated: true);
    }
  });
}

Updating Now Playing Info

The Now Playing screen automatically reflects the media metadata set through audio_service. Make sure you're updating:

mediaItem.add(MediaItem(
  id: 'unique_id',
  title: 'Song Title',
  artist: 'Artist Name',
  album: 'Album Name',
  duration: Duration(minutes: 3, seconds: 45),
  artUri: Uri.parse('https://example.com/album-art.jpg'),
));

Shared Now Playing

Use the shared system Now Playing template (recommended for most audio apps):

await FlutterCarplay.showSharedNowPlaying(animated: true);

This uses the system's Now Playing interface which integrates better with iOS.

Safe Multiple Calls

You can safely call showNowPlaying multiple times. The package handles this gracefully:

// These are all safe
await FlutterCarplay.showNowPlaying(animated: true);
await FlutterCarplay.showNowPlaying(animated: true); // No error

Hiding Now Playing

await FlutterCarplay.hideNowPlaying(animated: true);

Tab Bar Integration

When using Now Playing with a Tab Bar, iOS can automatically add a Now Playing tab:

final tabBar = CPTabBarTemplate(
  templates: [
    // Your tabs (max 4 if you want Now Playing as 5th)
    homeTemplate,
    browseTemplate,
    libraryTemplate,
    settingsTemplate,
  ],
);

The system will add the Now Playing tab automatically when audio is playing.

Best Practices

1. Show Now Playing when connected: Check connection status and show Now Playing if audio is active
2. Use audio_service: Let it manage playback state for consistency across the system
3. Update metadata promptly: Album art and track info should update immediately on track change
4. Handle interruptions: Pause gracefully when CarPlay disconnects or when receiving calls