OrangeCompactTheme class

Orange Compact brand theme implementation for OUDS Flutter.

OrangeCompactTheme implements the OudsThemeContract and defines the "Orange Compact" theme for the application. It provides both light and dark theme configurations using the OUDS design system, including color, typography, and component tokens. The class handles the theme's data for both light and dark modes, allowing dynamic switching based on the current ThemeMode setting.

This theme uses the Helvetica Neue font family. Due to legal issues Helvetica Neue font files are not bundled with this library.

The Helvetica Neue font files for the Orange theme are available at https://brand.orange.com/en/brand-basics/typography and can be used by copying the ttf files in the assets/fonts directory of the project

Load Fonts Before App Starts

Usage example:

  // This example loads fonts from local assets.
  final orangeFontFamily = await OrangeFontFamily.getFontFamily(
    fontConfigs: [
      OrangeFontFamily(
        familyName: "Helvetica Neue Arabic",
        asset: "assets/fonts/helvetica_neue_arabic.ttf",
        fontWeight: FontWeight.w400,
        script: OrangeFontScript.arabic,
      ),
      OrangeFontFamily(
        familyName: "Helvetica Neue Arabic Bold",
        asset: "assets/fonts/helvetica_neue_arabic_bold.ttf",
        fontWeight: FontWeight.w700,
        script: OrangeFontScript.arabic,
      ),
      OrangeFontFamily(
          familyName: "Helvetica Neue Regular",
          asset: "assets/fonts/helvetica_neue_latin_roman.ttf",
          fontWeight: FontWeight.w400,
          script: OrangeFontScript.latin,
      ),
      OrangeFontFamily(
          familyName: "Helvetica Neue Medium",
          asset: "assets/fonts/helvetica_neue_latin_medium.ttf",
          fontWeight: FontWeight.w500,
          script: OrangeFontScript.latin,
      )
    ],
  );

OrangeCompactTheme(fontFamily);
}

Although the preferred way of using the Helvetica Neue font is configuring bundled font files, there are some cases where this is not possible, for instance in open source projects where the font files cannot be bundled due to legal issues. In these cases, the font files can alternatively, the font files can be downloaded using Flutter's Downloadable Fonts feature by calling the OrangeFontService.getFontFamily method in your app before the runApp method in your main file.

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  final orangeFontFamily = await OrangeFontFamily.getFontFamily();

  runApp(OudsApplication(fontFamily:orangeFontFamily));
}

When using OrangeCompactTheme, simply provide the font as a parameter.

  OrangeCompactTheme(
    orangeFontFamily
  )

Please note that the Flutter Downloadable Font feature works asynchronously, whether the font is already downloaded or not, and that default font family will be used if download fails.

The theme includes the following:

A color scheme with semantic tokens for light and dark modes,
Typography settings based on the defined font tokens,
Component tokens for consistency across the app's UI elements.

This theme is used for the visual styling of the Flutter application, ensuring a consistent user experience across both Android and iOS platforms.

Constructors

OrangeCompactTheme([String? orangeFontFamily]): Creates an instance of the Orange theme.

Properties

borderTokens → OudsBorderSemanticTokens: Border semantic tokens values used in the theme
no setteroverride
colorSemanticTokens → OudsColorSemanticTokens: Color semantic tokens values used in the theme
no setteroverride
darkThemeData → ThemeData: Defines the configuration of the overall visual Theme for a MaterialApp or a widget subtree within the app, specifically for the dark theme. This is used by OudsThemeTweakWidget when forcing or switching to dark mode.
no setteroverride
elevationTokens → OudsElevationSemanticTokens: Elevation semantic tokens values used in the theme
no setteroverride
fontFamily → String: Font family used in the theme You can provide your own theme font family fontFamily: 'Oswald'
no setteroverride
fontTokens → OudsFontSemanticTokens: Font semantic tokens values used in the theme
no setteroverride
gridSemanticTokens → OudsGridSemanticTokens: Grid semantic tokens values used in the theme
no setteroverride
hashCode → int: The hash code for this object.
no setterinherited
materialColorTokens → OudsMaterialColorTokens: Material color matching used in the theme
no setteroverride
name → String: Theme display name.
no setteroverride
opacityTokens → OudsOpacitySemanticTokens: Opacity semantic tokens values used in the theme
no setteroverride
orangeFontFamily ↔ String?: getter/setter pair
packageName → String: Package name used in the theme: Ex : 'ouds_theme_white_label'. This refers to the package containing the theme resources ensuring that the font and other assets are correctly loaded from it
no setteroverride
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
sizeSemanticTokens → OudsSizeSemanticTokens: Size semantic tokens values used in the theme
no setteroverride
spaceSemanticTokens → OudsSpaceSemanticTokens: Space semantic tokens values used in the theme
no setteroverride
themeData → ThemeData: Defines the configuration of the overall visual Theme for a MaterialApp or a widget subtree within the app, specifically for the light theme. This is used by OudsThemeTweakWidget when forcing or switching to light mode.
no setteroverride
typographyTokens → OudsTypography: Provides access to responsive typography styles based on the current theme and context.
no setteroverride

Methods

colorScheme(BuildContext context) → OudsColorScheme: Returns the color scheme for the active theme, using BuildContext to access the correct widget tree context.
override
componentsTokens(BuildContext context) → OudsComponentsTokens: Returns design tokens specific to OUDS components for the active theme, using BuildContext to access the correct widget tree context.
override
gridScheme(BuildContext context) → OudsGridScheme: Returns the grid scheme for the active theme, using BuildContext to access the correct widget tree context.
override
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
providersTokens(BuildContext context) → OudsProvidersTokens: Returns the global design tokens (colors, borders, etc.) for the active theme, using BuildContext to access the correct widget tree context.
override
sizeScheme(BuildContext context) → OudsSizeScheme: Returns the size scheme for the active theme, using BuildContext to access the correct widget tree context.
override
spaceScheme(BuildContext context) → OudsSpaceScheme: Returns the space scheme for the active theme, using BuildContext to access the correct widget tree context.
override
toString() → String: A string representation of this object.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited

OrangeCompactTheme class

Constructors

Properties

Methods

Operators

orange_compact_theme library