预览基于Material Design字体排版中的TextStyle

特点

是否曾对TextStyle的名称感到困惑？text_style_preview可让您轻松预览TextStyle

text_style_preview

入门

将依赖项添加到pubspec文件

dependencies:
  text_style_preview: <latest version>

用法

基本用法

使用TextStylePreview小部件包装Text小部件。

const TextStylePreview(
  child: Text('Sample Text'),
),

高级用法

您可以通过指定样式等来自定义预览。

TextStylePreview(
  initScaleCategory: ScaleCategory.headlineSmall,
  applyCustomStyle: (textStyle) => textStyle.apply(
    color: Colors.blue,
    fontSizeFactor: 1.5,
  ),
  // set stye like this
  style: TextStylePreviewStyle(
    modalHeight: 300,
    barrierColor: Colors.transparent,
    showDivider: true,
    descriptionBuilder: (scaleCategory, textStyle) =>
        scaleCategory.name,
  ),
  child: const Text('Sample Text2'),
),

ThemeExtension

使用ThemeExtension，您可以在整个应用程序中使用相同的样式！

@override
Widget build(BuildContext context) {
  return MaterialApp(
    theme: ThemeData(
      useMaterial3: true,
      primarySwatch: Colors.red,
      // set default stye like this
      extensions: const [
        TextStylePreviewStyle(
          showDivider: false,
        ),
      ],
    ),
    home: const TextStylePreviewDemoScreen(),
  );
}

GitHub

查看 Github