app-themes

App-Specific Themes Reference

Pre-built themes and widgets for specific iOS app styles.

Available Themes

This design system includes 6 app-specific themes:

1. Neutral Music - Apple Music style
2. Neutral Podcast - Podcast app style
3. Stocks - Stocks app style
4. Weather - Weather app style
5. App Store - App Store style
6. Books - Books app style

Neutral Music Theme

Glassmorphism effects and gradient backgrounds for music player interfaces.

NeutralCardWidget

Music-themed card with gradient background.

NeutralCardWidget(
  padding: const EdgeInsets.all(16),
  child: Column(
    children: [
      // Album art
      ClipRRect(
        borderRadius: BorderRadius.circular(12),
        child: Image.network(
          albumArtUrl,
          height: 300,
          width: 300,
          fit: BoxFit.cover,
        ),
      ),
      const SizedBox(height: 24),
      // Song info
      Text(
        'Song Title',
        style: theme.typography.title2Bold,
      ),
      Text(
        'Artist Name',
        style: theme.typography.bodyRegular,
      ),
    ],
  ),
)

NeutralCircularButtonWidget

Circular button with glassmorphism for music controls.

// Playback controls
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    NeutralCircularButtonWidget(
      iconData: CupertinoIcons.backward_fill,
      onPressed: () {
        // Previous track
      },
    ),
    NeutralCircularButtonWidget(
      iconData: _isPlaying
        ? CupertinoIcons.pause_fill
        : CupertinoIcons.play_fill,
      iconSize: 32,
      onPressed: () {
        setState(() => _isPlaying = !_isPlaying);
      },
    ),
    NeutralCircularButtonWidget(
      iconData: CupertinoIcons.forward_fill,
      onPressed: () {
        // Next track
      },
    ),
  ],
)

NeutralPillButtonWidget

Pill-shaped button with gradient styling.

NeutralPillButtonWidget(
  label: 'Add to Playlist',
  leftIcon: CupertinoIcons.add,
  onPressed: () {
    // Add to playlist
  },
)

NeutralPillButtonWidget(
  label: 'Share',
  rightIcon: CupertinoIcons.share,
  onPressed: () {
    // Share song
  },
)