Library to create Responsive UI more easily

The current state is under active development but is considered stable.

I recommend to take a look at the example project

Features

• Implementation of (Jetpack Compose) WindowSizeClass

• Implementation of (Apple) UserInterfaceSizeClass

• Implementation of (Material) WindowSizeClass

• BreakpointBuilder for efficiently rebuilding widgets based on a list of Breakpoints

Getting started

dart pub add responsive_ux

Usage

(see /example folder for a working example and different use cases)

MaterialApp(
    // WindowSizeConfiguration must only be injected for custom boundaries, otherwise defaults are used (check documentation)
    home: WindowSizeConfiguration(
      data: WindowSizeConfigurationData(
      sizes: [WindowSizes.compact]
    ),
    child: BuilderScreen(),
  ),
);

WindowSizedBox(
  builder: (context, width, height, child) {
    String w = "";
    String h = "";

    switch (width) {
      case WindowSizes.compact:
        w = "Compact";
      case WindowSizes.medium:
        w = "Medium";
      case WindowSizes.expanded:
        w = "Expanded";
    }

    switch (height) {
      case WindowSizes.compact:
        h = "Compact";
      case WindowSizes.medium:
        h = "Medium";
      case WindowSizes.expanded:
        h = "Expanded";
    }
    
    print(width.width);   // The WindowSize width boundary that is matched
    print(height.height); // The WindowSize height boundary that is matched

    return Text("W: $w\nH: $h");
  },
);

Additional information

This package has been developed as Flutter does not has an implementation right now

As the name suggests, we are open for ideas and do not limit this package on what there currently is. Every improvement can be requested and contributed on GitHub.