ultimate_containers

Your ultimate layouting widget is C. Container, Text, Column, Row and styling in one.

Benefits

• Style is decoupled from Widget
• Style can be reused
• Responsiveness
• Style properties are similar to CSS
• More units than just px

Features

Usage

• Style abstraction FSS
• Multiple styles per widget
• Inherit text styles from parent

Units

• Unit px -> Pxpx
• Unit % -> PercentVPercentHpercentVpercentH
• Unit em -> Emem
• Unit rem -> Remrem
• Unit vw -> Vwvw (50vw -> Vw(0.5)).
• Unit vh -> Vhvh(50vh -> Vh(0.5)).
• Unit vmin -> Vminvmin(50vmin -> Vmin(0.5)).
• Unit vmax -> Vmaxvmax(50vmax -> Vmax(0.5)).
• Unit fr -> Frfr
• Unit cm -> Cmcm
• Unit mm -> Mmmm
• Unit in -> Inin
• Unit pt -> Ptpt
• Unit pc -> Pcpc
• Unit ex -> Exex
• Unit ch -> Chch
• String unit parser u('50px') -> Px(50)
• Basic unit arithmetic

Responsiveness

• Responisve breakpoints Breakpoints, Breakpoint

CSS Properties

Text

• Export & Import TextStyle to be compatible with Flutter Text Widget
• color -> color
• font-size -> fontSize
• font-weight -> fontWeight
• font-style -> fontStyle
• letter-spacing -> letterSpacing
• word-spacing -> wordSpacing
• font-family -> fontFamily
• text-align -> textAlign
• font-family -> fontFamily
• text-decoration -> textDecoration
• text-shadow -> textShadowColortextShadowBlurtextShadowOffset

Contaeiner

• Widget C is like Container but with FSS support
• Support multiple FSS styles per widget (like CSS classes)
• width -> width
• height -> height
• margin -> marginm
• margin-top -> marginTopmt
• margin-right -> marginRightmr
• margin-bottom -> marginBottommb
• margin-left -> marginLeftml
• margin-vertical -> marginVerticalmv
• margin-horizontal -> marginHorizontalmh
• padding -> paddingp
• padding-top -> paddingToppt
• padding-right -> paddingRightpr
• padding-bottom -> paddingBottompb
• padding-left -> paddingLeftpl
• padding-vertical -> paddingVerticalpv
• padding-horizontal -> paddingHorizontalph
• border-radius-top-left -> borderRadiusTopLeftbrtl
• border-radius-top-right -> borderRadiusTopRightbrtr
• border-radius-bottom-left -> borderRadiusBottomLeftbrbl
• border-radius-bottom-right -> borderRadiusBottomRightbrbr
• border-radius-top -> borderRadiusTopbrt
• border-radius-right -> borderRadiusRightbrr
• border-radius-bottom -> borderRadiusBottombrb
• border-radius-left -> borderRadiusLeftbrl
• border-radius -> borderRadiusbr
• border-width -> borderWidthbw
• border-style -> borderStylebs
• border-color -> borderColorbc
• inline, middle, outlin border -> borderAlign
• background-color -> backgroundColorbg
• aspect-ratio -> aspectRatio
• max-height -> maxHeight
• max-width -> maxWidth
• min-height -> minHeight
• min-width -> minWidth

Flex

• flex-direction -> axis
• flex-wrap -> flexWrap
• flex-flow -> flexFlow
• justify-content -> alignHorizontal
• align-items -> alignVertical
• gap -> gap
• gap-vertical -> gapVertical
• gap-horizontal -> gapHorizontal

Grid

• Unit fr -> Fr

Stack

• Stack functionality

Icon

• Icon Widget I