Loading...
Loading...
Apply Shadcn UI text styles (h1, h2, p, lead, muted, etc.), set custom font family or Google Fonts, and extend ShadTextTheme with custom styles. Use when styling text, headings, or paragraphs in a Flutter shadcn_ui app or when changing the default font.
npx skill4agent add serverpod/skills-registry shadcn_ui-typographyShadTheme.of(context).textThemeText(
'Taxing Laughter: The Joke Tax Chronicles',
style: ShadTheme.of(context).textTheme.h1,
)
Text(
'The king, seeing how much happier his subjects were...',
style: ShadTheme.of(context).textTheme.p,
)
Text(
'Email address',
style: ShadTheme.of(context).textTheme.small,
)
Text(
'Enter your email address.',
style: ShadTheme.of(context).textTheme.muted,
)/fontspubspec.yamlflutter:
fonts:
- family: UbuntuMono
fonts:
- asset: fonts/UbuntuMono-Regular.ttf
- asset: fonts/UbuntuMono-Italic.ttf
style: italic
- asset: fonts/UbuntuMono-Bold.ttf
weight: 700ShadTextThemeShadThemeDatareturn ShadApp(
theme: ShadThemeData(
brightness: Brightness.light,
colorScheme: const ShadZincColorScheme.light(),
textTheme: ShadTextTheme(
colorScheme: const ShadZincColorScheme.light(),
family: 'UbuntuMono',
),
),
...
);google_fontstheme: ShadThemeData(
brightness: Brightness.light,
colorScheme: const ShadZincColorScheme.light(),
textTheme: ShadTextTheme.fromGoogleFont(GoogleFonts.poppins),
),ShadTextThemecustomtextTheme: ShadTextTheme(
custom: {
'myCustomStyle': const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w400,
color: Colors.blue,
),
},
),ShadTheme.of(context).textTheme.custom['myCustomStyle']!ShadTextThemeShadTheme.of(context).textTheme.myCustomStyle