zeba_academy_responsive #

A powerful Flutter responsive design utility package providing breakpoints, responsive builders, device detection, and responsive values to create adaptive layouts easily across mobile, tablet, desktop, and large screens.

Features #

✨ Breakpoint Management

Define and manage responsive screen sizes:

• Mobile breakpoint
• Tablet breakpoint
• Desktop breakpoint
• Custom responsive checks

✨ Responsive Builder

Build different UI layouts automatically:

• Mobile layouts
• Tablet layouts
• Desktop layouts

✨ Device Detection

Detect current device category:

• Mobile
• Tablet
• Desktop

✨ Responsive Values

Provide different values depending on screen size:

• Responsive padding
• Responsive font sizes
• Responsive dimensions
• Responsive configurations

✨ Flutter Friendly

• Null safety support
• Lightweight
• No external dependencies
• Material & Cupertino compatible

Installation #

Add this package to your pubspec.yaml:

dependencies:
  zeba_academy_responsive: ^1.0.0

Run:

flutter pub get

Import #

import 'package:zeba_academy_responsive/zeba_academy_responsive.dart';

Usage #

Breakpoints #

Check device width easily:

final width = MediaQuery.sizeOf(context).width;


if(
  ResponsiveBreakpoints.isMobile(width)
){

  print("Mobile Device");

}


if(
  ResponsiveBreakpoints.isDesktop(width)
){

  print("Desktop Device");

}

Responsive Builder #

Create adaptive layouts:

ResponsiveBuilder(

  mobile: const Text(
    "Mobile Layout",
  ),

  tablet: const Text(
    "Tablet Layout",
  ),

  desktop: const Text(
    "Desktop Layout",
  ),

);

The widget automatically selects the correct layout based on screen width.

Device Detection #

Detect device type:

final device =
DeviceDetector.getDeviceType(context);


if(
DeviceDetector.isMobile(context)
){

  print(
    "Mobile"
  );

}

Available methods:

DeviceDetector.isMobile(context);

DeviceDetector.isTablet(context);

DeviceDetector.isDesktop(context);

Responsive Values #

Use different values for different screens.

Example:

final padding =
ResponsiveValues<double>(

  mobile: 8,

  tablet: 16,

  desktop: 32,

);


final value =
padding.value(
  MediaQuery.sizeOf(context).width
);

Result:

Default Breakpoints #

The package provides:

Example Application #

class HomePage extends StatelessWidget {

const HomePage({super.key});


@override
Widget build(BuildContext context){

return Scaffold(

body:

ResponsiveBuilder(

mobile:
Center(
child:
Text(
"Mobile Screen"
),
),


tablet:
Center(
child:
Text(
"Tablet Screen"
),
),


desktop:
Center(
child:
Text(
"Desktop Screen"
),
),


),

);

}

}

Why Use zeba_academy_responsive? #

Flutter applications today run on:

• Smartphones
• Tablets
• Foldable devices
• Desktop applications
• Web browsers

Managing layouts manually can become difficult.

zeba_academy_responsive provides a simple and clean solution for building responsive Flutter applications.

Roadmap #

Future improvements:

• Custom breakpoint configuration
• Responsive typography helpers
• Responsive spacing system
• Orientation detection
• Foldable device support
• Adaptive grid helpers
• Responsive layout templates

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:

• https://sufyanism.com/
• LinkedIn: https://www.linkedin.com/in/sufyanism

Your all-in-one learning hub! #

🚀 Explore courses and resources in coding, technology, and development at:

• https://zeba.academy
• https://code.zeba.academy

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

➡ Visit our main site: https://zeba.academy

➡ Explore hands-on courses and resources: https://code.zeba.academy

➡ Watch tutorials on YouTube: https://www.youtube.com/@zeba.academy

➡ Follow us on Instagram: https://www.instagram.com/zeba.academy/

Thank you for visiting!

License #

Copyright (C) Zeba Academy

This project is licensed under the GNU General Public License v3.0 (GPL-3.0).

You are free to:

• Use this package
• Modify the source code
• Share improvements
• Distribute modified versions

Under the GPL-3.0 license, distributed versions must:

• Include the original license
• Provide source code
• Keep the same freedoms for users

For full license details:

https://www.gnu.org/licenses/gpl-3.0.html

Contributing #

Contributions are welcome!

Steps:

1. Fork the repository
2. Create your feature branch
3. Make your changes
4. Add tests
5. Submit a pull request

Together we can build better Flutter tools for the developer community.