FlyoutPage

In .NET MAUI, a FlyoutPage is a type of page that provides a master-detail navigation pattern, commonly used for apps with a side menu (often called a hamburger menu). It allows you to have:

• A Flyout (the menu or navigation pane) on the left side.
• A Detail page (the main content area) on the right side.

Key Components

FlyoutPage

The container that holds both the Flyout and Detail pages.

Flyout

Typically a ContentPage or a Shell section that contains navigation options.

Detail

The main content page that changes based on user selection.

Basic Structure

//C#
public class MainPage : FlyoutPage
{
    public MainPage()
    {
        Flyout = new MenuPage();   // The side menu
        Detail = new NavigationPage(new HomePage()); // The main content
    }
}
    

Flyout: Usually a list of navigation items.
Detail: Wrapped in a NavigationPage to allow navigation within the main content area.

Common Use Cases

• Apps with multiple sections (e.g., Dashboard, Settings, Profile).
• When you want a persistent navigation menu that slides in/out.

Behavior

• On desktop/tablet, the Flyout can stay open.
• On mobile, it usually slides in when the hamburger icon is tapped.

Advantages

• Provides a familiar UX for apps with complex navigation.
• Works across platforms (Android, iOS, Windows).

Shell vs FlyoutPage in .NET MAUI

This page compares Shell and FlyoutPage in .NET MAUI, highlighting their key differences, advantages, and recommended use cases.

Overview

Shell: A modern navigation container that simplifies app structure with built-in features like Flyout menus, tabs, and URI-based routing.

FlyoutPage: A traditional master-detail pattern providing a side menu (hamburger menu) and a detail content area.

Key Features

• Shell: Declarative navigation, global styling, deep linking, tabs, and flyout support.
• FlyoutPage: Full control over layout, simple master-detail navigation, customizable menu.

Comparison Table

Aspect	Shell	FlyoutPage
Navigation Style	URI-based, declarative, supports tabs and flyout	Manual navigation stack, master-detail pattern
Complexity	Lower (built-in features reduce boilerplate)	Higher (requires manual setup for navigation)
Recommended Use Cases	Apps with multiple sections, deep linking, tabs	Apps needing full control over layout and behavior
Performance	Optimized for cross-platform navigation	Good, but less optimized for complex scenarios
Flexibility	Limited customization (but easier to use)	Highly customizable layout and behavior

Advantages

Shell

• Simplifies navigation and routing
• Supports tabs and flyout menus out of the box
• Global styling and theming

FlyoutPage

• Full control over UI and navigation behavior
• Simple for apps with basic master-detail needs