Home Page - Food Delivery App in Maui

 

Home Page - Food Delivery App in MAUI
Home Page - Food Delivery App in MAUI

Please, support my blog by clicking on our sponsors ad!

Follow basic setup from here
You will get all page of this app from FoodDeliveryApp Menu on top.

Let's Create Model

MenuModel

    public class MenuModel
    {
        public string Name { get; set; }
        public decimal Price { get; set; }
        public string Description { get; set; }
        public ImageSource Image { get; set; }
    }

RestaurantModel

   public class RestaurantModel
    {
        public string Name { get; set; }
        public string Description { get; set; }
        public string Rating { get; set; }
        public ImageSource Image { get; set; }

        public List<MenuModel> Menus { get; set; } = new List<MenuModel>();

    }

BannerModel

   public class BannerModel 
    {
        public ImageSource Image { get; set; }
    }

BaseViewModel

    public class BaseViewModel : INotifyPropertyChanged
    {
        bool isBusy = false;
        public bool IsBusy
        {
            get { return isBusy; }
            set { SetProperty(ref isBusy, value); }
        }

        protected bool SetProperty<T>(ref T backingStore, T value,
            [CallerMemberName] string propertyName = "",
            Action onChanged = null)
        {
            if (EqualityComparer<T>.Default.Equals(backingStore, value))
                return false;

            backingStore = value;
            onChanged?.Invoke();
            OnPropertyChanged(propertyName);
            return true;
        }

        #region INotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            var changed = PropertyChanged;
            if (changed == null)
                return;

            changed.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion
    }

MainViewModel

    public class MainViewModel
    {
        public List<BannerModel> BannerModel { get; set; } = new List<BannerModel>();
        public List<RestaurantModel> Restaurants { get; set; } = new List<RestaurantModel>();
        public List<RestaurantModel> FirstSlotRestaurants { get; set; } = new List<RestaurantModel>();
        public List<RestaurantModel> SecondSlotRestaurants { get; set; } = new List<RestaurantModel>();
        public List<MenuModel> Menus { get; set; } = new List<MenuModel>();
    }

