How to locate a flyout page at a child page instead on main page?

Question

Is there any possible way to put a flyout page in a page?

My system starts with a login and signup page, where users can signup or login into the system. After that, the system will navigate the user to a child page (which is accessible upon login) where the flyout page is located. But I couldn't figure out how to do that. Below are my code which makes the child page to become the main page (the system skipped the login and signup page).

I named the flyout page as MasterDetailPage.

public MasterDetailPage()
        {
            InitializeComponent();
            FlyoutPage.ListView.ItemSelected += ListView_ItemSelected;
            Detail = new NavigationPage(new BrowseMap());
        }

Answer 1

For this,I think you can refer to article Creating a login flow with Xamarin Forms Shell.

The Shell is structured as follows:

 <Shell>

    <!-- Loading/Start Page -->
    <ShellItem Route="loading">
        <ShellContent ContentTemplate="{DataTemplate local:LoadingPage}" />
    </ShellItem>

    <!-- Login and Registration Page -->
    <ShellContent Route="login"
                  ContentTemplate="{DataTemplate local:LoginPage}">
    </ShellContent>

    <!-- Main Page -->
    <FlyoutItem Route="main"
                FlyoutDisplayOptions="AsMultipleItems" IsTabStop="False">
        <ShellContent Route="home"
                      IsTabStop="False"
                      ContentTemplate="{DataTemplate local:MainPage}"
                      Title="Home" />
    </FlyoutItem>
    <MenuItem Text="Logout"
              Command="{Binding ExecuteLogout}" />
</Shell>

For the login page, we would set it like this:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             ...
             Shell.PresentationMode="ModalAnimated"
             ...>
    ...
</ContentPage>

And there is also an entire sample on GitHub here.