UpdatifyWidget is a Flutter widget designed to seamlessly integrate with the Updatify service. It allows to display recent updates, announcements, or notifications from projects directly within SaaS applications. By leveraging the Updatify API, the widget provides a user-friendly interface for showcasing project updates, enhancing user engagement and communication.

For more info visit the Updatify website.

Screenshots

Desktop Mobile
Updatify on desktop Updatify on mobile

UpdatifyTrigger is a drop-in button that opens the updates dialog and shows a "new updates" indicator when there are posts the user hasn't seen yet. It's the most idiomatic way to surface Updatify in an app bar or toolbar:

import 'package:updatify_flutter/updatify_flutter.dart';

AppBar(
  actions: [
    UpdatifyTrigger(projectId: 'your_project_id'),
  ],
)

On build it asks the API how many updates exist since the dialog was last opened and, if any, shows a pulsing indicator. Opening the dialog records the current time, so the indicator clears once the updates have been seen. It accepts every showUpdatifyDialog customization (borderRadius, width, title, itemDecoration, …) and forwards them to the dialog it opens.

By default it renders a bell IconButton with a red ping. Supply a builder to render your own control and place the indicator however you like:

UpdatifyTrigger(
  projectId: projectId,
  borderRadius: BorderRadius.circular(8),
  builder: (context, hasNewUpdates, openUpdates) => IconButton(
    onPressed: openUpdates,
    icon: Badge(
      isLabelVisible: hasNewUpdates,
      child: const Icon(Icons.notifications_outlined),
    ),
  ),
)
Parameter Effect
builder Renders the control from (context, hasNewUpdates, openUpdates). Defaults to a bell icon with a ping.
alwaysShowIndicator Forces the indicator on regardless of unseen updates. Useful for previewing.
(dialog options) All showUpdatifyDialog parameters below are accepted and forwarded.

To mark updates as unseen again (e.g. in tests or demos), call UpdatifyTrigger.resetLastViewed(projectId), then rebuild the trigger.

Manual trigger

To open the dialog yourself — for example from an existing button — call showUpdatifyDialog:

import 'package:updatify_flutter/updatify_flutter.dart';

void main() {
  const projectId = 'your_project_id'; // Replace with your actual project ID
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Builder(
            builder: (context) => ElevatedButton(
              onPressed: () => showUpdatifyDialog(context, projectId: projectId),
              child: const Text('Recent updates'),
            )
          ),
        ),
      ),
    ),
  );
}

Styling

Dialog

showUpdatifyDialog exposes the dialog's chrome directly. Common options:

showUpdatifyDialog(
  context,
  projectId: projectId,
  // Rounded corners - convenience for a RoundedRectangleBorder.
  borderRadius: BorderRadius.circular(20),
  // Or pass a full ShapeBorder via `shape` (takes precedence over borderRadius).
  width: 480,                       // content width; defaults to as wide as allowed
  backgroundColor: Colors.white,
  elevation: 8,
  insetPadding: const EdgeInsets.all(24),
  title: 'What\'s new',
  titleStyle: const TextStyle(fontWeight: FontWeight.bold),
  showCloseButton: true,
  barrierDismissible: true,
);
Parameter Effect
borderRadius Rounds the dialog corners. Ignored if shape is set.
shape Full ShapeBorder for the dialog.
width Width of the dialog content.
backgroundColor, elevation Dialog surface color and shadow.
insetPadding Padding between the dialog and the screen edges.
title, titleStyle, titlePadding, titleDecoration The dialog header.
showCloseButton, closeButtonColor, closeButtonStyle The close button.
contentPadding, contentMargin Spacing around the list of posts.

Posts

Each post's appearance is controlled by UpdatifyPostDecoration, passed via itemDecoration to either showUpdatifyDialog or UpdatifyWidget:

UpdatifyWidget(
  projectId: projectId,
  itemDecoration: UpdatifyPostDecoration(
    // Title
    titleStyle: const TextStyle(fontSize: 22, fontWeight: FontWeight.w700),
    titleAlign: TextAlign.start,
    // Body
    bodyStyle: const TextStyle(fontSize: 14, height: 1.4),
    bodyPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
    // Code (inline + code blocks) - merged onto a monospace default
    codeStyle: const TextStyle(fontSize: 13),
    codeBlockDecoration: BoxDecoration(
      color: Colors.grey.shade100,
      borderRadius: BorderRadius.circular(6),
    ),
    // Type chip ("Update", "Announcement", "Bug Fix", "Feature Highlight")
    chipStyle: const TextStyle(fontWeight: FontWeight.w600),
    chipDecoration: BoxDecoration(
      color: Colors.blue.shade50,
      borderRadius: BorderRadius.circular(6),
    ),
    chipPosition: ChipPosition.leading,
    // Per-type base color - used for the chip text and, tinted, its
    // background/border. Defaults: blue (update), green (announcement),
    // yellow (bugfix), teal (feature highlight).
    chipColors: const {
      PostType.update: Color(0xFF2563EB),
      PostType.announcement: Color(0xFF16A34A),
      PostType.bugfix: Color(0xFFCA8A04),
      PostType.featureHighlight: Color(0xFF0D9488),
    },
    // Header (chip + date/author row)
    headerPadding: const EdgeInsets.all(16),
    // Image
    imagePadding: const EdgeInsets.only(bottom: 12),
    // Date formatting (defaults to DateFormat.yMMMd)
    dateFormatter: (date) => DateFormat.yMMMMd().format(date),
  ),
)
Group Fields
Title titleStyle, titleAlign
Body bodyStyle, bodyAlign, bodyPadding
Code codeStyle, codeBlockDecoration
Chip chipStyle, chipDecoration, chipPadding, chipPosition, chipColors
Header headerStyle, headerDecoration, headerPadding, headerHorizontalSpacing, headerVerticalSpacing, headerVerticalDirection
Image imagePadding, imageLoadingBuilder, imageErrorBuilder
Date dateFormatter

For full control over a post's layout, supply an itemBuilder instead - it receives the BuildContext and the UpdatifyPost and replaces the default rendering entirely.

Links in post bodies open in the device's default browser via url_launcher. For this to work in release builds, the host app must declare the appropriate platform config:

iOS - add to ios/Runner/Info.plist:

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>https</string>
  <string>http</string>
</array>

Android - add to android/app/src/main/AndroidManifest.xml, as a direct child of the <manifest> element:

<queries>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="https" />
  </intent>
</queries>

macOS - the app is sandboxed, so add the network client entitlement to both macos/Runner/DebugProfile.entitlements and macos/Runner/Release.entitlements:

<key>com.apple.security.network.client</key>
<true/>

Windows, Linux, and web need no additional configuration.

See the url_launcher docs for details.

Libraries

updatify_flutter