adaptive_responsive 1.0.0
adaptive_responsive: ^1.0.0 copied to clipboard
A production-ready Flutter package for building fully responsive and adaptive layouts with customizable breakpoints, responsive values, and utility extensions.
Adaptive Responsive #
A production-ready Flutter package for building fully responsive and adaptive layouts with ease. Support for customizable breakpoints, responsive values, layout builders, and context extensions.
Features #
- 📱 Customizable Breakpoints: Define your own screen size thresholds.
- 🏗️ ResponsiveLayout: Easily switch between mobile, tablet, and desktop widgets.
- 🔢 ResponsiveValue: Get different values (sizes, colors, etc.) based on screen size.
- 🛠️ Context Extensions: Check screen type and metrics directly from
context. - 📐 Screen Metrics: Quick access to width, height, and safe areas.
- 📏 Adaptive Spacing: Consistent spacing across different devices.
Installation #
Add this to your pubspec.yaml:
dependencies:
adaptive_responsive: ^1.0.0
Usage #
1. Simple Screen Checks #
if (context.isMobile) {
// Build mobile UI
}
2. Responsive Layout #
ResponsiveLayout(
mobile: MobileWidget(),
tablet: TabletWidget(), // Optional
desktop: DesktopWidget(), // Optional
)
3. Responsive Value #
double padding = context.responsive<double>(
mobile: 10,
tablet: 20,
desktop: 30,
);
4. Custom Breakpoints #
Initialize custom breakpoints at the start of your app:
void main() {
AdaptiveBreakpoints.setCustom(
AdaptiveBreakpoints(
mobile: 480,
tablet: 768,
desktop: 1200,
),
);
runApp(MyApp());
}
Use Cases #
- Dashboard Applications: Show a sidebar on desktop and a drawer on mobile.
- Content-Heavy Apps: Adjust text size and grid column counts based on width.
- Cross-Platform Development: Ensure a consistent experience across iOS, Android, and Web.
Testing #
This package is designed to be easily testable with standard Flutter widget tests. Use MediaQuery to mock different screen sizes.
License #
This project is licensed under the MIT License - see the LICENSE file for details.