OUDS Core Flutter Library

OUDS Core Flutter provides Orange components to developers.
Report bug · Request feature · Flutter documentation · Wiki · Design system

Content

This repository contains the OUDS Core Flutter library that provides Orange components for its unified design system.

You can find the detailed technical documentation online, as well as the whole design system.

OUDS

OUDS stands for Orange Unified Design System.

This is a new design system, again, but unified, aiming to merge all requirements of Orange brands and affiliates to provide a unique design system, consistent across all platforms and for all countries, companies, users, and apps. Guidelines for TV, Flutter, Android, iOS, and web environments will be integrated into a "cohesive" approach, and any Orange-related software, including brand apps like Parnasse and Sosh, Orange Innovation Cup apps, and apps for Orange countries and affiliates will utilize this project in the future.

The project is open source, and topics such as accessibility and ecodesign will also be addressed.

It is intended to replace internal frameworks and the previous ODS in the near future.

Tokens version

• Version: 1.1.0.

Other OUDS Libraries

• ouds_theme_contract: Contains the semantic tokens and component tokens.
• ouds_theme_orange: Contains the theme for the Orange brand.

Build

Generate l10n files

Development process

• Developers modify ouds_flutter_en.arb (and/or other language files).
• To have the translations in the app launched locally, run flutter gen-l10n in the ouds_core/lib directory.
  • This will regenerate:
    • ouds_flutter_localizations.dart
    • ouds_flutter_localizations_en.dart
    • other language files.
• These files must not be committed and pushed.

Release the library

• Pre-step: run flutter gen-l10n before creating and publishing the package to generate ouds_flutter_localizations*.dart.

How install

Pubspec.yaml

  # Global raw token
  ouds_global_raw_tokens: ^0.4.0
  # Core
  ouds_core: ^0.4.0
  # Orange Theme contract
  ouds_theme_contract: ^0.4.0
  # Orange Theme
  ouds_theme_orange: ^0.4.0

dependency_overrides:
  intl: ^0.20.2

How to use

Localization

To set up localization for the ouds_core library, you need to set the OudsLocalizations.delegate in the localizationsDelegates properties of the MaterialApp.

    return MaterialApp(
      title: 'Title',
      theme: OrangeTheme().themeData,
      darkTheme: OrangeTheme().darkThemeData,
      debugShowCheckedModeBanner: false,
      home: const HomePage(title: 'title'),
      builder: (context, child) {
        return OudsTheme(
          themeContract: OrangeTheme(),
          themeMode: ThemeMode.system,
          onColoredSurface: false,
          child: child ?? Container(),
        );
      },
    );

Copyright and license

Code released under the MIT License. For images and other assets, please refer to the NOTICE.txt.