Types

Type References

These Types objects are used in multiple widgets. They are defined here for reference.

TextStyle

TextStyle allows customization of font, size, color, decoration, and more to enhance the UI's textual elements.

PropertyTypeDescription
fontFamilystring or objectSet the font family applicable for all widgets inside this container, see the list of all available font families here (opens in a new tab). You can specify the fontFamily name directly or specify a different fontFamily for each language, see Here
fontSizeintegerThe size of the font. Valid values range from 1 to 1000.
lineHeightMultiplenumberA multiplier applied to the font size to determine line height (e.g., 2.0 for double the height of the font size). By default this value varies on the font used.
fontWeightFontWeightThe weight of the font.
isItalicbooleanIf true, the text is italicized.
colorColorThe color of the text.
backgroundColorColorThe background color of the text
gradientGradientA gradient effect applied to the text.
decorationenumThe text decoration: none, lineThrough, underline, overline.
decorationStyleenumThe style of the text decoration (if decoration is not none): solid, double, dotted, dashed, wavy.
decorationColorColorThe color of the decoration.
decorationThicknessnumberThe thickness of the decoration.
overflowenumTreatment of text exceeding available space: clip, fade, ellipsis, visible.
letterSpacingintegerSpace between characters in the text.
wordSpacingintegerSpace between words in the text.

Gradient

PropertyTypeDescription
colorsColor[]An array of colors used for the gradient.
stopsnumber[]The list of numbers from 0.0 (where the gradient starts) to 1.0 (where the gradient ends), one for each colors specified
startAlignmentThe starting position of the gradient.
endAlignmentThe ending position of the gradient.

FontWeight

This property defines the weight (thickness) of the font used in text styling. It includes standard weights and numerical weights for finer control.

FontWeightDescription
lightLighter font weight.
normalNormal or regular font weight.
boldBold font weight.
w100-w900Font weight from 100-900 (light to bold).

Color

This property defines the color based on a pre-defined names (see the supported names below) or as hexdecimal numbers that represent color codes.

You can use color codes in one of the two ways -

  • HTML/CSS format as a string with quotes around it. Starts with # and contains 6 or 8 characters after it. For example, '#FF5733' for orange. Remember to put quotes around it as # is a comment character in yaml.
  • The common programming language format without quotes. Starts with 0x and has 8 characters after it. For example, 0xFFFF5733 for orange.

Either way works fine and internally color codes are automatically converted to the programming language format.

NameDescription
transparentTransparent
blackBlack color.
blueBlue color.
whiteWhite color.
redRed color.
greyGrey color.
tealTeal color.
amberAmber color.
pinkPink color.
purplePurple color.
yellowYellow color.
greenGreen color.
brownBrown color.
cyanCyan color.
indigoIndigo color.
limeLime color.
orangeOrange color.

Alignment

This property is used to specify the alignment of an element within its parent.

AlignmentDescription
topLeftAligns the element at the top-left corner.
topCenterAligns the element at the top-center.
topRightAligns the element at the top-right corner.
centerLeftAligns the element at the center-left side.
centerCenters the element both horizontally and vertically.
centerRightAligns the element at the center-right side.
bottomLeftAligns the element at the bottom-left corner.
bottomCenterAligns the element at the bottom-center.
bottomRightAligns the element at the bottom-right corner.

TapHaptic

This property specifies the type of haptic feedback to be played upon tapping an element. The options are listed in decreasing order of intensity.

Haptic FeedbackDescription
heavyImpactGenerates a haptic feedback of the highest intensity.
mediumImpactProvides a haptic feedback of medium intensity.
lightImpactHapticOffers a lighter haptic impact as feedback.
selectionClickHapticProduces a mild, click-like haptic feedback, typically used for selection changes.
vibrateHapticTriggers a standard vibration as haptic feedback.

BackgroundImage

This property configures a background image for a widget, including its source, fit, alignment, and a fallback option.

PropertyTypeDescription
sourcestringThe Image URL to fill the background.
fallbackWidgetReturn an inline widget or specify a custom widget to be rendered when the backgroundImage fails to load the image.
fitFitHow to fit the image within the dimensions.
alignmentAlignmentAlign this image relative to its parent or dimensions.

Fit

This property determines how to fit the image within the dimension or the parent container.

Fit ModeDescription
fillStretch our image to fill the dimension, potentially distorting the aspect ratio if necessary.
containScale the image such that the entire image is contained within our dimension.
coverScale the image to fill our dimension, clipping the image as needed.
fitWidthScale the image to fit the width, and clipping the height if needed.
fitHeightScale the image to fit the height, and clipping the width if needed.
noneCenter-Align the original image size, clipping the content if needed.
scaleDownCenter-Align the image and only scale down to fit. Image will not be scaled up to bigger dimension.

Border

PropertyTypeDescription
borderRadiusinteger / stringBorder Radius with CSS-like notation (1 to 4 integers)
borderColorColorBorder color, starting with '0xFF' for full opacity.
borderWidthintegerThe thickness of the border. Minimum value: 0.

Shadow

This property defines the shadow properties for a widget, including color, offset, radius, blur radius, and style.

PropertyTypeDescription
shadowColorstring / numberBox shadow color starting with '0xFF' for full opacity.
shadowOffsetarray of integersOffset of the shadow in the format [x, y].
shadowRadiusintegerThe radius of the shadow. Minimum value: 0.
shadowBlurRadiusintegerThe blur radius of the shadow. Minimum value: 0.
shadowStyleenumThe blur style to apply on the shadow:
normal - Fuzzy inside and outside (default)
solid - Solid inside, fuzzy outside.
outer - Nothing inside, fuzzy outside.
inner - Fuzzy inside, nothing outside.