responsive_ux 0.0.1

responsive_ux: ^0.0.1 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 WindowSizeClass and
• (coming) Implementation of UserInterfaceSizeClass You can also easily create your own Layout bounds.

Getting started #

dart pub add responsive_ui

Usage #

(see /example folder for a simple example)

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 do not just limit this package on what there currently is. Every improvement can be requested and contributed on GitHub.