smart_responsive

A Flutter package for creating responsive UIs with ease. Provides widgets and extensions to build adaptive layouts for mobile, tablet, and desktop.

Features

• SmartResponsive: A widget that renders a different child for mobile, tablet, and desktop layouts.
• BuildContext extensions: isMobile, isTablet, isDesktop, and deviceType for easy device detection.
• SmartScreen: A helper class to access screen properties like width, height, and orientation.

Getting started

Add the package to your pubspec.yaml file:

dependencies:
  smart_responsive: ^1.0.0 # Replace with the latest version

Then, import the package in your Dart code:

import 'package:smart_responsive/smart_responsive.dart';

Usage

SmartResponsive Widget

The SmartResponsive widget requires three children: mobile, tablet, and desktop. It automatically switches between them based on the screen width.

SmartResponsive(
  mobile: Container(color: Colors.red, child: Center(child: Text('Mobile'))),
  tablet: Container(color: Colors.green, child: Center(child: Text('Tablet'))),
  desktop: Container(color: Colors.blue, child: Center(child: Text('Desktop'))),
)

BuildContext Extensions

You can use the BuildContext extensions to check the current device type:

if (context.isMobile) {
  // Show mobile-specific UI
}

if (context.isTablet) {
  // Show tablet-specific UI
}

if (context.isDesktop) {
  // Show desktop-specific UI
}

// Or get the device type enum
final deviceType = context.deviceType;

SmartScreen Helper

The SmartScreen helper gives you easy access to screen properties:

final screen = SmartScreen(context);

print('Width: ${screen.width}');
print('Height: ${screen.height}');
print('Orientation: ${screen.orientation}');

Additional information

For more information, feel free to check out the code. Contributions are welcome!