Text

The text theme for C2C UIKits

NAME	SIZE	LINE HEIGHT	WEIGHT	TRACKING
displayLarge	57	64	Bold	-0.25
displayMedium	45	52	Bold	-0.1
displaySmall	36	44	Bold	-0.1
headlineLarge	32	40	Bold	-0.1
headlineMedium	28	36	Bold	-0.1
headlineSmall	24	34	Bold	-0.1
titleLarge	20	32	Medium	0
titleMedium	16	24	Medium	0
titleSmall	14	20	Medium	0
bodyLarge	14	20	Regular	0
bodyMedium	12	16	Regular	0
bodySmall	10	12	Regular	0
bodyXSmall	8	12	Regular	0
labelLarge	16	20	Medium	0
labelMedium	14	16	Medium	0
labelSmall	12	16	Medium	0
labelXSmall	10	12	Medium	0
link	14	20	Regular	0

C2CTextThemeData

Property	Description
fontFamily	The font family for the text styles.
displayLarge	Text style for large display text.
displayMedium	Text style for medium display text.
displaySmall	Text style for small display text.
headlineLarge	Text style for large headlines.
headlineMedium	Text style for medium headlines.
headlineSmall	Text style for small headlines.
titleLarge	Text style for large titles.
titleMedium	Text style for medium titles.
titleSmall	Text style for small titles.
labelLarge	Text style for large labels.
labelMedium	Text style for medium labels.
labelSmall	Text style for small labels.
labelXSmall	Text style for extra small labels.
bodyLarge	Text style for large body text.
bodyMedium	Text style for medium body text.
bodySmall	Text style for small body text.
bodyXSmall	Text style for extra small body text.
link	Text style for link text

Accessing the Text Theme

You can access the color theme data using C2CTheme.of(context) or C2CTextTheme.of(context) method within your widgets.

Example Usage

Widget build(BuildContext context) {
  final textTheme = C2CTextTheme.of(context);
  return Text(
    'Hello',
    style: textTheme.bodyLarge,
  );
}

// or

Widget build(BuildContext context) {
  final c2cTheme = C2CTheme.of(context);
  return Text(
    'Hello',
    style: c2cTheme.textTheme.bodyLarge,
  );
}

Apply a default text style to its descendant widgets

C2CTextTheme(
  data: const C2CTextThemeData(
    bodyLarge: TextStyle(fontSize: 20),
  ),
  child: Builder(builder: (context) {
    return Text(
      'Hello',
      style: C2CTextTheme.of(context).bodyLarge,
    );
  }),
)