adaptive_screen_utils

Description:

adaptive screen utils

adaptive_screen_utils #










A Flutter package to provide Adaptive Screen Utils for creating responsive UI for different screen sizes. Make your UI look great on any device. Easy to manage different screen sizes.





This package is created for educational purposes in Flutter Jaipur Meetup: Make your own package publish on pub.dev.
You can use it in production as well. It is a simple package that provides a few methods to check the screen size and create a responsive UI based on the screen width, height, and orientation.
Flutter Jaipur Social Handles #




Usage #
To use this package, add adaptive_screen_utils as a dependency in your pubspec.yaml file.
dependencies:
adaptive_screen_utils: ^2.2.0
copied to clipboard
Example #
Import the file to your project
import 'package:adaptive_screen_utils/adaptive_screen_utils.dart';
copied to clipboard
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final desktop = expanded(context);
final tablet = medium(context);
return Scaffold(
appBar: AppBar(
title: Text('Adaptive Screen Utils'),
),
body: Builder(
builder: (context) {
if (desktop) {
return Center(
child: Text(
'Desktop',
style: Theme.of(context).textTheme.headline4,
),
);
} else if (tablet) {
return Center(
child: Text(
'Tablet',
style: Theme.of(context).textTheme.headline4,
),
);
}
return Center(
child: Text(
'Mobile',
style: Theme.of(context).textTheme.headline4,
),
);
},
),
);
}
}
copied to clipboard
Methods #



Method
Orientation
Height
Width
DeviceType
Result




wearable
Portrait
450.0
450.0
Watch
true


wearable
Landscape
450.0
450.0
Watch
true


compact
Portrait
480.0
600.0
Mobile
true


compact
Landscape
600.0
480.0
Mobile
true


medium
Portrait
900.0
840.0
Tablet
true


medium
Landscape
840.0
900.0
Tablet
true


expanded
Portrait
960.0
840.0
Desktop
true


expanded
Landscape
840.0
960.0
Desktop
true


Type
-----------
------
-----
----------
DeviceType



Disclaimer #
The current approach to determining device types (wearable, compact, medium, and expanded) based on width, height, and orientation is a simple approach. It may not be accurate for all devices.
https://developer.android.com/develop/ui/views/layout/window-size-classes is a good reference for understanding the concept of screen size classes. this package is inspired by the above link & check wearables, compact, medium, and expanded based on width, height, and orientation.
Issues & Feedback #
If you wish to contribute to this repo, welcome to Pull Requests.
Star ⭐ the repo if you find it useful 🤩🤩. we are open to enhancements, bug-fixes & suggestions. feel free to open an issue.
License #
MIT License
copied to clipboard
Maintainers & Collaborators #
Ravi Kovind #
Flutter Jaipur #

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter