A Flutter package provide responsive, dynamic, configurable size for each device screen size.


  • Responsive, adaptive size
  • Dynamic load size data from predefined files from assets

Without using this packages:

Getting Started

This package is use to develop app which use Bloc pattern clearer, quicker, easier by wrapping
complicated bloc usage.


Create size resource data file and add to pubspec

  • Create size resource data files (currently support only yaml format) in default folder : ”
    assets/dimens”. For example:

  contentPadding: 10
  iconSize: 50
  titleTextSize: 24
  descriptionTextSize: 16
  widgetSpaceSize: 16
  • Add assets folder path to pubspec.yaml file:

  # ... 
    - assets/dimens/

Config and use in application

  • Make sure WidgetsFlutterBinding.ensureInitialized(); main function before application start:

Future<void> main() async {
  runApp(const MyApp());

Using widget

  builder: (BuildContext context) {
    return const ResponsiveHomePage();
  sizeFileResolver: ({BoxConstraints? boxConstraints, Orientation? orientation}) => "phone.yaml",

Above code for sizeFileResolver function use very simple logic: return name of resource file. You
can also add more logic to specify how to choose which size data files to load in.

For example: load ‘phone.yaml’ or ‘table.yaml’ depend on width and orientation of device

  String _resolveSizeDataFile({BoxConstraints? boxConstraints, Orientation? orientation}) {
  if (boxConstraints != null) {
    if (Platform.isAndroid || Platform.isIOS) {
      if (orientation == Orientation.portrait) {
        if (boxConstraints.maxWidth < 600) {
          return "phone.yaml";
        } else {
          return "tablet.yaml";
      } else if (orientation == Orientation.landscape) {
        if (boxConstraints.maxHeight < 600) {
          return "phone.yaml";
        } else {
          return "tablet.yaml";
      } else {
        return "phone.yaml";
    } else {
      return "phone.yaml";
  return "phone.yaml";

Code generation for size data

By using command ‘esizer:generate’ you can generate dart code for more convenient

flutter pub run esizer:generate -I assets/dimens -o dimen_keys.g.dart -n DimenKeys 

Then we have class like:

abstract class DimenKeys {
  static const homeScreenIconSize = 'homeScreen.icon_size';
  static const homeScreenTitleTextSize = 'homeScreen.titleTextSize';
  static const homeScreenDescriptionTextSize = 'homeScreen.descriptionTextSize';
  static const homeScreenWidgetSpaceSize = 'homeScreen.widgetSpaceSize';
  static const homeScreenContentPadding = 'homeScreen.contentPadding';

After that, in any where in application we use it as bellow:

Container (
  color: Colors.white)

Issues and feedback

Create issues and add appropriate label on Github issues or into our mailing list
For more detail see CONTRIBUTING





View Github