responsive_mate 1.0.2 copy "responsive_mate: ^1.0.2" to clipboard
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.

1
likes
140
points
19
downloads

Publisher

verified publisherresponsive.run.place

Weekly Downloads

ResponsiveMate simplifies building adaptive layouts in Flutter apps. Effortlessly switch between mobile, tablet, and desktop views with customizable breakpoints and dynamic widget rendering. With utilities like isMobile, isTablet, and isDesktop, create polished, device-friendly interfaces that work seamlessly across platforms. Perfect for apps requiring flexible and optimized responsiveness.

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on responsive_mate