OudsCodeText class

OUDS Code Design Guidelines

Reference design version : 1.0.0

The Code style is dedicated to technical content such as code snippets, commands, system values, and identifiers. It uses a monospace typeface to preserve character alignment and improve readability of structured content. Available in a single size, it provides a consistent presentation of technical information throughout the product. Its use should be limited to content that requires an accurate code-like representation.

OudsCodeText(text: 'const x = 1;')

A color override can be provided when the default theme color is not suitable, for example when the text is displayed on a colored surface:

OudsCodeText(
  text: 'const x = 1;',
  color: OudsTheme.of(context).colorScheme(context).contentDefault,
)

Multiple colors can be used simultaneously within the same text.

The .rich constructor (OudsCodeText.rich) is exposed to color only part of the text. Build the .rich constructor's text argument with buildOudsAnnotatedText.

The user must ensure that the contrast between the colors used meets current accessibility standards and that the colors align with the brand’s and its entity’s visual identity.

OudsCodeText.rich(
  text: buildOudsAnnotatedText((builder) {
    builder.append('const x = ');
    builder.withColor((context) => color, () => builder.append('1;'));
  }),
)