text_style_preview 0.1.4+3

Preview a TextStyle based on Material Design's Typography. No more confusion in scale selection.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:text_style_preview/text_style_preview.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

class TextStylePreviewDemoScreen extends StatelessWidget {
  const TextStylePreviewDemoScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Text Style Preview Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Center(
          child: Column(
            children: [
              // basic usage
              const TextStylePreview(
                child: Text('Sample Text'),
              ),
              const SizedBox(height: 32),
              // advanced usage
              TextStylePreview(
                initTypeScaleCategory: TypeScaleCategory.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: (typeScaleCategory, textStyle) =>
                      textStyle.debugLabel.toString(),
                ),
                child: const Text('Sample Text2'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}