How to change between a ContentPage to a FlyoutPage

I want to develop a mobile application and the first page should be a Login page. When de user has been logged, I want to show a FlyoutPage with differents options, but my problem is when I use NavigationPage to change from the login page to the FlyoutPage the system hides the FlyoutPage menu options and shows the back button.

This is the login page.

.

You can use AppShell. Try this:

AppShell.xaml

<Shell x:Class="mycompany.AppShell"
    xmlns:pages="clr-namespace:mycompany.Pages"
    xmlns:mycompany="clr-namespace:mycompany"
    x:DataType="mycompany:AppShell"
    FlyoutBehavior="Flyout">

    <FlyoutItem Title="HOME">
        <Tab Title="tab1">
           <ShellContent ContentTemplate="{DataTemplate pages:AboutPage}"/>
        </Tab>

        <Tab Title="tab2">
            <ShellContent ContentTemplate="{DataTemplate pages:HomePage}"/>
        </Tab>

    </FlyoutItem>

    <FlyoutItem Title="item1">
        <ShellContent ContentTemplate="{DataTemplate pages:ItemPage}"/>
    </FlyoutItem>

    <FlyoutItem Title="ABOUT">
        <ShellContent ContentTemplate="{DataTemplate pages:AboutPage}"/>
    </FlyoutItem>

</Shell>

At AppShell.xaml.cs

public AppShell()
{
    InitializeComponent();
    
    //goto login if you want
    Navigation.PushAsync(new LoginPage());
}

At LoginPage.xaml.cs

public StartPage()
{
	InitializeComponent();
    
    //hide bottom tabs
    Shell.SetTabBarIsVisible(this, false);
}

At LoginPage.xaml hide the top navigation:

<ContentPage Shell.NavBarIsVisible="false">

</ContentPage>

The final step is to navigate back to the Shell tab page, the best place would be at the ViewModel of your LoginPage, you have to complete the login process and go to your main screen.

Task.Run(async () =>
{
  //go to our main shell page with tabs and flyout menu
  await Shell.Current.Navigation.PopToRootAsync();
});

Hope that helps.