zeba_academy_media_query_tools

A powerful and lightweight Flutter package that provides responsive MediaQuery utilities, extension methods, spacing helpers, safe area utilities, padding shortcuts, and device detection tools for building adaptive Flutter applications with clean and readable code.

✨ Features

✅ Width & height helpers
✅ MediaQuery shortcuts
✅ Padding & margin extensions
✅ Safe area utilities
✅ Device detection helpers
✅ Responsive extensions
✅ Vertical & horizontal spacing widgets
✅ Clean and developer-friendly API
✅ Lightweight and production ready

Installation

Add this to your pubspec.yaml:

dependencies:
  zeba_academy_media_query_tools: ^0.0.1

Then run:

flutter pub get

Import

import 'package:zeba_academy_media_query_tools/zeba_academy_media_query_tools.dart';

Usage

Screen Size Helpers

context.screenWidth
context.screenHeight

Example:

Container(
  width: context.screenWidth,
  height: context.screenHeight * 0.3,
)

Device Detection

context.isMobile
context.isTablet
context.isDesktop

Example:

if (context.isTablet) {
  return const TabletView();
}

Padding Extensions

All Padding

padding: 16.p

Horizontal Padding

padding: 20.ph

Vertical Padding

padding: 12.pv

Top Padding

padding: 10.pt

Bottom Padding

padding: 10.pb

Spacing Helpers

Vertical Space

20.verticalSpace

Horizontal Space

10.horizontalSpace

Example:

Column(
  children: [
    const Text("Hello"),
    20.verticalSpace,
    const Text("World"),
  ],
)

Radius Extensions

BorderRadius.circular(16.r)

Safe Area Wrapper

SafeAreaWrapper(
  child: YourWidget(),
)

Example:

SafeAreaWrapper(
  backgroundColor: Colors.white,
  child: Scaffold(
    body: YourWidget(),
  ),
)

Media Query Helper

You can also use the static helper class.

MQ.width(context)
MQ.height(context)
MQ.isPortrait(context)
MQ.isLandscape(context)

Complete Example

import 'package:flutter/material.dart';
import 'package:zeba_academy_media_query_tools/zeba_academy_media_query_tools.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeAreaWrapper(
        child: Padding(
          padding: 20.p,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Width: ${context.screenWidth}',
              ),

              10.verticalSpace,

              Text(
                'Height: ${context.screenHeight}',
              ),

              10.verticalSpace,

              Text(
                'Is Mobile: ${context.isMobile}',
              ),

              20.verticalSpace,

              Container(
                width: context.screenWidth,
                padding: 16.p,
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.circular(16.r),
                ),
                child: const Text(
                  'Zeba Academy Media Query Tools',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

API Overview

Extension/Helper Description
context.screenWidth Screen width
context.screenHeight Screen height
context.isMobile Detect mobile devices
context.isTablet Detect tablet devices
context.isDesktop Detect desktop devices
16.p All padding
20.ph Horizontal padding
12.pv Vertical padding
20.verticalSpace Vertical spacer
10.horizontalSpace Horizontal spacer
16.r Radius helper
SafeAreaWrapper Safe area widget

Why Use This Package?

This package helps reduce boilerplate when working with:

  • MediaQuery
  • Responsive layouts
  • Spacing widgets
  • Padding utilities
  • Device responsiveness
  • Safe areas

It improves readability and speeds up UI development.

Folder Structure

lib/
│
├── src/
│   ├── extensions/
│   ├── helpers/
│   └── widgets/
│
└── zeba_academy_media_query_tools.dart

Running Tests

flutter test

Analyze Package

flutter analyze

Publish Dry Run

flutter pub publish --dry-run

Contributing

Contributions, issues, and feature requests are welcome!

Feel free to fork the repository and submit pull requests.

License

MIT License © 2026

About Me

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about me and my work at sufyanism.com or connect with me on LinkedIn

Your all-in-one learning hub!

🚀 Explore courses and resources in coding, tech, and development at zeba.academy and code.zeba.academy.

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience.

Level up your tech game today! 💻✨

Zeba Academy is a learning platform dedicated to coding, technology, and development.

➡ Visit our main site: zeba.academy
➡ Explore hands-on courses and resources at: code.zeba.academy
➡ Check out our YouTube for more tutorials: zeba.academy
➡ Follow us on Instagram: zeba.academy

Support

If you like this package, give it a ⭐ on GitHub and share it with the Flutter community!

Thank you for visiting!

Libraries

zeba_academy_media_query_tools