GT Sizer #

A powerful responsive sizing utility for Flutter with hybrid scaling for width, height, fonts, icons, and spacing across mobile, tablet, and desktop devices.

Features #

✅ Hybrid Scaling Engine - Combines width, height & DPI for optimal scaling
✅ Device Breakpoints - Automatic detection for mobile, tablet, desktop
✅ Orientation Support - Handles landscape/portrait seamlessly
✅ Foldable Device Support - Tuned for ultra-tall/wide screens
✅ Safe Area Handling - Easy access to safe area insets
✅ Zero Configuration - Auto-initializes on first use
✅ Extension Support - Use .w, .h, .sp on any number

Installation #

Add this to your pubspec.yaml:

dependencies:
  gt_sizer: ^1.0.0

Then run:

flutter pub get

Quick Start #

1. Initialize (Optional) #

The package auto-initializes, but you can initialize explicitly with context:

import 'package:gt_sizer/gt_sizer.dart';

void main() {
  ResponsiveUtils.init(); // Optional: Auto-initializes on first use
  runApp(MyApp());
}

2. Use SizeManager #

import 'package:gt_sizer/gt_sizer.dart';

// Width scaling
Container(
  width: SizeManager.w200,  // 200dp scaled
  height: SizeManager.h100, // 100dp scaled
)

// Font sizing
Text(
  'Hello World',
  style: TextStyle(fontSize: SizeManager.f16),
)

// Icon sizing
Icon(Icons.star, size: SizeManager.i24)

// Padding & Margins
Padding(
  padding: SizeManager.all(16),              // All sides
  padding: SizeManager.horizontal(20),       // Left & Right
  padding: SizeManager.vertical(12),         // Top & Bottom
  padding: SizeManager.symmetric(horizontal: 16, vertical: 8),
  padding: SizeManager.only(left: 20, top: 10),
)

// Spacing widgets
Column(
  children: [
    Text('Item 1'),
    SizeManager.verticalSpace(16),   // Vertical gap
    Text('Item 2'),
  ],
)

Row(
  children: [
    Icon(Icons.star),
    SizeManager.horizontalSpace(8),  // Horizontal gap
    Text('Rating'),
  ],
)

3. Use Extensions #

Clean syntax with .w, .h, .sp extensions:

Container(
  width: 200.w,   // Width-based scaling
  height: 100.h,  // Height-based scaling
  child: Text(
    'Responsive Text',
    style: TextStyle(fontSize: 16.sp),  // Font scaling
  ),
)

Device Breakpoints #

Detect device type for adaptive layouts:

if (SizeManager.isMobile) {
  // Mobile layout (< 600dp)
} else if (SizeManager.isTablet) {
  // Tablet layout (600dp - 1200dp)
} else if (SizeManager.isDesktop) {
  // Desktop/Web layout (>= 1200dp)
}

// Adaptive grid example
GridView.count(
  crossAxisCount: SizeManager.isMobile ? 2 : SizeManager.isTablet ? 3 : 5,
  children: [...],
)

Screen & Safe Area Values #

Access screen dimensions and safe areas:

// Screen dimensions
double width = SizeManager.screenWidth;
double height = SizeManager.screenHeight;

// Safe area insets
double topInset = SizeManager.safeTop;
double bottomInset = SizeManager.safeBottom;

// Safe area widgets
Column(
  children: [
    SizeManager.safeAreaTopSpace,    // Top safe area spacer
    // Your content
    SizeManager.safeAreaBottomSpace, // Bottom safe area spacer
  ],
)

Available Sizes #

Width Sizes #

w1, w2, w4, w6, w8, w10, w12, w14, w16, w18, w20, w24, w32, w40, w48, w56, w64, w72, w80, w96, w128, w160, w200, w250, w300

Height Sizes #

h1, h2, h4, h6, h8, h10, h12, h14, h16, h18, h20, h24, h32, h40, h48, h56, h64, h72, h80, h96, h128, h160, h200, h250, h300

Font Sizes #

f8, f10, f12, f14, f16, f18, f20, f24, f28, f32, f36, f40

Icon Sizes #

i12, i16, i20, i24, i32, i40, i48, i64

Example #

See the example folder for a complete demo app showcasing all features.

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

License #

This project is licensed under the MIT License - see the LICENSE file for details.