eufemia 3.0.3 eufemia: ^3.0.3 copied to clipboard
A set of Flutter widgets and reusable UI components from DNB's design system
DNB Design System 👨🎨 #
DISCLAIMER: This package is in an early stage
Eufemia #
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.