Taking a Flutter audio app to CarPlay and Android Auto

Quran Nour streams live Quran radio stations and a large library of recitations. A lot of that listening happens in the car, so CarPlay and Android Auto support was a natural next step.

Cars don't run your UI

Neither CarPlay nor Android Auto shows your Flutter screens. The car draws its own templates, and your app provides the content: a browsable tree of stations, reciters and surahs, plus the now-playing state. The Flutter UI and the car UI are two views of the same audio service.

Make the audio service the source of truth

Playback, the queue and metadata live in one background audio service. The phone UI, the lock screen, CarPlay and Android Auto all read from it and send commands to it. Adding the car integrations then mostly meant exposing that service's content in the shape each platform expects.

Design for glances

• Short, clear titles; the car truncates aggressively.
• Shallow browsing: a few taps from the root to something playing.
• Artwork for stations and reciters, so lists are recognisable at a glance.
• Sensible behaviour when the connection drops mid-stream.

Testing

Both platforms have simulators and desktop head units, which help, but nothing replaces a real car for checking reconnection, audio focus and long drives.