text_style_preview 0.1.0

Preview a TextStyle based on Material Design's Typography

Preview a TextStyle based on Material Design's Typography

Features

Ever been confused by TextStyle names? text_style_preview allows you to easily preview TextStyle

Getting started

Add dependency to your pubspec file

dependencies:
  text_style_preview: <latest version>

Usage

Basic usage

Wrap Text widget with TextStylePreview widget.

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

Advanced usage

You can customize the Preview by specifying the Style, etc.

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

With ThemeExtension, you can use the same style throughout the app!

@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(),
  );
}