VelocityX gives you everything to help you in creating responsive layouts.
You can either use BuildContext to access widths & heights or exclusive velocityx widgets.
VelocityX offers two main widgets for responsiveness - VxDevice (Mobile/Web) and VxResponsive (All Devices)
isLandscape to check if the orientation is landscape or portrait
mdColumns to get responsive columns
mdGutter to get responsive gutters
mdDeviceType to get check device type (Handset, tablet)
Note that this is based exclusively on the dimensions of the device and not on the presence of a phone.
mdDeviceSize to get check device size (small, medium, large)
Symbolic sizes of mobile devices. Note that the ranges are different depending on the [MobileDeviceType] of the device. Note also that only handsets can be [medium].
mdWindowSize to get check window size (xsmall, small, medium, large, xlarge)
Symbolic window sizes of mobile devices.
isMobile to get check if the device is a mobile
Mostly used as a boolean to check if the device is a mobile (Android & iOS)
BuildContext for MediaQuery extensions
::: Video Tutorial
mq to access mediaquery
It is equivalent to MediaQuery.of(context)
screenHeight to access screen width & height using MQ
percentHeight to access screen width & height as a percentage using MQ
safePercentHeight to access screen width & height as a percentage considering safe area using MQ
Using VelocityX Widgets
Use VxDevice when you just have to deal with Mobile & Web. Works great & easy to use but less control over sizing. In case, if you want more options based on window size, use [VxResponsive]
You can specify two widgets depends on the screen size [mobile] and [web]. They must not be null
VelocityResponsive widget can be used for making responsive apps based on different window sizes. It offers more control over sizing. You can specify multiple widgets depends on the screen size like [xsmall], [small], [medium],[large], & [xlarge].
In case, if you want less options (just care about mobile & web), use [VxDevice]
The [fallback] must not be null. It will replace the non specified property for eg: medium
[VxLayout] is a type of [LayoutBuilder] with some additional power. VxLayout widget can be used for making responsive apps based on different window sizes.