“This is the 21st day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

background

Yesterday we briefly introduced the functions of styled_widget. Today we will take a closer look at what widgets are available in the styled_widget framework and how they are implemented

The widget is introduced

expanded

Function: Fills the remaining space

Default parameters:

Int flex = 1: control ratio

The control of Expanded simple encapsulation, not to say more, see the implementation

Widget expanded({
  Key? key,
  int flex = 1,
}) =>
    Expanded(
      key: key,
      child: this,
      flex: flex,
    )
Copy the code

flexible

Function: control sub-control ratio

Default parameters:

Int flex = 1: control ratio

Fit = flexfit. loose: tight: must (forcibly) fill up the remaining space. Loose: Fill up the remaining space as much as possible, but don’t fill up.

The control of Flexible simple encapsulation, not to say more, see the implementation of good

Widget flexible({
  Key? key,
  int flex = 1,
  FlexFit fit = FlexFit.loose,
}) =>
    Flexible(
      key: key,
      child: this,
      flex: flex,
      fit: fit,
    )
Copy the code

positioned

Function: Absolute layout

Optional parameters:

double? left, double? top, double? right, double? bottom, double? width, double? height,

Default parameters:

Bool animate = false: Use animation extensions when true

The widget also has an animation, which provides a glimpse of space

Positioned(
    key: key,
    child: this,
    left: left,
    top: top,
    right: right,
    bottom: bottom,
    width: width,
    height: height,
  )
Copy the code

positionedDirectional

Offer a small glimpse of space. Absolutely positioned, the first corner is about the same, but the left right becomes start end

Optional parameters:

double? start, double? end, double? top, double? bottom, double? width, double? height,

Default parameters:

Bool animate = false: Use animation extensions when true

The widget also has an animated effect that encapsulates positionedDirectional

PositionedDirectional(
    key: key,
    child: this,
    start: start,
    end: end,
    top: top,
    bottom: bottom,
    width: width,
    height: height,
  )
Copy the code

safeArea

Function: Control the security area, such as the fringe of the bangs screen

Default parameters:

bool top = true, bool bottom = true, bool left = true, bool right = true,

Implement safeArea encapsulation

SafeArea(
  key: key,
  top: top,
  bottom: bottom,
  left: left,
  right: right,
  child: this,
)
Copy the code

semanticsLabel

Features: Screen reader, mainly for people with visual impairments, more complex, interested people can learn about it,semanticsLabel

Required parameters:

String label

Encapsulate Semantics. FromProperties

Widget semanticsLabel(
  String label, {
  Key? key,
}) =>
    Semantics.fromProperties(
      key: key,
      properties: SemanticsProperties(label: label),
      child: this,
    )
Copy the code

conclusion

I hope you can share some good three parties in the comments section, learn together and make progress together

As a student of Flutter, I hope you can give me more advice