Text

VelocityX provides text with super powers.

important

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

note

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

Below are some examples of differet text styles using the VelocityX text properties and widget.

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

{string}.text.make()
eg: 'Pawan'.text.make()
// It will produce a text with String as Pawan

You can use velocityx text with the Text widget itself.

TextWidget.text
eg: Text('pawan').text.red500.make()
// It will produce a text with String as pawan and color as red.
// It will also override any text property if you specify again.

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

{string}.text
eg: 'Pawan'.text.make()
//It will produce a text with String as Pawan

You can use velocityx text with the Text widget itself.

TextWidget.text
eg: Text('pawan').text.red500.make()
// It will produce a text with String as pawan and color as red.
// It will also override any text property if you specify again.

Font Scale

VelocityX offers many predefined fontSizes as text properties

Prop (Type)Desciption
xsExtra Small (scaleFactor 0.75)
smSmall (scaleFactor 0.875)
baseNormal (scaleFactor 1)
lgLarge (scaleFactor 1.125)
xlExtra Large (scaleFactor 1.25)
xl22 Extra Large (scaleFactor 1.5)
xl33 Extra Large (scaleFactor 1.875)
xl44 Extra Large (scaleFactor 2.25)
xl55 Extra Large (scaleFactor 3)
xl66 Extra Large (scaleFactor 4)

Example

'Velocityx'.text.xl2.make();
//Sets the fontSize as 2 Extra Large

Set a custom font size

'VelocityX'.text.size(20).make();
// where 20 is the font size

Font Weight

VelocityX offers many predefined font weights as text properties

Prop (Type)Desciption
hairLineFont Weight 100
thinFont Weight 200
lightFont Weight 300
normalFont Weight 400
mediumFont Weight 500
semiBoldFont Weight 600
boldFont Weight 700
extraBoldFont Weight 800
extraBlackFont Weight 900

Example

'Velocityx'.text.bold.make();
//Sets the fontweight as bold(w700)

Set a custom font weight

'Velocityx'.text.fontWeight(FontWeight.w600).make();
// Sets the font weight to w600

Font Style

VelocityX offers predefined italic style as a text property

'Velocityx'.text.italic.make();

Text Alignment

VelocityX offers many predefined text alignments as text properties

Prop (Type)Desciption
centerTextAlign.center
startTextAlign.start
endTextAlign.end
justifyTextAlign.justify

Example

'Velocityx'.text.center.make();
//Sets the alignment of the text as center

Letter Spacing

VelocityX offers many predefined text spacing as text properties

Prop (Type)Desciption
tightestLetter Spacing -3.0
tighterLetter Spacing -2.0
tightLetter Spacing -1.0
wideLetter Spacing 1.0
widerLetter Spacing 2.0
widestLetter Spacing 3.0

Example

'Velocityx'.text.wide.make();
//Sets the letter spacing as 1.0 of the text

Set a custom letter spacing

'Velocityx'.text.letterSpacing(4.0).make();
// Sets the letterSpacing as 4.0

Text Decoration

VelocityX offers many predefined text decorations as text properties

Prop (Type)Desciption
underlineTextDecoration.underline
lineThroughTextDecoration.lineThrough
overlineTextDecoration.overline

Example

'Velocityx'.text.underline.make();
// Sets the text to undelined.

Line Height

VelocityX offers many predefined line heights as text properties

Prop (Type)Desciption
heightTightLine Height 0.75
heightSnugLine Height 0.875
heightRelaxedLine Height 1.25
heightLooseLine Height 1.5

Example

'Velocityx'.text.heightSnug.make();
//Sets the line height as 0.875 of the text

Set a custom line height

'Velocityx'.text.lineHeight(4.0).make();
// Sets the line height as 4.0

Text Utilities

VelocityX offers many predefined regular used utilities as text properties

Prop (Type)Desciption
uppercaseWELCOME TO VELOCITYX
lowercasewelcome to velocityx
capitalizeWelcome To Velocityx
hidePartial* To Velocityx

Example

'Velocityx'.text.lowercase.make();
// Sets the text as lowercase - velocityx

Using All Together

Demo

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