HomeViewModel

    public class HomeViewModel : BaseViewModel
    {

        public Command LoadBannerCommand { get; set; }
        private List<MainViewModel> bannerVM;
        public HomeViewModel()
        {
            LoadBannerCommand = new Command(async () => await ExecuteLoadBannerCommand());
        }

        public List<MainViewModel> vm
        {
            get
            {
                return bannerVM;
            }
            set
            {
                SetProperty(ref bannerVM, value);
            }
        }

        public async Task ExecuteLoadBannerCommand()
        {
            try
            {
                IsBusy = true;
                vm = new List<MainViewModel>();
                vm.Add(new MainViewModel { BannerModel = new List<BannerModel>() });
                List<BannerModel> list = new List<BannerModel>();
                list.Add(new BannerModel { Image = "https://cdn.grabon.in/gograbon/images/web-images/uploads/1658919135375/swiggy-coupons.jpg" });
                list.Add(new BannerModel { Image = "https://www.dealsshutter.com/uploads/social_images/stores/swiggy-coupons-social-image-final-1621831150.jpg" });
                list.Add(new BannerModel { Image = "https://www.couponmoto.com/boards/wp-content/uploads/2019/02/Swiggy-Banner.png" });
                list.Add(new BannerModel { Image = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8CF6zXRURcFjGNS4twbPJefG596hzaydN1d_oC4Xtx391t_BOIxqLXsfUgv4RlK0V2JY" });
                list.Add(new BannerModel { Image = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9-SipuwkwtNCQCBbr47cU0-tWqYfO4QJLJQ" });


                List<MenuModel> menus = new List<MenuModel>();
                menus.Add(new MenuModel { Name = "Locho", Description = "Locho", Price = 25, Image = "https://cdn-bkdna.nitrocdn.com/byIcNObNLXVFaYWLstICKAkCMytzVoyD/assets/static/optimized/rev-02ea418/wp-content/uploads/2021/03/LOCHO.jpg" });
                menus.Add(new MenuModel { Name = "Pani Puri", Description = "Locho", Price = 25, Image = "https://akm-img-a-in.tosshub.com/indiatoday/images/story/201708/dish-story_647_081417052301.jpg" });
                menus.Add(new MenuModel { Name = "Chole Bhature", Description = "Chole Bhature", Price = 25, Image = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXh5LCoOMSM_9pmgcOROJRd4If-6ciXX_bkw" });
                menus.Add(new MenuModel { Name = "Lithi Chokha", Description = "Locho", Price = 25, Image = "https://img.traveltriangle.com/blog/wp-content/uploads/2018/01/shutterstock_4148348021.jpg" });
                menus.Add(new MenuModel { Name = "Indian Food", Description = "Indian Food", Price = 25, Image = "https://t3.ftcdn.net/jpg/01/43/83/08/360_F_143830808_V7n31HxcS8duJIVr3opWzG4FCkDQZK4v.jpg" });


                List<RestaurantModel> restaurants = new List<RestaurantModel>();
                restaurants.Add(new RestaurantModel
                {
                    Name = "Table 101",
                    Description = "Good Option",
                    Rating = "4.0 (10k)",
                    Image = "https://hips.hearstapps.com/hmg-prod/images/img-6171-jpg-1516034404.jpg",
                    Menus = menus
                });

                restaurants.Add(new RestaurantModel
                {
                    Name = "Foina",
                    Description = "Good Option",
                    Rating = "4.0 (10k)",
                    Image = "https://im1.dineout.co.in/images/uploads/restaurant/sharpen/4/l/h/p4185-164156150261d83d9ec6ca8.jpg",
                    Menus = menus
                });

                restaurants.Add(new RestaurantModel
                {
                    Name = "Kabab and Kurries",
                    Description = "Good Option",
                    Rating = "4.0 (10k)",
                    Image = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTx0hX-qswrn0vA1ZGogh05cd6dbRiJqbG-ww",
                    Menus = menus
                });

                restaurants.Add(new RestaurantModel
                {
                    Name = "Rasoi Kitchen",
                    Description = "Good Option",
                    Rating = "4.0 (10k)",
                    Image = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTO5nlpGTbABZretJas2xH6RDnWIhTbiRoIOA",
                    Menus = menus
                });

                restaurants.Add(new RestaurantModel
                {
                    Name = "Mabruk",
                    Description = "Good Option",
                    Rating = "4.0 (10k)",
                    Image = "https://threebestrated.in/images/MahalaxmiFastFoodandJuiceCorner-Surat-GJ.jpeg",
                    Menus = menus
                });

                restaurants.Add(new RestaurantModel
                {
                    Name = "Saptami",
                    Description = "Good Option",
                    Rating = "4.0 (10k)",
                    Image = "https://i0.wp.com/swadishta.de/wp-content/uploads/2021/01/Thali.jpg",
                    Menus = menus
                });

                restaurants.Add(new RestaurantModel
                {
                    Name = "Yeda Republic",
                    Description = "Good Option",
                    Rating = "4.0 (10k)",
                    Image = "https://i0.wp.com/indiacurrents.com/wp-content/uploads/2022/09/pesarratu.jpg",
                    Menus = menus
                });

                restaurants.Add(new RestaurantModel
                {
                    Name = "Peshawari",
                    Description = "Good Option",
                    Rating = "4.0 (10k)",
                    Image = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSCAOb9b2dUqUFuUbzbYlMWu4qLwrxjRs_2Dg",
                    Menus = menus
                });

                restaurants.Add(new RestaurantModel
                {
                    Name = "Solitare Restaurant",
                    Description = "Good Option",
                    Rating = "4.0 (10k)",
                    Image = "https://static.toiimg.com/thumb/56624568/308796_287027921321520_585680932_n.jpg",
                    Menus = menus
                });

                restaurants.Add(new RestaurantModel
                {
                    Name = "Gallery Cafe",
                    Description = "Good Option",
                    Rating = "4.0 (10k)",
                    Image = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsuxe-gEy1j2uKXJG9pUWdx-ZGalqtGCDStw",
                    Menus = menus
                });

                vm[0].BannerModel = list;
                bannerVM[0].Restaurants = restaurants;
                bannerVM[0].FirstSlotRestaurants = restaurants.Take(3).ToList();
                bannerVM[0].SecondSlotRestaurants = restaurants.Reverse<RestaurantModel>().Take(7).ToList();
                bannerVM[0].Menus = menus;
            }
            catch (Exception ex)
            {
                await App.Current.MainPage.DisplayAlert("", ex.Message, "OK");
            }
            IsBusy = false;
        }

        public void OnAppearing()
        {
            IsBusy = true;
        }


    }
Let's Create a Control

ProductHomeControl.xaml
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FoodDeliveryApp.Controls.ProductHomeControl"
             xmlns:fontAwesome="clr-namespace:FoodDeliveryApp.Utilities">
    <Grid ColumnDefinitions="Auto,Auto,*,Auto" RowDefinitions="Auto,Auto" ColumnSpacing="5" RowSpacing="5">
        <Label Grid.Column="0" Grid.Row="0" Text="{x:Static fontAwesome:FontAwesomeSolid.Shopping_Bag}" 
               FontSize="15"  TextColor="{x:StaticResource Primary}" FontFamily="FontAwesome" ></Label>
        <Label Grid.Column="1" Grid.Row="0" Text="Work" TextColor="{x:StaticResource Secondary}" 
               FontAttributes="Bold" ></Label>
        <Label Grid.Column="2" Grid.Row="0" Text="{x:Static fontAwesome:FontAwesomeSolid.Angle_Down}"
               VerticalOptions="End" FontSize="20" TextColor="{x:StaticResource Gray}" FontFamily="FontAwesome" >
            
        </Label>
        <Label Grid.Column="3" Grid.Row="0" Grid.RowSpan="2" Text="{x:Static fontAwesome:FontAwesomeSolid.User_Circle}" 
               FontSize="30" TextColor="{x:StaticResource Gray}" FontFamily="FontAwesome" ></Label>
        <Label Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="1" Text="1600 Amphitheatre Parkway 
               Mountain View, CA 94043, USA." TextColor="{x:StaticResource Gray}"></Label>
    </Grid>
</ContentView>
RoundCornerImage.Xaml
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FoodDeliveryApp.Controls.RoundCornerImage">
    <Grid RowDefinitions="Auto,Auto" Padding="5">
        <Frame Grid.Row="0" Padding="0" CornerRadius="20">
            <Image x:Name="img" HeightRequest="80" Aspect="AspectFill"></Image>
        </Frame>
        <Label Grid.Row="1" x:Name="lbl" TextColor="{x:StaticResource Gray}" HorizontalOptions="Center" Margin="0,8,0,0"></Label>
    </Grid>
</ContentView>
RoundCornerImage.Xaml.cs
public partial class RoundCornerImage : ContentView
{
    public RoundCornerImage()
    {
        InitializeComponent();
    }

    public ImageSource Image { get => img.Source; set => img.Source = value; }
    public bool IsAnimation { get => img.IsAnimationPlaying; set => img.IsAnimationPlaying = value; }
    public string Title { get => lbl.Text; set => lbl.Text = value; }
}

Let's Create Template

BannerTemplate.Xaml

 <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FoodDeliveryApp.Pages.Products.Template.BannerTemplate"
             xmlns:model="clr-namespace:FoodDeliveryApp.Models">
    <StackLayout Padding="5">
        <Frame x:DataType="model:BannerModel" Padding="0" CornerRadius="10">
            <Image Source="{Binding Image}" HeightRequest="150" Aspect="AspectFill"></Image>
        </Frame>
    </StackLayout>
</ContentView>

ProductTemplate.xaml

  <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FoodDeliveryApp.Pages.Products.Template.ProductTemplate">
    <Grid Padding="5" ColumnSpacing="10" RowDefinitions="Auto" RowSpacing="0" ColumnDefinitions="150,*">
        <Frame  Padding="0" CornerRadius="10" Grid.Row="0" Grid.Column="0" Grid.RowSpan="4">
            <Image Source="{Binding Image}" HeightRequest="150" Aspect="AspectFill"></Image>
        </Frame>
        <StackLayout Grid.Row="0" Grid.Column="1" VerticalOptions="CenterAndExpand">
            <Label  Text="{Binding Name}" TextColor="{x:StaticResource Gray}" VerticalOptions="Start" FontAttributes="Bold"></Label>
            <Label Text="{Binding Rating}" TextColor="{x:StaticResource Gray}" FontAttributes="Bold"></Label>
            <Label Text="{Binding Description}" TextColor="{x:StaticResource Gray}" ></Label>
            <Label Text="Gopipura . 15km" TextColor="{x:StaticResource Gray}" ></Label>
        </StackLayout>
    </Grid>
</ContentView>

Let's Create Home Page

   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FoodDeliveryApp.Pages.Products.Home"
             xmlns:control="clr-namespace:FoodDeliveryApp.Controls"
             xmlns:fontAwesome="clr-namespace:FoodDeliveryApp.Utilities"
             xmlns:vm="clr-namespace:FoodDeliveryApp.ViewModels"
             xmlns:model="clr-namespace:FoodDeliveryApp.Models"
             xmlns:template="clr-namespace:FoodDeliveryApp.Pages.Products.Template"
             Title="Home"
             Shell.NavBarIsVisible="False">
    <RefreshView x:Name="refreshView" x:DataType="vm:HomeViewModel" Command="{Binding LoadBannerCommand}" 
                 IsRefreshing="{Binding IsBusy, Mode=TwoWay}">
        <Grid RowDefinitions="Auto,Auto,*" Padding="10" RowSpacing="10" x:DataType="vm:HomeViewModel" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <control:ProductHomeControl Grid.Row="0"></control:ProductHomeControl>
            <Frame Padding="12" Grid.Row="1" BackgroundColor="#f8f8f8" BorderColor="#f8f8f8" HasShadow="True">
                <Grid ColumnDefinitions="*,Auto,Auto,Auto" ColumnSpacing="10">
                    <Label Grid.Column="0" Text="Search,Order,Enjoy,Repeat" TextColor="{x:StaticResource Gray}"></Label>
                    <Label Grid.Column="1" Text="{x:Static fontAwesome:FontAwesomeSolid.Search}" TextColor="{x:StaticResource Gray}" FontSize="20" FontFamily="FontAwesome"></Label>
                    <BoxView Grid.Column="2" BackgroundColor="{x:StaticResource Gray}" HeightRequest="20" WidthRequest="1"></BoxView>
                    <Label Grid.Column="3" Text="{x:Static fontAwesome:FontAwesomeSolid.Microphone}" FontSize="20" TextColor="{x:StaticResource Secondary}" FontFamily="FontAwesome">

                    </Label>
                </Grid>
            </Frame>

            <ListView x:DataType="vm:HomeViewModel" x:Name="listView" ItemsSource="{Binding vm}" Grid.Row="2" HasUnevenRows="True" SeparatorVisibility="None">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid x:DataType="vm:MainViewModel" RowSpacing="10" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto">

                                <Grid ColumnDefinitions="*,*,*" Grid.Row="0">
                                    <control:RoundCornerImage Grid.Column="0" x:Name="img1" Image="https://img95.lovepik.com/photo/40104/9102.gif_wh300.gif" IsAnimation="True" Title="Tasty"></control:RoundCornerImage>
                                    <control:RoundCornerImage Grid.Column="1" x:Name="img2" Image="https://i.pinimg.com/736x/a9/e7/b9/a9e7b9c4a3e6d2a260d68bd6fd019dc7.jpg"  Title="Ofer Zone"></control:RoundCornerImage>
                                    <control:RoundCornerImage Grid.Column="2" x:Name="img3" Image="https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExMHpwbHdiMTFiaTBoY3kyZTNueTk4bXA4eGNjcWxzOGNmaTgzaDU4ZCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Yuy61Bd6K8STS/giphy.gif" IsAnimation="True" Title="Gourmet"></control:RoundCornerImage>
                                </Grid>
                                <StackLayout Grid.Row="1">
                                    <!-- Other content for the list item -->
                                    <CarouselView IndicatorView="indicatorView" Grid.Row="1"  ItemsSource="{Binding BannerModel}" PeekAreaInsets="15">
                                        <CarouselView.ItemsLayout>
                                            <LinearItemsLayout ItemSpacing="0" Orientation="Horizontal" SnapPointsAlignment="Center" SnapPointsType="MandatorySingle"></LinearItemsLayout>
                                        </CarouselView.ItemsLayout>
                                        <CarouselView.ItemTemplate>
                                            <DataTemplate>
                                                <template:BannerTemplate></template:BannerTemplate>
                                            </DataTemplate>
                                        </CarouselView.ItemTemplate>
                                    </CarouselView>
                                    <IndicatorView x:Name="indicatorView"
                   IndicatorColor="LightGray"
                   SelectedIndicatorColor="DarkGray"
                   HorizontalOptions="Center" />
                                </StackLayout>


                                <Label Text="Your trusted picks" Grid.Row="2" TextColor="{x:StaticResource Gray}" FontAttributes="Bold"></Label>
                                <Frame CornerRadius="20" HorizontalOptions="Start" Padding="0" Grid.Row="3" BackgroundColor="{x:StaticResource Gray}">
                                    <Label Text="Reorder" TextColor="white" FontAttributes="Bold" Margin="10" ></Label>
                                </Frame>

                                <Grid Grid.Row="4" ColumnDefinitions="*,*,*" RowDefinitions="Auto,Auto">
                                    <control:RoundCornerImage Grid.Row="0" Grid.Column="0"  Image="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsuxe-gEy1j2uKXJG9pUWdx-ZGalqtGCDStw" IsAnimation="True" Title="Thali"></control:RoundCornerImage>
                                    <control:RoundCornerImage Grid.Row="0" Grid.Column="1"  Image="https://static.toiimg.com/thumb/56624568/308796_287027921321520_585680932_n.jpg"  Title="Ofer Zone"></control:RoundCornerImage>
                                    <control:RoundCornerImage Grid.Row="0" Grid.Column="2"  Image="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSCAOb9b2dUqUFuUbzbYlMWu4qLwrxjRs_2Dg" IsAnimation="True" Title="South Indian"></control:RoundCornerImage>

                                    <control:RoundCornerImage Grid.Row="1" Grid.Column="0"  Image="https://i0.wp.com/indiacurrents.com/wp-content/uploads/2022/09/pesarratu.jpg" IsAnimation="True" Title="Roll"></control:RoundCornerImage>
                                    <control:RoundCornerImage Grid.Row="1" Grid.Column="1"  Image="https://i0.wp.com/swadishta.de/wp-content/uploads/2021/01/Thali.jpg"  Title="Full Thali"></control:RoundCornerImage>
                                    <control:RoundCornerImage Grid.Row="1" Grid.Column="2"  Image="https://threebestrated.in/images/MahalaxmiFastFoodandJuiceCorner-Surat-GJ.jpeg" IsAnimation="True" Title="Sandwich"></control:RoundCornerImage>
                                </Grid>

                                <Image Grid.Row="5" Source="https://media.tenor.com/K67T2j90c-cAAAAC/fruits-web-banner.gif" Aspect="AspectFill" IsAnimationPlaying="True"></Image>



                                <ListView HasUnevenRows="True" Grid.Row="6" ItemsSource="{Binding FirstSlotRestaurants}" SeparatorVisibility="None">
                                    <ListView.ItemTemplate>
                                        <DataTemplate>
                                            <ViewCell>
                                                <template:ProductTemplate></template:ProductTemplate>
                                            </ViewCell>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>

                                <StackLayout BackgroundColor="{x:StaticResource LightGray}" Grid.Row="7" Spacing="10" Padding="10">
                                    <Label Text="Popular Restaurant" TextColor="{x:StaticResource Gray}" FontAttributes="Bold"></Label>
                                    <CarouselView    ItemsSource="{Binding Restaurants}" >
                                        <CarouselView.ItemsLayout>
                                            <LinearItemsLayout ItemSpacing="0" Orientation="Horizontal" SnapPointsAlignment="Center" SnapPointsType="MandatorySingle"></LinearItemsLayout>
                                        </CarouselView.ItemsLayout>
                                        <CarouselView.ItemTemplate>
                                            <DataTemplate>
                                                <template:ProductTemplate></template:ProductTemplate>
                                            </DataTemplate>
                                        </CarouselView.ItemTemplate>
                                    </CarouselView>
                                </StackLayout>

                                <ListView HasUnevenRows="True" Grid.Row="8" ItemsSource="{Binding SecondSlotRestaurants}" SeparatorVisibility="None">
                                    <ListView.ItemTemplate>
                                        <DataTemplate>
                                            <ViewCell>
                                                <template:ProductTemplate></template:ProductTemplate>
                                            </ViewCell>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>

                                <StackLayout BackgroundColor="{x:StaticResource LightGray}" Grid.Row="9" Spacing="10" Padding="10">
                                    <Label Text="Popular Menu" TextColor="{x:StaticResource Gray}" FontAttributes="Bold"></Label>
                                    <CarouselView    ItemsSource="{Binding Menus}" >
                                        <CarouselView.ItemsLayout>
                                            <LinearItemsLayout ItemSpacing="0" Orientation="Horizontal" SnapPointsAlignment="Center" SnapPointsType="MandatorySingle"></LinearItemsLayout>
                                        </CarouselView.ItemsLayout>
                                        <CarouselView.ItemTemplate>
                                            <DataTemplate>
                                                <template:ProductTemplate></template:ProductTemplate>
                                            </DataTemplate>
                                        </CarouselView.ItemTemplate>
                                    </CarouselView>
                                </StackLayout>


                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>
    </RefreshView>
</ContentPage>

HomePage.xaml.cs

public partial class Home : ContentPage
{
    HomeViewModel _viewModel;
	public Home()
	{
		InitializeComponent();
        BindingContext = _viewModel = new HomeViewModel();
	}

    protected override async void OnAppearing()
    {
        base.OnAppearing();
        _viewModel.OnAppearing();
    }
}

Hope this is helpfull to you. please share your feedback in comment section.

-

Comments

Post a Comment

Popular posts from this blog

Push Notifications in .NET MAUI: A Comprehensive Guide

Image
Please, support my blog by clicking on our sponsors ad! IF you need this project DM me on whatsaap "9724784544" What are Push Notifications? Push notifications are messages sent directly to a user's mobile device from a server, even when the app is not actively being used. They are a crucial part of mobile app development, enabling real-time communication with users. Notifications can inform users about new content, updates, reminders, or other important information, thus enhancing user engagement and retention. Watch video to understand code: Implementing Push Notifications in Android and iOS using .NET MAUI In this blog, we'll explore how to implement push notifications in a .NET MAUI application for both Android and iOS platforms. We'll start by setting up a Firebase account, configuring the necessary dependencies, and writing the required code for Android and iOS.  Setting Up a Firebase Account Go to Firebase Console: Navigate to the Firebase ...
Read more

Explore the UI libraries available for .NET MAUI at no cost.

Image
  In this article, we'll explore some of the free libraries available for .NET MAUI. Please, support my blog by clicking on our sponsors ad! In this article, we'll explore some of the free libraries available for .NET MAUI. I think many developers, when creating applications, seek free or open-source UI libraries that enhance the user experience, are compatible, or at least have support plans for .NET MAUI. That's why today, I want to share some options I found that you can explore and implement in your projects: MauiBlazor  Specifically crafted for .NET MAUI, this library provides Blazor UI components for cross-platform development. Repository: MauiBlazor on GitHub Built on Blazor, this library allows you to create cross-platform applications using C#, HTML, and JavaScript. Note: Ensure to review the documentation and updates to confirm compatibility with your .NET MAUI version. Comet  Initially designed for Xamarin.Forms, Comet is a UI framew...
Read more

Push Notification using Firebase in xamarin form (Android and IOS)

Image
Push Notification using Firebase in xamarin form (Android and IOS) Please, support my blog by clicking on our sponsors ad! Watch video to understand the code: https://youtu.be/1Ixc_B86mDk Follow steps to create push notification in both project. Create Project in  https://console.firebase.google.com/ Create Project for push notification After Creating Project add app for both IOS and Android Project. Create app in project For Both IOS and Android project add Package name. Package name should be same as your package name in Xamarin Android and IOS Project. Click on Register App Download Google Service json. If you are in android app then download google-services.json else if you are in ios app then download "GoogleService-Info.plist" file Click Next then click Next then Click Continue to console button. We have created project in firebase console now we will continue coding in xamarin. In Android Project add Internet Permission. Right click on android project -> ...
Read more