VelocityX is a completely free, open-source framework developed for minimising UI development efforts and time. It makes flutter UI development a lot easier and joyful for the developers. The official documentation mentions that this framework is built on top of Flutter SDK.

VelocityX provides multiple widgets, shortcuts and utilities to rapidly build custom UI designs. It is also great for developers with prior SwiftUI experience as it is inspired by SwiftUI and Tailwindcss. Developers can build UI by concatenating one feature/method over the other.

Getting Started…

To add/use VelocityX in a project, developers need to add the following dependency in their pubspec.yaml file:

dependencies:

  velocity_x: ^1.4.1

** The version number may change as new updates come for this package. 

Now to install the package, use the following command:

$ flutter pub get

** Some code editors provide a direct way to get dependencies, no need to run this command.

Finally to use it in any dart file, import the package using the following statement:

import 'package:velocity_x/velocity_x.dart';

Writing some Code…

After doing the initial setup, let’s dive right into the most interesting part. We can start with the colours utility. 

1. To use any colour, developers can use the following code:

Vx.{colorname}{number}

eg: Vx.blue900

(a) To use text colour, use the following code:

.{colorname}{number}

 eg: text.blue900

2. For adding padding to your widgets/UI elements, we can use custom methods provided by VelocityX team. Few examples are the following :

• For padding all sides —> .p0() : this is similar to EdgeInsets.all(0) in flutter, (or) .p8() : this is similar to EdgeInsets.all(8) in flutter.
• Other paddings available are : .p1(), .p2(), .p4(), .p12(), etc.
• For padding on left, right side (i.e. horizontal padding) —> .px0() : this is similar to EdgeInsets.symmetric(horizontal:0) in flutter, (or) .px8() : this is similar to EdgeInsets.symmetric(horizontal:8)
• For padding from top and bottom direction (i.e. vertical padding) —> .py0() : this is similar to EdgeInsets.symmetric(vertical:0) in flutter, (or) .py8() : this is similar to EdgeInsets.symmetric(vertical:8)
• Coding example of padding: Example: Text().p(10). It will give 10px paddings to the text-widget from all directions.

3. Utilities to add widgets in a particular direction in your application:

a) VStack 

This widget is used to display/arrange it’s children in a vertical array. VStack widget does not support scrolling by default, but it can be added.

Example:

VStack(

    [

        Text("VelocityX is Super"),

        Text("Sample Text"),

        Text("Yet, Another Sample Text"),

    ],

).scrollVertical().p20();

b) Hstack

This widget is used to display/arrange it’s children in a horizontal array. HStack widget does not support scrolling by default, but it can be added.

Example:

HStack(

    [

        Text("VelocityX is Super").px12(),

        Text("Sample Text").px12(),

        Text("Yet, Another Sample Text").px12(),

    ],

).scrollHorizontal().p20();

**VelocityX also provides other similar utilities like ZStack, VxBlock, and VxInlineBlock.

4. VelocityX also provides a direct method to create a container and to insert your widget inside this container. Developers can use the Box utility provided by velocityX for this purpose.

Example:

a) Using VxBox -widget 

 Widget build(BuildContext context) {

    return VxBox(child: Text("VelocityX")).red500.make().centered();

  }

b) Using the extension method

 Widget build(BuildContext context) {

    return "VelocityX".text.make().box.red500.make().centered();;

  }

The above-mentioned examples are only some of the utilities provided by the VelocityX framework, There are many more utilities provided. I would highly recommend developers use these features in their code. This would reduce their time and efforts in writing the code.

Thanks for reading this blog. Happy Coding!