Responsiveplus

Description:

responsiveplus

ResponsivePlus is a powerful and versatile package designed to simplify and enhance responsive design in Flutter applications. It offers a comprehensive set of tools, methods, and custom widgets that enable developers to create highly adaptable and customizable user interfaces. Whether you are building for mobile, tablet, or desktop, ResponsivePlus ensures your app looks great on any screen size or orientation.

ResponsivePlus attempts to make life a little easier and your projects dependency list smaller. The ResponsivePlus package aims to provide you with a package that can handle all aspects of making your apps responsive from custom responsive widgets to auto resizing widgets and text!
📌 Features #
This package provides many widgets and methods to add repsonsivness to your Flutter app.
List of features:
🫧 Widgets:

RowColumn widget: Adds ability to display a Row or Column widget based off current screen size.
WrapColumn widget: Adds ability to display a Wrap or Column widget based off current screen size.

🗚 Rext Widget

Rext widget: A Text widget that will automatically adjust its size based on screen size.

Types of Rext Widgets

Rext -
This is the basic Rext widget and will return a basic Text widget as its child. This will require a String as its data.

Rext.rich -
This is will return a RichText widget and will require a TextSpan as its data. Note: This does not support a WidgetSpan, the TextSpans children must only contain other TextSpans. Consider using a Wrap widget if you'd like to include Widgets in the text.

Rext.selectable -
This will return a SelectableText widget and will require a String as its data. This Text can be selected by the user and copied/pasted or you can add custom methods.

Rext.selectableRich -
This will return a SelectableText.rich widget and will require a TextSpan as its data. Note: This does not support a WidgetSpan, the TextSpans children must only contain other TextSpans. Consider using a Wrap widget if you'd like to include Widgets in the text.

💡 Methods (ResponsiveUtil class):
The ResponsivePlus package comes with many easily callable methods, which can help you develop UI and logic components based on the users device, screen size, orientation, etc.

ResponsiveUtil.init() - Used to initialize the current screen type, device type, breakpoints, and more. Basically ensures all ResponsivePlus variables will be initialized. Should be called in main method.

ResponsiveUtil.isMobile() - Returns weather the current screen size is mobile (bool).

Example

Text('This is some font at size: ', style: TextStyle(fontSize: ResponsiveUtil.isMobile() ? 12 : 16))
copied to clipboard

ResponsiveUtil.isTablet() - Returns weather the current screen size is tablet (bool).

Example

Text('This is some font at size: ', style: TextStyle(fontSize: ResponsiveUtil.isTablet() ? 14 : 16))
copied to clipboard

ResponsiveUtil.isDesktop() - Retruns weather the current screen size is desktop (bool).

Example

Text('This is some font at size: ', style: TextStyle(fontSize: ResponsiveUtil.isDesktop() ? 18 : 14))
copied to clipboard

ResponsiveUtil.isIos() - Returns weather the current device is an IOS device (bool).

Example

Text(ResponsiveUtil.isIos() ? 'This is an IOS device!' : 'This is NOT an IOS device!')
copied to clipboard

ResponsiveUtil.isAndroid() - Returns weather the current device is an IOS device (bool).

Example

Text(ResponsiveUtil.isAndroid() ? 'This is an Android device!' : 'This is NOT an Android device!')
copied to clipboard

ResponsiveUtil.isMacOs() - Returns weather the current device is a macOS device (bool).

Example

Text(ResponsiveUtil.isAndroid() ? 'This is a MacOS device!' : 'This is NOT a MacOS device!')
copied to clipboard

ResponsiveUtil.isWindows() - Returns weather the current device is a Windows device (bool).

Example

Text(ResponsiveUtil.isWindows() ? 'This is a Windows device!' : 'This is NOT a Windows device!')
copied to clipboard

ResponsiveUtil.isLinux() - Returns weather the current device is a Linux device (bool).

Example

Text(ResponsiveUtil.isLinux() ? 'This is a Linux device!' : 'This is NOT a Linux device!')
copied to clipboard

