Prévisualiser un TextStyle basé sur la typographie de Material Design

Posté Par: Windows2022tutosur: décembre 22, 2022Dans: TechPas De Commentaires

Caractéristiques

Avez-vous déjà été confus par les noms TextStyle ? text_style_preview vous permet de prévisualiser facilement TextStyle

Commencer

Ajouter une dépendance à votre fichier pubspec

dependencies:
  text_style_preview: <latest version>

Usage

Utilisation de base

Widget Wrap Text avec le widget TextStylePreview.

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

Utilisation avancée

Vous pouvez personnaliser l’aperçu en spécifiant le 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'),
),

ThèmeExtension

Avec ThemeExtension, vous pouvez utiliser le même style dans toute l’application !

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