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 -> Px px
• Unit % -> PercentV PercentH percentV percentH
• Unit em -> Em em
• Unit rem -> Rem rem
• Unit vw -> Vw vw (50vw -> Vw(0.5)).
• Unit vh -> Vh vh(50vh -> Vh(0.5)).
• Unit vmin -> Vmin vmin(50vmin -> Vmin(0.5)).
• Unit vmax -> Vmax vmax(50vmax -> Vmax(0.5)).
• Unit fr -> Fr fr
• Unit cm -> Cm cm
• Unit mm -> Mm mm
• Unit in -> In in
• Unit pt -> Pt pt
• Unit pc -> Pc pc
• Unit ex -> Ex ex
• Unit ch -> Ch ch
• 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 -> textShadowColor textShadowBlur textShadowOffset

Contaeiner

• Widget C is like Container but with FSS support
• Support multiple FSS styles per widget (like CSS classes)
• width -> width
• height -> height
• margin -> margin m
• margin-top -> marginTop mt
• margin-right -> marginRight mr
• margin-bottom -> marginBottom mb
• margin-left -> marginLeft ml
• margin-vertical -> marginVertical mv
• margin-horizontal -> marginHorizontal mh
• padding -> padding p
• padding-top -> paddingTop pt
• padding-right -> paddingRight pr
• padding-bottom -> paddingBottom pb
• padding-left -> paddingLeft pl
• padding-vertical -> paddingVertical pv
• padding-horizontal -> paddingHorizontal ph
• border-radius-top-left -> borderRadiusTopLeft brtl
• border-radius-top-right -> borderRadiusTopRight brtr
• border-radius-bottom-left -> borderRadiusBottomLeft brbl
• border-radius-bottom-right -> borderRadiusBottomRight brbr
• border-radius-top -> borderRadiusTop brt
• border-radius-right -> borderRadiusRight brr
• border-radius-bottom -> borderRadiusBottom brb
• border-radius-left -> borderRadiusLeft brl
• border-radius -> borderRadius br
• border-width -> borderWidth bw
• border-style -> borderStyle bs
• border-color -> borderColor bc
• inline, middle, outlin border -> borderAlign
• background-color -> backgroundColor bg
• 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