AhmedGhaith.Maui.ScreenUtils 1.0.0

MauiScreenUtils

Flutter's screen_util — brought to .NET MAUI.

A lightweight, zero-dependency NuGet package that makes building pixel-perfect, responsive UIs across all screen sizes and densities as ergonomic as Flutter's beloved flutter_screenutil.

✨ Features

🚀 Installation

dotnet add package MauiScreenUtils

🔧 Setup

1. Register in MauiProgram.cs

using MauiScreenUtils;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            // 👇 Add this — matches the frame size of your Figma / design tool
            .UseMauiScreenUtils(
                designWidth:    375,   // your design canvas width in dp
                designHeight:   812,   // your design canvas height in dp
                adaptiveFonts:  false, // set true to scale fonts with screen
                minTextAdapt:   0.8,   // minimum font scale ratio
                splitScreenMode: false // true for Android multi-window support
            );

        return builder.Build();
    }
}

2. Add XAML namespace (for AdaptiveBox)

xmlns:su="clr-namespace:MauiScreenUtils;assembly=MauiScreenUtils"

📐 Usage

C# — Extension Methods (fluent, like Flutter)

using MauiScreenUtils.Extensions;

// Width & Height — scale from design dp to real screen dp
myLabel.FontSize   = 16.Sp();   // 16sp → scaled font size
myBox.WidthRequest = 200.W();   // 200dp wide on design → scaled
myBox.HeightRequest = 100.H();  // 100dp tall on design → scaled
myIcon.WidthRequest = 24.R();   // 24dp using min(scaleW, scaleH)

// Screen percentages
var halfScreen = 0.5.Sw();      // 50% of screen width
var quarterH   = 0.25.Sh();     // 25% of screen height
// Or as int (treated as percent):
var thirdScreen = 33.Sw();      // 33% of screen width

// Padding / Thickness
myView.Padding = 16.0.ToPaddingWH();      // horizontal=16.W(), vertical=16.H()
myCard.Padding = 12.0.ToUniformPaddingW(); // all sides = 12.W()

// Corner radius
myCard.CornerRadius = 12.0.ToCornerRadius(); // 12.R() uniform radius

C# — Direct ScreenUtil API

using MauiScreenUtils;

var su = ScreenUtil.Instance;

double scaledWidth  = su.W(200);       // scale 200dp horizontally
double scaledHeight = su.H(100);       // scale 100dp vertically
double scaledFont   = su.Sp(16);       // scale 16sp
double safeSize     = su.R(24);        // min scale
double halfWidth    = su.Sw(0.5);      // 50% of screen width

// Screen info
double w     = su.ScreenWidth;         // real screen width in dp
double h     = su.ScreenHeight;        // real screen height in dp
double ratio = su.PixelRatio;          // device pixel ratio
double sb    = su.StatusBarHeight;     // status bar height in dp
double bb    = su.BottomBarHeight;     // bottom nav / home indicator dp
bool landscape = su.IsLandscape;

XAML — AdaptiveBox

<su:AdaptiveBox DesignWidth="200" DesignHeight="120">
    <Frame BackgroundColor="CornflowerBlue" CornerRadius="12">
        <Label Text="Scales with screen!" />
    </Frame>
</su:AdaptiveBox>


<su:AdaptiveBox DesignWidth="48" DesignHeight="48"
                ScaleMode="MinScale">
    <Image Source="icon.png" />
</su:AdaptiveBox>

Responsive Layout — ResponsiveHelper

using MauiScreenUtils.Helpers;

// Check breakpoint
if (ResponsiveHelper.IsPhone)   { /* phone layout */ }
if (ResponsiveHelper.IsTablet)  { /* tablet layout */ }

// Pick value by breakpoint
int columns = ResponsiveHelper.Value(
    phone:  2,
    tablet: 4);

// Full breakpoint control
double padding = ResponsiveHelper.Value(
    xSmall: 8,
    small:  12,
    medium: 16,
    large:  24,
    xLarge: 32);

// Auto grid columns (follows Material Design)
myGrid.ColumnDefinitions = Enumerable
    .Repeat(new ColumnDefinition(GridLength.Star), ResponsiveHelper.GridColumns)
    .ToList();

// Safe content margin
myContent.Margin = new Thickness(ResponsiveHelper.ContentMargin, 0);

MVVM — ScreenMetrics (observable)

// In your ViewModel
public ScreenMetrics Screen => ScreenMetrics.Current;

// In XAML
<Label Text="{Binding Screen.ScreenWidth, StringFormat='Width: {0:F0}dp'}" />
<Label Text="{Binding Screen.IsLandscape, StringFormat='Landscape: {0}'}" />

🔄 Rotation / Split-screen

ScreenUtil reads live DeviceDisplay.MainDisplayInfo on every call — no caching — so values update automatically when the device rotates or enters split-screen.

To react in code, attach the behavior to your page:

var behavior = new ScreenUtilBehavior();
behavior.MetricsChanged += (_, _) => RebuildLayout();
MainPage.Behaviors.Add(behavior);

📊 Scale factor reference

🗺 Flutter → MAUI cheat sheet

📄 License

MIT © Ahmed Ghaith