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

Example

Import the file to your project

import 'package:adaptive_screen_utils/adaptive_screen_utils.dart';

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,
              ),
          );
        },
      ),
    );
  }
}

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

Maintainers & Collaborators

Ravi Kovind

Flutter Jaipur