ResponsiveUtil.isFuchsia() - Returns weather the current device is a Fuchsia device (bool).

Example

Text(ResponsiveUtil.isFuchsia() ? 'This is a Fuchsia device!' : 'This is NOT a Fuchsia device!')
copied to clipboard

ResponsiveUtil.isWeb() - Returns weather the current device is a Web platform (bool).

Example

Text(ResponsiveUtil.isWeb() ? 'This is a Web platform!' : 'This is NOT a Web platform!')
copied to clipboard

ResponsiveUtil.getDeviceType() - Returns the current device type (DeviceType - ios, android, macos, windows, linux, fuchsia, web)

Example

void deviceGetter() {
DeviceType currentDevice = ResponsiveUtil.getDeviceType();

switch (currentDevice) {
case DeviceType.android:
print('im android');

///Other device types cases...
///
default:
print('im another device');
}
}
copied to clipboard

ResponsiveUtil.getScreenType() - Returns the current screen type (ScreenType - mobile, tablet, desktop)

Example

void screenGetter() {
ScreenType currentScreen = ResponsiveUtil.getScreenType();

switch (currentScreen) {
case ScreenType.mobile:
print('im mobile');

///Other screen types cases...
///
default:
print('im another screen type');
}
}
copied to clipboard

ResponsiveUtil.getOrientation() - Returns the current screen type (Orientation)

Example

void orientationGetter() {
Orientation currentOrientation = ResponsiveUtil.getOrientation();

switch (currentOrientation) {
case Orientation.landscape:
print('im landscape');

///Other screen types cases...
///
default:
print('im another orientation');
}
}
copied to clipboard

ResponsiveUtil.getBoxConstraints() - Returns the current BoxConstraints of the whole screen (BoxConstraints)

Example

void boxConstraintsGetter() {
BoxConstraints currentConstraints = ResponsiveUtil.getBoxConstraints();

if(currentConstraints.maxWidth > 750) {
print('constraint width smaller than 750px!');
}
}
copied to clipboard

ResponsiveUtil.getWidth() - Returns the current screen width (double)

Example

void widthGetter() {
double currentWidth = ResponsiveUtil.getWidth();

print('screen width is $currentWidth');

}
copied to clipboard

ResponsiveUtil.getHeight() - Returns the current screen height (double)

Example

void heightGetter() {
double currentHeight = ResponsiveUtil.getHeight();

print('screen height is $currentHeight');

}
copied to clipboard

ResponsiveUtil.getDisplayWidth() - Returns the current display width (double)

Example

void displayWidthGetter() {
double displayWidth = ResponsiveUtil.getDisplayWidth();

print('display width is $displayWidth');

}
copied to clipboard

ResponsiveUtil.getDisplayHeight() - Returns the current display height (double)

Example

void displayHeightGetter() {
double displayHeight = ResponsiveUtil.getDisplayHeight();

print('display height is $displayHeight');

}
copied to clipboard

ResponsiveUtil.getDouble() - Will return a double based on current ScreenType (double)

Example

Text('This is some font at size: ', style: TextStyle(fontSize: ResponsiveUtil.getDouble(mobile: 14, tablet: 16, desktop: 18)))
copied to clipboard

ResponsiveUtil.getInt() - Will return an int based on current ScreenType (int)

Example

void example() {
int startingInt = ResponsiveUtil.getInt(mobile: 5, tablet: 10, desktop: 30);

print(startingInt);
}
copied to clipboard

🔗 Extensions:
The ResponsivePlus package comes with built in extensions to help easily set the size of UI components based off screen or constraint sizes.

w - Converts a number to a responsive width value (example: 10.w - 10% of screen width)

Example

Container(width: 50.w, color: Colors.blue, child: Text('50% of screen width!'))
copied to clipboard

h - Converts a number to a responsive height value (example: 10.h - 10% of screen height)

Example

Container(width: 25.h, color: Colors.blue, child: Text('25% of screen height!'))
copied to clipboard

sp - Converts a number to a scaleable pixel value (example: 3.sp)

Example

Text('This is some font at size: ', style: TextStyle(fontSize: 5.sp))
copied to clipboard

