viewport library

viewport library is designed to provide a way to use rendering size percentage-based layouts with trivial viewport attributes policy change.

The most common use case is when an existing Flutter project for that works well for mobile devices should be mirrored as is as a web and / or desktop application. Consider:

//...
child: EmailInputField(width: MediaQuery.of(context).size.width * 0.9),
//...

It can match the design spec for the mobile wireframes, but for the web or desktop applications this size will be way too big, so an easy solution to this would be restriction of the web and desktop rendering area. The problem is that it won't change the MediaQuery.of(context).size values, so, most probably, there will be a lot of "rendering area overflow" errors all over the running application. And that's where viewport library comes into play - it supports a variety of top-level configurations for the rendering area policy, so that it is trivial to say something like "set the upper bound for the MediaQuery.of(context).size to such a values: ...":

class ParentWidget extends StatelessWidget {
  // ...

  @override
  Widget build(BuildContext context) {
    return ViewPortWidget.upperBoundedMediaQuery(
      maxWidth: 1024.0,
      child: const ViewPortUserWidget(),
    );
  }
}

class ViewPortUserWidget extends StatelessWidget {
  // ...

  @override
  Widget build(BuildContext context) {
    return Container(
       width: ViewPort.of(context).width * 0.6,
       child: ...,
    );
  }
}

And the error gets begone as the "rendering area" as viewed by the client widgets itself is restricted.

See also:

  • ViewPort - describes a rendering area size.
  • ViewPorts - provides a variety of common ViewPort policies.
  • ViewPortWidget - InheritedWidget designed to produce a ViewPort dynamically based on the provided ViewPort factory implementation and the incoming BuildContext instance.

Classes

CoercedViewPortFactory
Returns a value of the underlying ViewPort instance coerced by the given values.
FixedViewPort
Provides a statically defined height and width.
FixedViewPortFactory
Constitutes a fixed viewport.
LowerBoundedViewPortFactory
Returns a value of the underlying ViewPort instance lower bounded by the given values.
MaximalOfViewPort
Takes two ViewPort instances and chooses the maximal ViewPort.width and ViewPort.height values.
MaximalOfViewPortFactory
Returns a maximal value out of the two ViewPort instances given
MediaQuerySizeViewPort
Adapter of a MediaQueryData instance to the ViewPort interface.
MediaQueryViewPortFactory
ViewPort adapter for MediaQueryData
MinimalOfViewPort
Takes two ViewPort instances and chooses the minimal ViewPort.width and ViewPort.height values.
MinimalOfViewPortFactory
Returns a minimal value out of the two ViewPort instances given
UpperBoundedViewPortFactory
Returns a value of the underlying ViewPort instance upper bounded by the given values.
ViewPort
Describes a rendering area size.
ViewPorts
Collection of the most regular ViewPort compositions.
ViewPortWidget
InheritedWidget holding a ViewPort configuration.
WidgetViewPortFactory
Dynamically configures ViewPort.

Exceptions / Errors

UnevaluateableAspectRatioError
Thrown if the aspect ratio can't be evaluated (is NaN).