OrangeTheme class

Orange brand theme implementation for OUDS Flutter.

OrangeTheme provides a complete implementation of the Orange brand design system, including colors, typography, spacing, and component styles for both light and dark modes.

Font Configuration

This theme uses Helvetica Neue as its primary font family. Due to licensing restrictions, font files are not bundled with this library.

Font Sources

Option 1: Download from CDN (Recommended for development)

Fonts are automatically downloaded from Orange's CDN and cached locally:

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

  // Automatic locale-based loading (Arabic or Latin)
  final fontFamily = await OrangeFontProvider.loadFromCdn();

  runApp(MyApp(
    theme: OrangeTheme(fontFamily),
  ));
}

Option 2: Bundle fonts as assets (Recommended for production)

  1. Download Helvetica Neue fonts from Orange Brand Portal
  2. Add font files to your fonts/ directory:
app/fonts/
├── helvetica_neue_arabic_light.ttf
├── helvetica_neue_arabic_roman.ttf
├── helvetica_neue_arabic_bold.ttf
├── helvetica_neue_latin_roman.ttf
├── helvetica_neue_latin_medium.ttf
└── helvetica_neue_latin_bold.ttf
  1. Configure in pubspec.yaml (NO weight specification - managed by API):
flutter:
  fonts:
    - family: HelveticaNeue-Arabic-Light
      fonts:
        - asset: fonts/helvetica_neue_arabic_light.ttf
    - family: HelveticaNeue-Arabic
      fonts:
        - asset: fonts/helvetica_neue_arabic_roman.ttf
    - family: HelveticaNeue-Arabic-Bold
      fonts:
        - asset: fonts/helvetica_neue_arabic_bold.ttf
    - family: HelveticaNeue
      fonts:
        - asset: fonts/helvetica_neue_latin_roman.ttf
    - family: HelveticaNeue-Medium
      fonts:
        - asset: fonts/helvetica_neue_latin_medium.ttf
    - family: HelveticaNeue-Bold
      fonts:
        - asset: fonts/helvetica_neue_latin_bold.ttf
  1. Load fonts at app startup (blocking):
Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // Manual configuration
  final orangeFontFamily = OrangeFontFamily(
    latin: OrangeHelveticaNeueLatin.bundled(
      regularFontRes: "fonts/helvetica_neue_latin_roman.ttf",
      mediumFontRes: "fonts/helvetica_neue_latin_medium.ttf",
      boldFontRes: "fonts/helvetica_neue_latin_bold.ttf",
    ),
    arabic: OrangeHelveticaNeueArabic.bundled(
      lightFontRes: "fonts/helvetica_neue_arabic_light.ttf",
      regularFontRes: "fonts/helvetica_neue_arabic_roman.ttf",
      boldFontRes: "fonts/helvetica_neue_arabic_bold.ttf",
    ),
  );
  final fontFamilyName = await OrangeFontProvider.loadFromAssets(orangeFontFamily);

  runApp(MyApp(
    theme: OrangeTheme(fontFamilyName),
  ));
}

Option 3: Non-blocking font loading (Recommended for fast startup)

Use OrangeFontService to load fonts in background without blocking app startup:

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // Load fonts in background (non-blocking)
  OrangeFontService.instance.loadFromCdn();

  runApp(MyApp());  // App starts immediately with fallback fonts
}

Font Weights

All font loading methods automatically include all required weights:

  • Light (300): Helvetica Neue Light
  • Regular (400): Helvetica Neue Roman
  • Medium (500): Helvetica Neue Medium (Latin only)
  • Bold (700): Helvetica Neue Bold

Locale Support

The provider automatically detects device locale and loads appropriate fonts:

  • Arabic (ar): Loads Helvetica Neue Arabic variants
  • Other locales: Loads Helvetica Neue Latin variants

Fallback Fonts

If Helvetica Neue fonts fail to load, the theme will fallback to system default fonts:

  • Roboto (for Android devices)
  • SF Pro Display (for iOS devices)

Theme Features

  • Color tokens: Semantic color tokens for light and dark modes
  • Typography: Complete typography scale with responsive sizing
  • Spacing: Consistent spacing system
  • Components: Pre-styled components (buttons, inputs, navigation, etc.)
  • Responsive: Adapts to different screen sizes (mobile, tablet)

Example Usage

MaterialApp(
  theme: OudsTheme(
    theme: OrangeTheme(fontFamily),
  ).themeData,
  darkTheme: OudsTheme(
    theme: OrangeTheme(fontFamily),
  ).darkThemeData,
  home: MyHomePage(),
)

Constructors

OrangeTheme([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
Gets the font family name to be used in the application.
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