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).