“This is the 20th day of my participation in the Gwen Challenge in November. Check out the 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

scale

Function: Zoom in and out

Optional parameters:

double? All: xy zoom in or out at the same time

double? X: Zoom in or out horizontally (x and y need to be set at the same time)

double? Y: Zoom in or out vertically (x and y need to be set at the same time)

Offset? Origin: migration

Default parameters:

AlignmentGeometry alignment = alignment. center: Alignments

Bool transformHitTests = true: Click

Bool animate = false: Use animation extensions when true

This widget also has an animation effect that encapsulates the Transform implementation

Transform( key: key, transform: Matrix4.diagonal3Values(x ?? all ?? 0, y ?? all ?? 0, 1.0), alignment: alignment, child: this, origin: origin, transformHitTests: transformHitTests,)Copy the code

Effect display and code

Container(
  child: Text('scale').center().scale(x: 2,y: 3)
)
Copy the code

transform

Function: to achieve a variety of transformation effects

Mandatory parameter :Matrix4 transform

Optional parameters:

Offset? Origin: migration

AlignmentGeometry alignment: AlignmentGeometry alignment

Default parameters:

Bool transformHitTests = true: Click

Bool animate = false: Use animation extensions when true

This widget also has an animation effect that encapsulates the Transform implementation

Transform(
    key: key,
    transform: transform,
    alignment: alignment,
    origin: origin,
    transformHitTests: transformHitTests,
    child: this,
  )
Copy the code

overflow

Function: Allows overflow container display

Optional parameters:

double? MinWidth: indicates the minimum width

double? MaxWidth: indicates the maximum width

double? MinHeight: minimum height

double? MaxHeight: indicates the maximum height

Default parameters:

AlignmentGeometry alignment = alignment. center: Alignments

Bool animate = false: Use animation extensions when true

This widget also has an animation effect that encapsulates the OverflowBox. Normal Flutter widgets will report an error when overflowing, but will not report an error when using overflow

OverflowBox(
    key: key,
    alignment: alignment,
    minWidth: minWidth,
    maxWidth: minWidth,
    minHeight: minHeight,
    maxHeight: maxHeight,
    child: this,
  )
Copy the code

scrollable

Features: Single component scrolling, less performance than ListView, no lazy loading, suitable for a small number of widgets

Optional parameters:

bool? Primary: Controls child component rolling events

ScrollPhysics? Physics: Responds to user input

ScrollController? Controller: a controller

Default parameters:

Axis scrollDirection = Axis. Vertical: sets the scrollDirection

Bool reverse = false: reverse scrolling direction

DragStartBehavior dragStartBehavior = DragStartBehavior.start:

This widget also has an animation effect that encapsulates the SingleChildScrollView

SingleChildScrollView(
  key: key,
  child: this,
  scrollDirection: scrollDirection,
  reverse: reverse,
  primary: primary,
  physics: physics,
  controller: controller,
  dragStartBehavior: dragStartBehavior,
)
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