Responsive Layout

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)

Using BuildContext

isLandscape to check if the orientation is landscape or portrait

Eg Output - false

Breakpoints based on the guidelines in Material Guidelines

mdColumns to get responsive columns

Eg Output - 4

mdGutter to get responsive gutters

Eg Output - 16.0

mdDeviceType to get check device type (Handset, tablet)

Eg Output - MobileDeviceType.handset

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)

Eg Output - MobileDeviceSize.small

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)

Eg Output - MobileWindowSize.xsmall

Symbolic window sizes of mobile devices.

isMobile to get check if the device is a mobile

Eg Output - true

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)

screenWidth screenHeight to access screen width & height using MQ

Eg Output - 410.26
Eg Output - 520.10

percentWidth percentHeight to access screen width & height as a percentage using MQ

context.percentWidth * 20
Eg Output - Returns 20 percent of width.
context.percentHeight * 80
Eg Output - Returns 80 percent of height.

safePercentWidth safePercentHeight to access screen width & height as a percentage considering safe area using MQ

context.safePercentWidth * 20
Eg Output - Returns 20 percent of width considering safe area.
context.safePercentHeight * 80
Eg Output - Returns 80 percent of height considering safe area.

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

VxDevice(mobile: Text("Hi Mobile"), web: Text("Hi Web"))



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

xsmall: Text("Hi Extra Small"),
small: Text("Hi Small"),
medium: Text("Hi Medium"),
large: Text("Hi Large"),
xlarge: Text("Hi Extra Large"),
fallback: Text("Hi Nothing Specified"),

Video Tutorial