Create a file named as 'location_card.dart' in lib -> cards folder and paste following code: Please, support my blog by clicking on our sponsors ad! import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:myfirstproject/common/constants.dart'; import 'package:myfirstproject/models/locationmodel.dart'; class LocationCard extends StatelessWidget { late final LocationModel locationModel; LocationCard({required this.locationModel}); @override Widget build(BuildContext context) { return Card(elevation: 0, child: Container( width: 150,height: 180, decoration: BoxDecoration(borderRadius: BorderRadius.circular(20.0), color: Colors.white), child: Padding( padding: const EdgeInsets.all(10), child: Column( children: [ ClipRRect(borderRadius: BorderRadius.circular(20.0), child: Image.network(location

 Create a file named as 'areaspot_card.dart' in lib -> cards folder and paste following code: Please, support my blog by clicking on our sponsors ad! import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:myfirstproject/models/locationmodel.dart'; import 'package:myfirstproject/common/constants.dart'; class AreaSpotCard extends StatelessWidget { late final LocationModel locationModel; AreaSpotCard({required this.locationModel}); @override Widget build(BuildContext context) { return Card(color: SecondaryColor,elevation: 0, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0)), child: Padding( padding: const EdgeInsets.only(top: 20.0,left: 20.0,right: 20.0,bottom: 0.0), child: Container(decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(20)), child: Padding( padding: const EdgeInsets.all(

Introduction: As a .NET MAUI developer, building high-performance applications for Android and iOS is vital. This blog post aims to provide an in-depth guide on strategies and code optimizations to elevate the performance of your .NET MAUI apps. We'll explore common pitfalls and demonstrate improved coding practices to ensure a snappy and responsive user experience. Please, support my blog by clicking on our sponsors ad! Understanding .NET MAUI Performance Considerations: Before diving into optimizations, let's gain insights into performance considerations specific to .NET MAUI. This includes handling platform differences, optimizing resource usage, and leveraging the MauiGraphics API for custom drawing. Optimizing XAML Layouts for .NET MAUI: Before: <StackLayout> <Label Text="Welcome to My App" /> <Image Source="icon.png" /> <CollectionView ItemsSource="{Binding Items}" /> </StackLayout> After: &

  Interacting with file and folder dialogs in .NET MAUI using CommunityToolkit. Please, support my blog by clicking on our sponsors ad! File and folder interactions are routine for many applications, often requiring the creation of cumbersome, platform-specific code. The good news is that CommunityToolkit.Maui version 5.0 now includes enhanced FolderPicker and FileSaver classes, simplifying the process of selecting target folders and saving files across all .NET MAUI platforms. FileSaver Implementing FileSaver allows your application to present users with a user-friendly dialog for choosing a destination folder. With just a few lines of code, you can save various file types, such as documents, images, videos, and more. Example in C#: using var stream = new MemoryStream(Encoding.Default.GetBytes("Hello from the Community Toolkit!")); var fileSaveResult = await FileSaver.Default.SaveAsync("sample.txt", stream, cancellationToken); if (fileSaveResult.IsSuccess

Popup in .net Maui Please, support my blog by clicking on our sponsors ad! Popups are an integral part of user interface design, allowing developers to convey information and interact with users in a more engaging manner. In .NET MAUI, there are three main types of popups available: DisplayAlert, DisplayPrompt, and Plugin.Maui.Popup. In this blog post, we will dive into each of these popup types, explore their functionalities, and provide code examples to demonstrate their usage. DisplayAlert: Simple and Informative Popups DisplayAlert is a built-in feature in .NET MAUI that provides a straightforward way to display alert popups to users. These popups typically present important messages, notifications, or warnings that require user acknowledgement. Here's an example of how to use DisplayAlert in your .NET MAUI application: DisplayAlert("Display Alert", "Welcome to DotNet Maui", "OK","Cancel",FlowDirection.RightToLeft); In the co

 Animation will add more good looking UI of the mobile application. Let's see how to add animation using lottie file. Lottie is a mobile library for andriod and IOS that prases Adobe After Effects animations exported as JSON. Lottie Animation in .NetMaui You can go through the lottie website. This lottie provide pently of cool animation and also you can create own animation. Please, support my blog by clicking on our sponsors ad! Let's get started First add install "SkiaSharp.Extended.UI.MAUI" in your project using nugget manager. This nugget is prerelease so please check "Include Prerelease". Lottie animation in .net Maui Next step is to Bootstrap Skiasharp plugin in MAUIProgram file and add UseSkiaSharp() to the app builder.  Below is the code: public static class MauiProgram { public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder

Xamarin.Forms 4.0 introduced the amazing feature called Xamarins.Forms Shell. It has reduced complexity of creating mobile apps. Please, support my blog by clicking on our sponsors ad! It is used for Navigation,URI base routing, integrated search handling. Before Appshell there was independent feature: MasterDetailPage TabbedPage NavigationPage but Appshell has combine this and make easy creating apps. > You can add xaml file in your project and named it as AppShell.xaml and Update it like below code: AppShell.Xaml <?xml version="1.0" encoding="utf-8" ?> <Shell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XamarinCourse.AppShell"> </Shell> AppShell.Xaml.cs public partial class AppShell : Shell { public AppShell() { InitializeComponent(); } } You can call this class

 Absolute layout is used to position and size children using explicit values. The position is specified by the upper-left corner of the child relative to the upper-left corner of the AbsoluteLayout, in device independent units.Absolute Layout also implement proportional positioning and sizing feature. Please, support my blog by clicking on our sponsors ad! The Absolute Layout has two properties: LayoutBounds LayoutFlags Layout Bounds The default value is (0,0,Autosize,Autosize). The Parameter is as X,Y,Width,Height. LayoutFlags The default value of this property is AbsoluteLayoutFlags.None. This property indicates that the position and size are interpreted proportionally. Proportional values are from 0-1. 0 indicates 0% and 1 indicates 100%. If you want to use 50% then value will be 0.5 Values are as follow: None This is default value. this is autosize/fixed value. XProportional Indicates that what percentage X of parent should use, while other are absolute values YPropor

 Before you start with this blog, go to this syntax and tutorial blog. It will easy to understand the code of this blog. Grid through cs code Grid in xaml Please, support my blog by clicking on our sponsors ad! Below code for grid in c# Code. This is recommended when it has to add at runtime. By default you can add grid through xaml, Because xaml is easy to code and understand. var grid = new Grid(); var autoRow = new RowDefinition() { Height = new GridLength(1, GridUnitType.Auto) }; var fixRow = new RowDefinition() { Height = new GridLength(200) }; var starRow = new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) }; var col1 = new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) }; var col2 = new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) }; var col3 = new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) }; var col4 = new ColumnDefinition() { Width = new GridLength(