“This is the 24th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

background

We have briefly introduced the styled_widget functionality. Today we will take a closer look at what widgets are available in the styled_widget framework and how they are implemented

Text and TextSpan

TextSpan is implemented in the same way that Text is used

textStyle

Function: Change font style

The extension also contains a copywith method that copies a Text and modifies the properties

T copyWith({
  String? data,
  TextStyle? style,
  StrutStyle? strutStyle,
  TextAlign? textAlign,
  TextDirection? textDirection,
  Locale? locale,
  bool? softWrap,
  TextOverflow? overflow,
  double? textScaleFactor,
  int? maxLines,
  String? semanticsLabel,
  TextWidthBasis? textWidthBasis,
}) =>
    (this is _StyledAnimatedTextContainer
        ? _StyledAnimatedTextContainer(
            data ?? this.data ?? "",
            style: style ?? this.style,
            strutStyle: strutStyle ?? this.strutStyle,
            textAlign: textAlign ?? this.textAlign,
            locale: locale ?? this.locale,
            maxLines: maxLines ?? this.maxLines,
            overflow: overflow ?? this.overflow,
            semanticsLabel: semanticsLabel ?? this.semanticsLabel,
            softWrap: softWrap ?? this.softWrap,
            textDirection: textDirection ?? this.textDirection,
            textScaleFactor: textScaleFactor ?? this.textScaleFactor,
            textWidthBasis: textWidthBasis ?? this.textWidthBasis,
          )
        : Text(
            data ?? this.data ?? "",
            style: style ?? this.style,
            strutStyle: strutStyle ?? this.strutStyle,
            textAlign: textAlign ?? this.textAlign,
            locale: locale ?? this.locale,
            maxLines: maxLines ?? this.maxLines,
            overflow: overflow ?? this.overflow,
            semanticsLabel: semanticsLabel ?? this.semanticsLabel,
            softWrap: softWrap ?? this.softWrap,
            textDirection: textDirection ?? this.textDirection,
            textScaleFactor: textScaleFactor ?? this.textScaleFactor,
            textWidthBasis: textWidthBasis ?? this.textWidthBasis,
          )) as T
Copy the code

Then when we call textStyle, copyWith will be called internally to change the corresponding properties and change the font style

Method of use

Container(
  child: Text('text').textStyle(TextStyle(color: Colors.red)).center()
)
Copy the code

Other extensions

TextScale: text enlargement

2. Bold: Bold text

3. Italic: The text is slanted

4.fontWeight

5. FontFamily: font

6. LetterSpacing: Spacing between letters

7. WordSpacing (Chinese also works)

8. TextShadow

9. TextElevation: Text projection

10. The color of the text

11. TextAlignment: textAlignment

12. TextBaseline: alphabetic, ideographic, alphabetic, alphabetic, alphabetic

Use and code display

Container( child: [ Text('textScale').textScale(2), Text('bold').bold(), Text('italic').italic(), Text('fontWeight').fontWeight(FontWeight.w500), Text('fontFamily').fontFamily(''), Text('letterSpacing').letterspacing (5), Text('word Spacing').wordspacing (15), Text('textShadow').textShadow(color: Colors.red,blurRadius: 5), Text('textElevation').textElevation(5,angle: 20), Text('textColor').textColor(Colors.red), Text('textAlignment').textAlignment(TextAlign.right), Text('textBaseline').textBaseline(TextBaseline.ideographic), ].toColumn().center() )Copy the code

conclusion

The text extension is finished today, and the animation implementation will start tomorrow

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