Hi everyone in this article I want to show you a package from Pawan Kumar, Google Dev Expert for Flutter & Dart, that you can use to supercharge your Flutter Apps and develop UI more easily and effectively.
Introducing VelocityX
VelocityX is a 100% free Flutter open-source minimalist UI Framework built with Flutter SDK to make Flutter development easier and more joyful than ever.
As stated in the official GitHub repo, VelocityX is a UI framework built on top of Flutter to let you develop your Flutter Apps faster and with less code. With VelocityX you've got a series of widgets and utilities to rapidly building custom designs. Creating VelocityX, Pawan was inspired by the CSS framework Tailwindcss and SwiftUI, so you can compose your UI by concatenating methods and properties with custom widgets that VelocityX gives you.
To use VelocityX in your Flutter project you only have to add the following dependency into your pubspec.yaml file
velocity_x: ^1.0.1
Install the above dependency by running
flutter pub get
And import the package with
import "package:velocity_x/velocity_x.dart";
That's it!
All the customizations that VelocityX gives you can be obtained by concatenating methods and utilities that define characteristics that you want to give to a widget. These utilities allow you to customize different aspects such as: padding, colors, font weight, text alignments. You can create custom layout like: card, list and scroll. Let's see some examples.
"Hello World".text.blue800.lg.bold.italic.end.wider.capitalize.make()
The code above prints "Hello World" in blue, large, bold, italic, aligned on the right, with some extra letter spacing and capitalized. All in one line of code!
VxCard("Hello World".text.make())
.grey400
.elevation(20)
.shadowColor(Colors.red)
.makeCentred()
This one creates a grey card with an elevation of 20, a red shadow, with a centered "Hello World" text inside.
As seen in the examples and in the explanations, the code and description are practically the same, and this is the beauty of VelocityX
Create customizations by describing them in code
SuperVx
SuperVx consists of more advanced custom layouts that you can use in your app:
- VxSwiper: gives you a simple way to add carousel view with features like autoplay, infinite scroll, custom child widgets, scroll direction, and more;
- VxToast: gives you a simple way to show a toast in your app. Toast is very customizable and you can use also this widget to show a Loading dialog with custom timing;
- VxStepper: gives you control for incrementing or decrementing a value, you can customize values, events callback, and colors;
- VxDiscList and VxDecimalList: gives you the ability to create lists of items with disc or numbers, the same thing that can also be done in HTML with the
<ul> and <ol> tags.
Extensions
On VelocityX you can extend or simplify some functionalities already present in Flutter and Dart and write code more effectively by using methods or properties that are called Extensions. By now you can use Extension on:
- context: you can get information on device size and type, screen height and width, orientation, colors, brightness, locale, and more;
- date and time: you can display dates in timeAgo format;
- iterable: you can use functionalities similar to contains, all, any, sum used in JavaScript on arrays;
- numbers: you can format numbers, change types, get ranges and duration between days in various formats;
- strings: you can operate on strings, remove chars and white spaces, change caps, reverse, and much more.
Resources
You cloud find more resources on VelocityX here:
Bye, Alberto
