Flutter Widgets

Flutter Widgets :

1) Text:
You create a run of styled text within your applications.

Example :

Text(
          'fluttertutorial.in',
          textAlign: TextAlign.center,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(fontWeight: FontWeight.bold))

Constructor:
Text(this.data, {
Key key,
style,
textAlign,
textDirection,
locale,
softWrap,
overflow,
textScaleFactor,
maxLines,
semanticsLabel,
})

style:
TextStyle({
inherit = true,
color,
fontSize,
fontWeight,
fontStyle,
letterSpacing,
wordSpacing,
textBaseline,
height,
locale,
foreground,
background,
shadows,
decoration,
decorationColor,
decorationStyle,
debugLabel,
fontFamily
})

2) Row, Column:
This create flexible layouts in both are horizontal (Row) and vertical (Column) directions. Column and Row have the same properties use.

  • CrossAxisAlignment Property
  • crossAxisAlignment : CrossAxisAlignment.start
  • CrossAxisAlignment.center
  • CrossAxisAlignment.end
  • CrossAxisAlignment.stretch
  • CrossAxisAlignment.baseline
  • MainAxisAlignment Property
  • mainAxisAlignment : MainAxisAlignment.start
  • MainAxisAlignment.center
  • MainAxisAlignment.end
  • MainAxisAlignment.spaceAround
  • MainAxisAlignment.spaceBetween
  • MainAxisAlignment.spaceEvenly
  • MainAxisAlignment.max
  • MainAxisAlignment.min

3) Container:
Container widget lets you create a rectangular visual elements. A container can also have margin, padding and constraints applied to its size. Container cam be decorated with a BoxDecoration, such as a background, border, or a shadow.

4) Image: For displaying images.

5) Icon : For displaying flutter built in Material and Cupertino icons.

6) Scaffold : This is root of everty page in your app, which gives your app a basic layout structure. It is easy to implement bottom navigations, appBars, back buttons etc.

7) InheritedWidgetsL Provider pattern allows you to gather data in an inheritedWidget to be shared in multiple places.

8) Stack : A stack widgets on top of each other in paint order. You can then use the Positioned widget on children of a Stack to position then relative to the top, right, bottom or left edge of the stack. Stacks are based on the web’s absoulte positioning layout model. For example CSS