dotnet/maui · error · InvalidOperationException

Detail must be set before using a FlyoutPage

Error message

Detail must be set before using a FlyoutPage

What it means

The IFlyoutPageController.DetailBounds setter throws InvalidOperationException when the platform renderer reports detail layout bounds but the Detail page was never assigned. Renderers (PhoneFlyoutPageRenderer, TabletFlyoutPageRenderer, FlyoutPageRenderer) push measured rects during layout; if Detail is null the layout pass has nowhere to apply them, indicating incomplete page setup.

Source

Thrown at src/Controls/src/Core/FlyoutPage/FlyoutPage.cs:166

		}

		/// <summary>Gets or sets a value that indicates how the flyout page displays on the screen. This is a bindable property.</summary>
		public FlyoutLayoutBehavior FlyoutLayoutBehavior
		{
			get { return (FlyoutLayoutBehavior)GetValue(FlyoutLayoutBehaviorProperty); }
			set { SetValue(FlyoutLayoutBehaviorProperty, value); }
		}

		bool IFlyoutPageController.CanChangeIsPresented { get; set; } = true;

		Rect IFlyoutPageController.DetailBounds
		{
			get { return _detailBounds; }
			set
			{
				_detailBounds = value;
				if (_detail == null)
					throw new InvalidOperationException("Detail must be set before using a FlyoutPage");
			}
		}

		Rect IFlyoutPageController.FlyoutBounds
		{
			get { return _flyoutBounds; }
			set
			{
				_flyoutBounds = value;
				if (_flyout == null)
					throw new InvalidOperationException("Flyout must be set before using a FlyoutPage");
			}
		}

		bool IFlyoutPageController.ShouldShowSplitMode
		{
			get
			{

View on GitHub (pinned to f377ff1c5e)

Solutions

1. Always set both Flyout and Detail before the page is pushed onto a NavigationPage or set as the MainPage.
2. If writing a custom renderer, guard DetailBounds assignment with a null check on Detail or wait for both pages to be present.
3. Construct the FlyoutPage via a factory that guarantees both children are set.

Example fix

// before
MainPage = new FlyoutPage { Flyout = menu };
// later renderer sets DetailBounds -> throws

// after
MainPage = new FlyoutPage { Flyout = menu, Detail = detail };

if (flyoutPage.Detail is null) throw new InvalidOperationException("Set Detail before layout");

static bool IsFlyoutPageReady(FlyoutPage p) => p.Flyout is not null && p.Detail is not null;

When it happens

Trigger: A FlyoutPage is added to the visual tree and laid out by the platform renderer before its Detail property is set. Casting to IFlyoutPageController and setting DetailBounds directly in custom renderer code with Detail still null.

Common situations: Constructing a FlyoutPage and navigating to it before setting Detail (e.g., setting Flyout but forgetting Detail), or a custom renderer that sets bounds eagerly during OnLayout.

Related errors

• Flyout must be set before using a FlyoutPage
• IsHeadless cannot be modified when the view is rendered
• Detail cannot be set to null once a value is set.
• Detail must not already have a parent.
• Flyout cannot be set to null once a value is set

AI-assisted analysis of dotnet/maui@f377ff1c5e (2026-08-13). Data as JSON: /api/errors/f52bb5864259400c. Report an issue: GitHub.