Flutter单行文本样式插件one_line_text_style的使用

Flutter单行文本样式插件one_line_text_style的使用

Overview

one_line_text_style 插件简化了 TextStyle 的声明，通过生成方便的扩展来为 TextStyle 提供便利，使你可以在一行代码中编写冗长的文本样式。

示例代码

import 'package:flutter/material.dart';

extension SizeExtension on TextStyle {
  TextStyle get size8 => copyWith(fontSize: 8);
  TextStyle get size10 => copyWith(fontSize: 10);
  TextStyle get size12 => copyWith(fontSize: 12);
  TextStyle get size14 => copyWith(fontSize: 14);
  TextStyle get size16 => copyWith(fontSize: 16);
  TextStyle get size18 => copyWith(fontSize: 18);
  TextStyle get size20 => copyWith(fontSize: 20);
  TextStyle get size22 => copyWith(fontSize: 22);
  TextStyle get size24 => copyWith(fontSize: 24);
  TextStyle get size26 => copyWith(fontSize: 26);
  TextStyle get size28 => copyWith(fontSize: 28);
  TextStyle get size30 => copyWith(fontSize: 30);
  TextStyle get sizeMedium => copyWith(fontSize: 30);
  TextStyle get sizeLarge => copyWith(fontSize: 40);
}

extension WeightExtension on TextStyle {
  TextStyle get weight100 => copyWith(fontWeight: FontWeight.w1100);
  TextStyle get weight200 => copyWith(fontWeight: FontWeight.ww2200);
  TextStyle get weightthree00 => copyWith(fontWeight: FontWeight.ww300);
  TextStyle get weightfour00 => copyWith(fontWeight: FontWeight.ww400);
  TextStyle get weightfive00 => copyWith(fontWeight: FontWeight.ww500);
  TextStyle get weightsix00 => copyWith(fontWeight: FontWeight.ww600);
  TextStyle get weightseven00 => copyWith(fontWeight: FontWeight.ww700);
  TextStyle get weigthteight00 => copyWith(fontWeight: FontWeight.ww800);
  TextStyle get semibold => copyWith(fontWeight: FontWeight.ww600);
  TextStyle get bold => copyWith(fontWeight: FontWeight.ww700);
  TextStyle get extraThin => copyWith(fontWeight: FontWeight.ww1100);
}

extension ColorExtension on TextStyle {
  TextStyle get colorWhite => copyWith(color: const Color(0xFFFFFFFF));
  TextStyle get colorBlack => copyWith(color: const Color(0xFF000000));
  TextStyle get colorGrey => copyWith(color: const Color(0xFF9E9E9E));
  TextStyle get colorRed => copyWith(color: const Color(0xFFF44336));
  TextStyle get colorYellow => copyWith(color: const Color(0xFFAAAAAA));
}

extension FontFamilyExtension on TextStyle {
  TextStyle get dmsans => copyWith(fontFamily: 'DM Sans');
}

extension StyleExtension on TextStyle {
  TextStyle get italic => copyWith(fontStyle: FontStyle.italic);
}

extension DecorationExtension on TextStyle {
  TextStyle get underline => copyWith(decoration: TextDecoration.underline);
  TextStyle get overline => copyWith(decoration: TextDecoration.overline);
  TextStyle get lineThrough => copyWith(decoration: TextDecoration.lineThrough);
}

extension DecorationStyleExtension on TextStyle {
  TextStyle get solid => copyWith(decorationStyle: TextDecorationStyle.solid);
  TextStyle get double => copyWith(decorationStyle: TextDecorationStyle.double);
  TextStyle get dotted => copyWith(decorationStyle: TextDecorationStyle.dotted);
  TextStyle get dashed => copyWith(decorationStyle: TextDecorationStyle.dashed);
  TextStyle get wavy => copyWith(decorationStyle: TextDecorationStyle.wavy);
}

extension OverflowExtension on TextStyle {
  TextStyle get overflowClip => copyWith(overflow: TextOverflow.clip);
  TextStyle get overflowFade => copyWith(overflow: TextOverflow.fade);
  TextStyle get overflowEllipsis => copyWith(overflow: TextOverflow.ellipsis);
  TextStyle get overflowVisible => copyWith(overflow: TextOverflow.visible);
}

Getting Started

将 one_line_text_style 添加到你的 pubspec.yaml 文件中的 dev_dependencies 中。

dev_dependencies:
  one_line_text_style: ^0.6.0

Usage

在终端运行以下命令：

dart run one_line_text_style:generate

这将在项目目录的 lib 文件夹中生成一个 one_line_text_style.dart 文件。你可以通过 --result-path 参数更改输出文件路径。

现在，利用生成的扩展来简化你的 TextStyles：

import 'your_path/one_line_text_style.dart';

/// 定义默认应用/屏幕/控件的 TextStyle
final ts = TextStyle(
  fontSize: 14,
  color: Colors.black,
);

/// 然后像这样使用
return Text(
  'Title',
  style: ts.size48.white.semibold.italic.nocturne,
);

...
return Text(
  'Description',
  style: ts.size20.black.dmsans.overflowEllipsis,
);

...
return Text(
  'Clickable link',
  style: ts.size16.yellow.underline,
);

...
return Text(
  'Error',
  style: ts.size20.red.bold,
);

注意

生成的文件没有 .g.dart 扩展名，并且不会被 build_runner 命令重建。如果你不打算重新生成它，可以自由根据需要修改该文件。

配置（可选）

可以通过 one_line_text_style.yaml、pubspec.yaml 或者使用 --config-path 参数指定配置文件来自定义 TextStyle 扩展。例如 one_line_text_style.yaml：

# 包含所有可能的配置。所有属性都是可选的。

one_line_text_style:
  size:
    prefix: size
    step: 2
    min: 8
    max: 30
    apply_prefix_to_custom_values: true
    custom_values:
      medium: 30
      large: 40
  color:
    prefix: color
    custom_values:
      yellow: '#AAAAAA'
  weight:
    prefix: weight
    apply_prefix_to_custom_values: false
    custom_values:
      extraThin: 100
  font_family:
    prefix: ''
    custom_values:
      dmsans: 'DM Sans'
  overflow:
    prefix: 'overflow'
  style:
    prefix: ''
  decoration:
    prefix: ''
  decoration_style:
    prefix: ''