zeba_academy_media_query_tools 0.0.1

Powerful MediaQuery utilities, responsive helpers, extensions, and device detection for Flutter apps.

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!