How to hide Shell Item on Flyout-CodePudding

I have a Xamarin Forms project in which I have a ShellItem login and then it shows me a FlyoutItem main with different tabs.

Here is the code on my AppShell

<ShellItem Route="login" x:Name="loginItem">
        <ShellContent ContentTemplate="{DataTemplate local:LoginPage}"/>
    </ShellItem>

    <FlyoutItem Title="Home" Route="main" Icon="homepage.png" >
        
            <Tab Icon="search.png">
                <ShellContent  ContentTemplate="{DataTemplate local:CategoryPage}" />
            </Tab>
            <Tab Route="CartPage" Icon="shopping_cart.png">
                <ShellContent  ContentTemplate="{DataTemplate local:CartPage}" />
            </Tab>
            <Tab Route="InvoicePage" Icon="invoice.png">
                <ShellContent  ContentTemplate="{DataTemplate local:InvoicePage}" />
            </Tab>
       
    </FlyoutItem>

    <FlyoutItem Title="Información" Icon="information.png">
        <ShellContent  ContentTemplate="{DataTemplate local:InfoPage}" />
    </FlyoutItem>

    <FlyoutItem Title="Contacto" Icon="contact.png">
        <ShellContent  ContentTemplate="{DataTemplate local:ContactSupportPage}" />
    </FlyoutItem>

Here is the login page, as you can see I don't want to display the flyout item yet.

The issue is on my FlyoutItem "main". If the user accidentally presses the blank space above "Home" it will take them to the login page which I don't want to happen.

Is there any way of hiding that FlyoutItem? I thought it wouldn't show as I have not added it as a FlyoutItem to my AppShell.

Please help and thanks.

CodePudding user response：

You can try this.

<ShellItem Route="login" x:Name="loginItem" FlyoutItemIsVisible="False" >
    <ShellContent ContentTemplate="{DataTemplate local:LoginPage}"/>
</ShellItem>

Docs :

https://docs.microsoft.com/nl-nl/xamarin/xamarin-forms/app-fundamentals/shell/flyout#flyoutitem-visibility