“This is the 23rd 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 Icon is introduced

Now that we’ve covered widget extensions, let’s take a look at ICONS and List extensions

IconSize and iconColor

Function: Change icon size and color

The extension contains a copywith method that copies an icon and modifies the properties

T copyWith({
  double? size,
  Color? color,
  String? semanticLabel,
  TextDirection? textDirection,
}) =>
    (this is _StyledAnimatedIconContainer
        ? _StyledAnimatedIconContainer(
            this.icon,
            color: color ?? this.color,
            size: size ?? this.size,
            semanticLabel: semanticLabel ?? this.semanticLabel,
            textDirection: textDirection ?? this.textDirection,
          )
        : Icon(
            this.icon,
            color: color ?? this.color,
            size: size ?? this.size,
            semanticLabel: semanticLabel ?? this.semanticLabel,
            textDirection: textDirection ?? this.textDirection,
          )) as T
Copy the code

Then when we call iconSize or iconColor, copyWith will be called internally to change color or size to achieve the purpose of changing color and size

T iconSize(double size) => this.copyWith(size: size);
T iconColor(Color color) => this.copyWith(color: color);
Copy the code

Method of use

Container(
  child: IconButton(onPressed: ()=>print('11'), icon: Icon(Icons.print).iconColor(Colors.red).iconSize(50)).center()
)
Copy the code

The List is introduced

StyledList extends List to include toColumn, toRow, and toStack

toColumn

Features: Vertical layout

Default parameters:

TextDirection? TextDirection: Text arrangement direction

TextBaseline? TextBaseline: textBaseline

Widget? The separator: line

Optional parameters:

MainAxisAlignment MainAxisAlignment = MainAxisAlignment. Start: Axis alignment, which is vertical for Column

MainAxisSize MainAxisSize = mainAxissize. Max: indicates the spindle size

CrossAxisAlignment CrossAxisAlignment = CrossAxisAlignment. Center: cross shaft alignment

VerticalDirection VerticalDirection = VerticalDirection. Down: Controls the vertical layout

Method of use

Container(
  child: [
    Container(
      height: 50,
      width: 100,
      color: Colors.red,
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
    ),
    Container(
      height: 150,
      width: 100,
      color: Colors.blue,
    ),
  ].toColumn().center()
)
Copy the code

toRow

Function: Horizontal layout

Default parameters:

TextDirection? TextDirection: Text arrangement direction

TextBaseline? TextBaseline: textBaseline

Widget? The separator: line

Optional parameters:

MainAxisAlignment MainAxisAlignment = MainAxisAlignment. Start: Axis alignment, which is vertical for Column

MainAxisSize MainAxisSize = mainAxissize. Max: indicates the spindle size

CrossAxisAlignment CrossAxisAlignment = CrossAxisAlignment. Center: cross shaft alignment

VerticalDirection VerticalDirection = VerticalDirection. Down: Controls the vertical layout

Method of use

Container(
  child: [
    Container(
      height: 50,
      width: 100,
      color: Colors.red,
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
    ),
    Container(
      height: 150,
      width: 100,
      color: Colors.blue,
    ),
  ].toRow().center()
)
Copy the code

toStack

Function: Horizontal layout

Default parameters:

TextDirection? TextDirection: Text arrangement direction

Optional parameters:

AlignmentGeometry alignment = AlignmentDirectional.topStart:

StackFit Fit = stackfit. loose: Determines unlocated components

Clip. HardEdge: Clipping mode

Method of use

Container(
  child: [
    Container(
      height: 150,
      width: 100,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
    ),
    Container(
      height: 50,
      width: 100,
      color: Colors.red,
    ),
  ].toStack().center()
)
Copy the code

conclusion

Today I have finished the list and icon extensions, and tomorrow I will talk about the text extensions

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