responsive_mate 1.0.2
responsive_mate: ^1.0.2 copied to clipboard
ResponsiveMate simplifies building adaptive layouts in Flutter apps. Effortlessly switch between mobile, tablet, and desktop views with customizable breakpoints and dynamic widget rendering. With util [...]
Responsive Package #
A Flutter package to easily manage responsive layouts across mobile, tablet, and desktop devices. With this package, you can create adaptive UI components that adjust based on screen size, making your app responsive across different devices.
Features #
- Mobile Layout: Define a widget specifically for mobile screen sizes.
- Tablet Layout: Optionally, define a widget for tablet screen sizes.
- Desktop Layout: Define a widget for desktop screen sizes.
- Customizable Breakpoints: Users can define custom screen width breakpoints for mobile, tablet, and desktop views.
Installation #
Add the following to your pubspec.yaml:
dependencies:
responsive_mate: ^0.0.1
Then run:
flutter pub get
Usage #
Wrap your app's layout with the Responsive widget to adjust the UI based on screen size:
import 'package:responsive_mate/responsive_mate.dart';
class MyResponsiveApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Responsive(
mobile: MobileWidget(),
tablet: TabletWidget(),
desktop: DesktopWidget(),
);
}
}
Custom Breakpoints #
You can customize the breakpoints for mobile and tablet screen sizes:
Responsive(
mobile: MobileWidget(),
tablet: TabletWidget(),
desktop: DesktopWidget(),
mobileBreakpoint: 800, // Custom breakpoint for mobile
tabletBreakpoint: 1200, // Custom breakpoint for tablet
)
Helper Methods #
You can also check the current device type using helper methods:
if (Responsive.isMobile(context)) {
// Do something for mobile
} else if (Responsive.isTablet(context)) {
// Do something for tablet
} else if (Responsive.isDesktop(context)) {
// Do something for desktop
}
Example #
Here is a complete example of how to use the Responsive package:
import 'package:flutter/material.dart';
import 'package:responsive_mate/responsive_mate.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Responsive Layout Example'),
),
body: Responsive(
mobile: Center(child: Text('This is Mobile View')),
tablet: Center(child: Text('This is Tablet View')),
desktop: Center(child: Text('This is Desktop View')),
),
),
);
}
}
License #
This package is licensed under the MIT License. See the LICENSE file for more details.