cw(constraints) - Converts the number to a responsive width value based on the constraint width of the parent widget

Example

Container(
width: 100,
height: 100,
color: Colors.red,
child: LayoutBuilder(
builder: (context, constraints) {
Center(
child: Container(
width: 50.cw(constraints), //50% of 100 - 50px
height: 20,
color: Colors.blue),
);
},
),
);
copied to clipboard

ch(constraints) - Converts the number to a responsive heigth value based on the constraint height of the parent widget

Example

Container(
width: 100,
height: 100,
color: Colors.red,
child: LayoutBuilder(
builder: (context, constraints) {
Center(
child: Container(
width: 50,
height: 20.ch(constraints), //20% of 100 - 20px
color: Colors.blue),
);
},
),
);
copied to clipboard

dw - Converts a number to a responsive width value based on the users physical screen width (example: 10.dw - 10% of display width)

Example

Lets pretend the user is using a 1920x1080 monitor display.
Container(width: 10.w, color: Colors.blue, child: Text('10% of screen display width! (198)'))
copied to clipboard

dh - Converts a number to a responsive width value based on the users physical screen height (example: 10.dh - 10% of display height)

Example

Lets pretend the user is using a 1920x1080 monitor display.
Container(width: 20.h, color: Colors.blue, child: Text('10% of screen display height! (216)'))
copied to clipboard

📦 Additonal Features

Set app constraints, if a user resizes the app to an unsupported size optionally show them a dialog and optionally perform a custom function.
Create a custom Rext overflow widget when a Rext widget can no longer fit the text to your desired parameters.
Create a RextGroup and add the group name to multiple Rext widgets in the "group" parameter to ensure they will always be the same size.
Configure if a user can change the orientation on a device.
Configure supported orientations.

📋 Getting started #
To use this package, add ResponsivePlus as a dependency in your pubspec.yaml file.
dependencies:
responsiveplus: ^1.0.0
copied to clipboard
Import the package
import 'package:responsive/responsive.dart';
copied to clipboard
🧪 Example #
import 'package:flutter/material.dart';
import 'package:responsiveplus/responsive.dart';

void main() {
/// Ensure that the WidgetsBinding is initialized
WidgetsFlutterBinding.ensureInitialized();

/// Initialize the ResponsiveUtil
/// This is required to make the package work
///
/// All parameters are optional
ResponsiveUtil.init(
enableOrientationChange: false,
appConstraints: const BoxConstraints(maxWidth: 1600, minWidth: 550, minHeight: 500),
);

/// Run the app
runApp(const ExampleApp());
}

/// Example App
/// This is an example app that shows how to use the Responsive package
class ExampleApp extends StatelessWidget {
const ExampleApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
home: ResponsiveBuilder(
builder: (context, constraints, orientation, screenType) {
return Scaffold(
body: Center(
child: Container(
width: 75.w, // 75% of the screen width
height: 50.h, // 50% of the screen height
color: Colors.green,
child: Center(
///A Rext widget for auto sizing text
child: Rext(
'I am auto sizing myself to stay on 2 lines! The container is always 75% of the screen width and 50% of its height!',
maxLines: 2, fontSize: 2.cw(constraints), //2% of nearest provided constraints width
textAlign: TextAlign.center,
),
),
),
),
);
},
),
);
}
}
copied to clipboard
ℹ️ Additional information #
🪄 Feature request?
Have an idea to make this package even better? Tell us on the ResponsivePlus discussion page (GitHub)
🪲 Found a bug?
Please report all bugs or issues on the ResponsivePlus issues page (GitHub)
We encourage you to report anything package related to the GitHub repository pages as any and all input will help make this package even better in future versions!
🚀 Support #
Enjoying this package? Consider supporting my work. Your contributions will allow me to keep creating and sharing valuable content and innovative projects.

🌟 Inspiration #
This package is heavily inspired by many other responsive packages out there. Special mention to auto_size_text and sizer as their projects are heavily responsible for the inspiration to create this package.

Files In This Product: