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

  • WindowSizedBox for efficiently rebuilding widgets based on view sizes (meant for top level widgets)

  • WindowSizeNotifier for listening to WindowSizes without a WindowSizedBox

  • BreakpointBuilder for efficiently rebuilding widgets based on a list of Breakpoints (meant for local widgets)

  • SliverBreakpointBuilder is like the BreakpointBuilder but for Slivers

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.

Libraries

responsive_ux