Installation of Flutter VelocityX Library – and How to use it in Text Widget.

Hi Guys, Welcome to Proto Coders Point, In this Flutter Tutorial we gonna introduce you with a latest product called “VELOCITY X” Library developed using Flutter SDK by Pawan Kumar.

What is Flutter Velocity X?

The Velocity X  library in flutter development is a minimalist flutter framework that helps you in building custom Application design Rapidly.

Velocity X comes with various properties that we can apply to our flutter widget such as Color, Padding, Text , Box, Card, SizedBox and many more.

Installation of Velocity X in Flutter Project

Step 1: Adding Dependencies

Add the following dependencies in your pubspec.yaml file.

dependencies:
  velocity_x: ^0.2.0  // add this line

Step 2: Importing the VelocityX package

Once you have added the velocityx dependencies, Now you can use them in your dart code (main.dart), just by importing the package / component that are required for application development.

Eg: In my case i have imported it in main.dart file

import 'package:velocity_x/velocity_x.dart' ;

Then, it’s all set your flutter project is ready to make use of velocityx librarys.

Tutorial on Applying VelocityX to Text / How to use Velocity X in Text Widget.

This Library gives super power to Text

Note : When are are done with applying velocityx properties to widget or string end it with .make() to make it back to flutter widget.

Converting String Variable to Text Widget

'Demo On Flutter Velocity X'
                      .text
                      .size(30)
                      .bold
                      .make(),

output

the above code will change the normal String text into text widget, when you define it with .text and at the end convert it to Text widget using .make().

FontStyle

Applying font Style italic

Text('You have pushed the button this many times:',)
.text
.red600   //text color to red
.italic   //stlying italic
.make(),   // make it as widget

Font Scale / Font Size in flutter using velocityx

"Font Scale Size".text
                 .sm   //font size pre-defined
                 .make(),

fontSize predefined properties

• xs – Extra Small (scaleFactor 0.75)
• sm – Small (scaleFactor 0.875)
• base – Normal (scaleFactor 1)
• lg – Large (scaleFactor 1.125)
• xl – Extra Large (scaleFactor 1.25)
• xl2 – 2 Extra Large (scaleFactor 1.5)
• xl3 – 3 Extra Large (scaleFactor 1.875)
• xl4 – 4 Extra Large (scaleFactor 2.25)
• xl5 – 5 Extra Large (scaleFactor 3)
• xl6 – 6 Extra Large (scaleFactor 4)

Font Weight 

Giving thickness to text font.

"Font Weight".text
             .extraBold
              .make(), // applying font weight with pre deined size

Output

Text Font Weight properties

• hairLine – Font Weight 100
• thin – Font Weight 200
• light – Font Weight 300
• normal – Font Weight 400
• medium – Font Weight 500
• semiBold – Font Weight 600
• bold – Font Weight 700
• extraBold – Font Weight 800
• extraBlack – Font Weight 900

Letter Spacing

You can give spacing between each letter on text by using velocityx properties.

"Letter Spacing ".text.widest.make(),

Spacing between text this are pre-defined parameters

• tightest – Letter Spacing -3.0
• tighter – Letter Spacing -2.0
• tight – Letter Spacing -1.0
• wide – Letter Spacing 1.0
• wider – Letter Spacing 2.0
• widest – Letter Spacing 3.0

Decoration to Text

Text can be decorated with underline, overline, lineThrough

"Text Decoration".text.underline.heightRelaxed.make().

Decoration velocityX properties

• underline – TextDecoration.underline
• lineThrough – TextDecoration.lineThrough
• overline – TextDecoration.overline

Text Utilities

Applying text utilities with UPPERCASE, lowercase, Capitalize and hidePartial

"Text Utilities".text.uppercase.make(), //change the font text to upper case

• uppercase – WELCOME TO PROTO CODERS POINT
• lowercase – welcome to velocityx
• capitalize – Welcome To Velocityx

Hiding Text

you can even hide some text from a long string, Hidden text will be shown in *****

"Text Utilities hidden".text.hidePartial.make(), //this will hide some text from start

• hidePartial – ***** To Velocityx

All properties Together

Text("Velocity_X text property all together")
                      .text
                      .orange400 // text color orange
                      .xl        // text font extra large
                      .bold      // make text bold
                      .center    //align to center
                      .heightLoose
                      .underline // under line to text
                      .wide    // space between text
                      .uppercase  //make text to UPPERCASE
                      .make(),   //convert it back to a widget

Output