DNB Design System 👨‍🎨

eufemia_flutter pub style: pedantic

preview

DISCLAIMER: This package is in an early stage

Eufemia

pub

Setup

Fonts and icons needs to be bundled with your app. Add the following to your pubspec.yaml:

flutter:
  uses-material-design: true

  fonts:
    - family: EufemiaIcons
      fonts:
        - asset: packages/eufemia/fonts/EufemiaIcons.ttf

    - family: DNB Sans
      fonts:
        - asset: packages/eufemia/fonts/DNB-Light.otf
          weight: 300
        - asset: packages/eufemia/fonts/DNB-Regular.otf
          weight: 400
        - asset: packages/eufemia/fonts/DNB-Medium.otf
          weight: 500
        - asset: packages/eufemia/fonts/DNB-Bold.otf
          weight: 600
        - asset: packages/eufemia/fonts/DNB-LightItalic.otf
          weight: 300
          style: italic
        - asset: packages/eufemia/fonts/DNB-RegularItalic.otf
          weight: 400
          style: italic
        - asset: packages/eufemia/fonts/DNB-MediumItalic.otf
          weight: 500
          style: italic
        - asset: packages/eufemia/fonts/DNB-BoldItalic.otf
          weight: 600
          style: italic

    - family: DNB Mono
      fonts:
        - asset: packages/eufemia/fonts/DNBMono-Light.otf
          weight: 300
        - asset: packages/eufemia/fonts/DNBMono-Regular.otf
          weight: 400
        - asset: packages/eufemia/fonts/DNBMono-Medium.otf
          weight: 500
        - asset: packages/eufemia/fonts/DNBMono-Bold.otf
          weight: 600
        - asset: packages/eufemia/fonts/DNBMono-LightItalic.otf
          weight: 300
          style: italic
        - asset: packages/eufemia/fonts/DNBMono-RegularItalic.otf
          weight: 400
          style: italic
        - asset: packages/eufemia/fonts/DNBMono-MediumItalic.otf
          weight: 500
          style: italic
        - asset: packages/eufemia/fonts/DNBMono-BoldItalic.otf
          weight: 600
          style: italic

How to use

Wrap your app in an Eufemia widget, and provide the EufemiaData with the palette, spacing, button and optionally darkPalette parameters:

Eufemia(
  data: EufemiaData(
    palette: EufemiaPaletteData.fallback(),
    spacing: EufemiaSpacingData.fallback(),
    button: EufemiaButtonThemeData.fallback(),
    darkPalette: EufemiaPaletteData.dark(),
  ),
),

To use Material widgets with Eufemia, e.g. in a MaterialApp tree, use the builder parameter:

Eufemia(
  data: EufemiaData(...),
  builder: (context, theme) {
    return MaterialApp(
      theme: theme,
      ...
    );
  }
),

Optionally, you can get a Material theme from EufemiaThemeAdapter:

final adapter = EufemiaThemeAdapter(context);

return MaterialApp(
  theme: adapter.theme,
  ...
);

The Eufemia provider with all the theming data can be accessed using

final eufemia = Eufemia.of(context)

Components

The Eufemia components are a set of widgets that are built from scratch and as specified by the Eufemia design system. All components are ready to use as children of the Eufemia widget, and require no additional setup.

For usage examples, check the example app

Palette

This API is subject to change

The EufemiaPaletteData class is a collection of colors that are used throughout the library of components. You can create your own, or use several presets, like the saga, standard, dark and privateBanking factories.

The palette provider can be accessed using

final palette = EufemiaPalette.of(context)

Typography

If using the included themes, fonts are automatically set up. Otherwise, specify the fontFamily and package properties:

TextStyle(
  fontFamily: 'DNB Sans',
  package: 'eufemia',
)

The typography provider can be accessed using

final typography = EufemiaTypography.of(context)

Spacing

The EufemiaSpacingData class defines the different kinds of spacing used throughout the app. By default, it provides the standard spacings defined by the Eufemia design system:

  • extraSmall: 4.0
  • small: 8.0
  • medium : 16.0
  • large: 24.0
  • extraLarge: 32.0
  • extraExtraLarge: 40.0

The spacing provider can be accessed using

final spacing = EufemiaSpacing.of(context)

Desktop

Desktop targets are supported but not currently tested extensively, but may be prioritized in the future. a

Web

Web targets are supported, but the Web APIs are unstable, and the target is not tested at all. If building a web application, check out eufemia for web for a web native version.

Libraries

components
The Eufemia components are a set of widgets that are built from scratch and as specified by the Eufemia design system. All components are ready to use as children of the Eufemia widget, and require no additional setup. [...]
eufemia
Implementation of the DNB's Eufemia design system. [...]
palette
Provides color and theming functionality. The EufemiaPaletteData class is a collection of colors that are used throughout the library of components. You can create your own, or use several presets, like the saga, standard, dark and privateBanking factories. [...]
spacing
Provides spacing- padding and layout features. [...]
typography
Provides font assets, typography and text styling features. [...]