VelocityX — The One-Stop Shop for everything Flutter!

5 min readMar 20, 2022

VelocityX is a free, open-source framework designed to cut down on UI development time and effort developed by Google Developer Expert Pawan Kumar. It makes flutter UI creation much simpler and more enjoyable for developers. This framework is developed on top of the Flutter SDK, according to the official documentation.

VelocityX offers a variety of widgets, shortcuts, and utilities for quickly creating bespoke UI designs. Because it is influenced by SwiftUI and TailwindCSS, it is also ideal for developers with prior SwiftUI knowledge. Developers can create user interfaces by layering one feature or function on top of another.

Just like any other widgets provided by Flutter, the VelocityX widgets can be used in the same way in our widget tree.

Getting Started…

To use VelocityX in a Flutter project we just have to add the following dependencies in our pubspec.yaml :

velocity_x: ^3.4.0

Install the dependency by running :

flutter pub get

And import the package using :

import "package:velocity_x/velocity_x.dart";

Now that we’re done with the installation, let’s get on to the good stuff!

Widgets

Colors
In addition to the generous color palette provided by Flutter, VelocityX gives us a plethora of colors to use.

//to get a color
Vx.{colorname}{number}eg: Vx.blue900//to get a color from hex code
Vx.{colorname}Hex{number}eg: Vx.blueHex900

To use the colors with text widgets or box(container) widgets :

//to use a text color 
.{colorname}{number}
eg: 'Hello World'.blue900//to set a text color
.color({yourcolor})
eg: 'Some Random text'.color(Colors.blue)//to use a box color 
.{colorname}{number}
eg: container.blue900//to set a box color
.color({yourcolor})
eg: container.color(Colors.blue)

VStack
Equivalent to a column widget in Flutter, a VStack widget is used to display its children in a vertical array. VStack does not scroll automatically.
The scrollVertical() extension must be used to make the VStack scrollable.

VStack(
  [
     Text('Simple Text Widget'), 
     Icon(), 
     Center(),
     ....
  ]
).scrollVertical();

HStack
Equivalent to a Row widget in Flutter, a HStack widget is used to display its children in a horizontal array. HStack does not scroll automatically. The scrollHorizontal() extension must be used to make the HStack scrollable.

HStack(
  [
     Text('Simple Text Widget'), 
     Icon(), 
     Center(),
     ....
  ]
).scrollHorizontal();

ZStack
Equivalent to the Stack widget in Flutter, a ZStack widget is used to display its children on top of each other. We can align the children using the alignment property of ZStack. Default alignment is topStart.

ZStack(
  [
     Image(), 
     Text(), 
     Icon(), 
     ...
  ],
  alignment : Alignment.center,
)

Box

❗ IMPORTANT:
When you are done with the box properties, then use .make() to complete it as a widget.

VelocityX allows you to quickly create a Container widget using the .box() extension or VxBox() widget.

VxBox(
   child: Text('VelocityX')
).red500.make().centered()//The above code can also be written asText('VelocityX').box.red500.make().centered()

Some useful functions to use before the make() function for the box widget :

.width(double value) : To specify width of the box

.height(double value) : To specify height of the box

.padding(EdgeInsets value) : To specify padding for the box

.margin(EdgeInsets value) : To specify margin for the box

Text

❗ IMPORTANT:
When you are done with the text properties, then use .make() to complete it as a widget.

You can use any string and convert it to a text widget.

{string}.text.make()
eg : 'Hello World!!'.text.make()

VelocityX can also be used with the standard Text widget as well.

TextWidget.text
eg : Text('Hello World!!').text.red500.make()

VelocityX also provides a lot of properties for Text including font scale, font weight, font style, letter spacing, text decoration, line height, utilities,etc.

'velocityx'.text
           .red500            // Sets text color as red500
           .x12               // Sets size as xl2
           .bold              // Sets text to bold
           .center            // Sets text alignment to center
           .heightRelaxed     // Sets line height as heightRelaxed
           .underline         // Sets text decoration as underline
           .wide              // Sets text letter spacing as wide
           .uppercase         // Sets text string as uppercase
           .make()

🔰 NOTE:
Text, SelectableText, and RichText works the same, just replace text with selectableText or richText.

Shapes

VelocityX also provides widgets for rendering shapes in our app. Some examples of the same are :

VxCircle or .circle()
VxCapsule or .capsule()
VxEllipse or .ellipse()
VxContinuousRectangle or .continuousRectangle()
VxBevel or .bevel()
VxTriangle or .triangle()
VxTicket or .ticket()

Marquee

VelocityX also provides a marquee widget VxMarquee, or .marquee()which can be used to make a widget follow a marquee pattern.

'Marquee Text'.marquee()

Shimmer

Another awesome feature provided by VelocityX is the shimmer widget, VxShimmer or .shimmer() used to give the shimmer effect on a widget.
It is a great widget to put as a placeholder for something that is being loaded.

VxShimmer(
     child : Container(child : Text('Shimmering widget'))
)

Responsive Layout

VelocityX also helps in creating responsive layouts, It offers two main widgets for responsiveness — VxDevice(Mobile/Web) and VxResponsive(All Devices).

💡 TIP:
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.

VxDevice

You can specify two widgets depending on the screen size[mobile] and [web]. They must not be null.

VxDevice(mobile : Text('on mobile'), web : Text('on web'))

VxResponsive

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].
The [fallback] must not be null. It will replace the non specified property.

VxResponsive(
     xsmall: Text('from extra small'), 
     small: Text('from small'), 
     medium: Text('from med'), 
     large: Text('from large'), 
     xlarge: Text('from extra large'), 
     fallback: Text('from feedback'), 
)

State Management

VelocityX can also be used for state management just like provider or bloc.

VxState

VxState is a state management library for Flutter apps developed directly into VelocityX with a focus on simplicity. With the power of streams, it is inspired by StoreKeeper and libraries like Redux, Vuex, and others. The following is a brief explanation of how it works:

Single Store (Single source of truth) to keep app’s data
Structured modifications to store with Mutations
Widgets listen to mutations to rebuild themselves
Enhance this process with Interceptors and Effects

To speak in terms of widgets :

VxStore — Where your apps’s data is kept
VxMutation — Logic that modifies Store
VxBuilder, VxNotifier, VxConsumer — Useful widgets for special cases
VxEffect — Chained mutations
VxInterceptors — Intercept execution of mutations

Navigation

Last but not the least, VelocityX also provides navigation features based on Navigator 2.0. It provides many useful methods and its quite easy to send parameters across various screens.

VxNavigator

VxNavigator.of(context) as well as context.vxNav can be used for navigation purposes. The various methods which we can use are as follows :

push(Uri uri, {dynamic parameters})
replace(Uri uri, {dynamic parameters})
pop()
clearAndPush(Uri uri, {dynamic parameters})
pushAll(List<Uri> uris, {List<dynamic> parameters})
clearAndPushAll(List<Uri> uris, {List<dynamic> parameters})
waitAndPush(Uri uri, {dynamic parameters})
returnAndPush(Uri uri, {dynamic parameters})
popToRoot()
removeUri(Uri uri)
removeLastUri()

❗ IMPORTANT:
The navigation methods take in an uri object as a parameter. Uri objects contain the properties like path, host, queryParameters, etc which can be used to specify critical information about the routing.

Resources

To know more about VelocityX, give a visit to the following resources :