“This is the 22nd 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

gestures

Function: Gesture

Parameters:

This control encapsulates the GestureDetector and contains all gestures and states

Method of use

Container(
  child: Text('gestures').center().gestures(onTap: () => print('gestures'))
)
Copy the code

aspectRatio

Function: Fixed aspect ratio component

Mandatory parameters: double aspectRatio,

The source code to achieve

AspectRatio(
  key: key,
  aspectRatio: aspectRatio,
  child: this,
)
Copy the code

center

Function: Center

Optional parameters:

double? WidthFactor: If widthFactor is 2.0, then the widget is always twice the width of its child. HeightFactor: If the heightFactor is 2.0, the widget is always twice as wide as its child

The source code to achieve

Center(
  key: key,
  widthFactor: widthFactor,
  heightFactor: heightFactor,
  child: this,
)
Copy the code

fittedBox

Function: When the aspect ratio of the child component is different from that of the parent component, we stretch or fill the parent component equally

Default parameters:

BoxFit fit = BoxFit. Contain: Filling type AlignmentGeometry alignment = alignment. Center: Alignment

The source code to achieve

FittedBox(
  key: key,
  fit: fit,
  alignment: alignment,
  child: this,
)
Copy the code

fractionallySizedBox

Function: Set the relative size of the control

Optional parameters:

double? WidthFactor: If widthFactor is 2.0, then the widget is always twice the width of its child. HeightFactor: If the heightFactor is 2.0, the widget is always twice as wide as its child

Default parameters:

AlignmentGeometry alignment = alignment. center: Alignments

The source code to achieve

FractionallySizedBox(
  key: key,
  alignment: alignment,
  widthFactor: widthFactor,
  heightFactor: heightFactor,
  child: this,
)
Copy the code

card

Function: card control, with a rounded corner and shadow

Required parameters:

Color? Color: background color

double? Elevation: the shadow

ShapeBorder? Shape: Sets rounded corners

EdgeInsetsGeometry? Margin: from the outside

Clip? ClipBehavior: Clipping mode

Default parameters:

Bool borderOnForeground = true: Whether to draw border before Child

Bool semanticContainer = true: semantics

The source code to achieve

Card(
  key: key,
  color: color,
  elevation: elevation,
  shape: shape,
  borderOnForeground: borderOnForeground,
  margin: margin,
  clipBehavior: clipBehavior,
  semanticContainer: semanticContainer,
  child: this,
)
Copy the code

Use and effect display

Container(
  child: Text('card').fontSize(50)
  .card(color: Colors.white,elevation: 5,margin: EdgeInsets.all(15))
  .center()
)
Copy the code

conclusion

I’ve written all of the widget extensions today, and I’ll cover some more in the future

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