responsive_ux 0.2.0

responsive_ux: ^0.2.0 copied to clipboard

Library to create Responsive UI more easily

The current state is under active development and might change heavily until the first stable release. Feel free to reach out on GitHub

Features #

• Implementation of (Jetpack Compose) WindowSizeClass
• Implementation of (Apple) UserInterfaceSizeClass
• Implementation of (Material) WindowSizeClass

You can also easily create your own Layout bounds.

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

WindowSizeBuilder(
  builder: (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.