B Bubbl Docs

Flutter Modal Styling

Bubbl provides payloads and tracking methods. Your Flutter app owns all notification/survey modal UI.

  1. Subscribe to notificationEvents().
  2. Normalize payload fields (headline, body, mediaUrl, mediaType, questions, locationId).
  3. Render one reusable modal widget for all notification types.
  4. Track interactions with cta, trackSurveyEvent, and submitSurveyResponse.
Future<void> showBubblModal(BuildContext context, Map<String, dynamic> payload) {
  return showDialog<void>(
    context: context,
    barrierDismissible: true,
    builder: (_) {
      return Dialog(
        insetPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
        child: ConstrainedBox(
          constraints: const BoxConstraints(maxWidth: 560, maxHeight: 700),
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(payload['headline']?.toString() ?? 'Notification'),
                  const SizedBox(height: 8),
                  Text(payload['body']?.toString() ?? ''),
                ],
              ),
            ),
          ),
        ),
      );
    },
  );
}

Media rendering strategy

  • image: Image.network(..., fit: BoxFit.cover/contain)
  • video/audio: host player widget or embedded web view for supported media URLs
  • keep media section optional and resilient to malformed URLs

Survey rendering strategy

  • Render each question as a card with clear selected state
  • Validate required fields before submit
  • Keep submit action explicit (Submit Survey)
  • Show success/failure feedback after submission

Analytics hooks to keep

  • Modal shown: trackSurveyEvent(..., 'notification_delivered') when needed
  • CTA tap: cta(...) and trackSurveyEvent(..., 'cta_engagement')
  • Media viewed: trackSurveyEvent(..., 'media_viewed')
  • Dismissed: trackSurveyEvent(..., 'dismissed')
  • Survey submit: submitSurveyResponse(...)

Accessibility and UX

  • Keep close action obvious and keyboard/screen-reader accessible
  • Maintain strong color contrast and readable typography
  • Avoid clipping long body copy or long survey choices
  • Support safe areas and smaller devices with scrollable modal content