How to capture TTFD for widgets that are not part of Navigation?

[SAGARSURI]

Problem Statement

The documentation at https://docs.sentry.io/platforms/dart/guides/flutter/integrations/routing-instrumentation/ explains how to capture TTFD (Time To Full Display) for widgets that are loaded through navigation (using Navigator.push or GoRouter).

However, it doesn't cover how to capture TTFD for widgets that are NOT part of navigation - for example:

• Widgets that are conditionally rendered within a page
• Dynamically loaded content sections
• Tab views within a screen
• Any other widgets that appear without a route change

Can you provide guidance on whether TTFD tracking is supported for these non-navigation scenarios, and if so, how to implement it?

Solution Brainstorm

Possible solutions could include:

1. Extend SentryDisplayWidget - Allow SentryDisplayWidget to work independently of navigation, so it can be wrapped around any widget that needs TTFD tracking.

2. Manual Span Creation API - Provide a way to manually create TTFD spans for custom scenarios:

   final span = Sentry.startTTFDSpan(name: 'Portfolio Tab');
   // ... load content ...
   span.reportFullyDisplayed();

3. Documentation Enhancement - If TTFD is currently only supported for navigation scenarios, clearly document this limitation and explain the reasoning (e.g., tying it to transaction boundaries).

4. Custom Display Tracking - Provide examples of how developers can implement their own TTFD-like tracking for non-navigation widgets using custom spans.

This would be particularly useful for complex apps where significant UI loading happens within a single route.

Are you willing to submit a PR?

None

[linear]

DART-267

[buenaflor]

Extend SentryDisplayWidget - Allow SentryDisplayWidget to work independently of navigation, so it can be wrapped around any widget that needs TTFD tracking.

the reason why it's currently tied to navigation is because it's mainly meant to be used as a way to measure going from Screen A to B and reporting when B is ready

If you want to measure the TTFD of any widget regardless of navigation it's entirely possible with the current tracing APIs, you only need to add the appropriate measurements to the spans so they show up in the mobile insights page

e.g

final startTimestamp = DateTime.now();
final transaction = Sentry.startTransaction('WidgetName', 'ui.load',
    startTimestamp: startTimestamp);
final ttfdSpan = transaction.startChild('ui.load.full_display',
    startTimestamp: startTimestamp);

// Render widget...

final ttfdMeasurement =
    SentryMeasurement.timeToFullDisplay(const Duration(milliseconds: 100));
ttfdSpan.setMeasurement(ttfdMeasurement.name, ttfdMeasurement.value,
    unit: ttfdMeasurement.unit);
final endTimestamp = DateTime.now();
await ttfdSpan.finish(endTimestamp: endTimestamp);
await transaction.finish(endTimestamp: endTimestamp);

I will update the docs to reflect this custom way as well