eufemia 0.5.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 33

DNB Design System 👨‍🎨 #

preview

DISCLAIMER: This package is in an early stage

Themes #

Two base themes are provided:

  • Eufemia.lightTheme()
  • Eufemia.darkTheme()

These can be extended using the copyWith method. Read more about ThemeData overrides here.

Fonts #

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

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

Desktop #

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

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 version.

Changelog #

0.5.0 #

  • Changes color on tapped buttons
  • Finetunes padding for SegmentedControl
  • Adds new GradientWidget component
  • Adds new language features
  • Tweaks to StaticList, Cell, ScrollableList, Shimmer, shadows, sheets

0.4.0 #

  • Added Segmented Control component
  • Refactored components
  • Added adaptive StaticList/ScrollableList
  • Tweaked dark mode colors
  • Added extensions
  • Added flippable parameter to PaymentCard

BREAKING CHANGES #

  • TabItem renamed to TabItemData
  • Updated PaymentCard API

0.3.0 #

  • Added DNB Sans variants

BREAKING CHANGES #

  • Replaced Menlo-Regular with DNB Mono

0.2.8 #

  • Added macOS, web examples
  • Fixed InputField borders in dark mode
  • Updated to latest Material TextTheme API

0.2.7 #

  • Added InputField
  • Added Checkmark

0.2.6+1 #

  • Fixed borderRadius in circular shimmer

0.2.6 #

  • Added license

0.2.5 #

  • Introduced circular/custom-shaped shimmer

0.2.4 #

  • Switched to native SnackBar for toasts

0.2.3 #

  • Added shimmer/skeleton
  • Added shimmerList to Cell

0.2.2+2 #

  • ContentCard now clips its children correctly

0.2.1+1 #

  • Removed unneeded dependencies

0.2.1 #

  • BREAKING: Switch -> EufemiaSwitch
  • BREAKING: Slider -> EufemiaSlider

0.2.0+3 #

  • Tweaks to BottomTabBar padding

0.2.0+2 #

  • Added option to un-center leading widgets in a Cell
  • Expanded touch area on bottom app bar items

0.2.0+1 #

  • Tweaked BottomAppBarItem padding

0.2.0 #

  • New colors, font and tweaks

0.1.3+4 #

  • Added contentPadding parameter to Cell

0.1.3+3 #

  • Added shrink parameter to Switches

0.1.3+2 #

  • Added bottom padding parameter to all lists

0.1.3+1 #

  • Removed duplicate bottom border in StaticList

0.1.3 #

  • Added static lists

0.1.2+6 #

  • Fixed a bug causing Hero widgets to be duplicated in lists

0.1.2+5 #

  • Changed the behavior of ScrollableList and StaticList with Cells and children to automatically add a border to the end of the list

0.1.2+4 #

  • Exposing height of PaymentCard

0.1.2+3 #

  • Added padding to trailing text in cells

0.1.2+2 #

  • Added parameters for content card borders and separators

0.1.2+1 #

  • Added shadow parameter for content cards

0.1.2 #

  • Added company card designs

0.1.1+2 #

  • Fixed alignment of trailing widgets combined with implied navigation

0.1.1+1 #

  • Ability to combine trailing widget and implied navigation in Cells

0.1.1 #

  • Added a new font
  • Added assets/splash screens to example app
  • Added some system/native controls
  • Dark mode optimalizations

0.1.0+1 #

  • Fixed the Kenyan flag

0.1.0 #

  • Initial release
  • Most components/graphics/icons/typography implemented
  • Theming & dark mode is still WIP

example/lib/main.dart

import 'package:eufemia/eufemia.dart';
import 'package:eufemia_example/home.dart';
import 'package:eufemia_example/routes.dart';
import 'package:eufemia_example/views/buttons.dart';
import 'package:eufemia_example/views/components.dart';
import 'package:eufemia_example/views/components/bars.dart';
import 'package:eufemia_example/views/components/cards.dart';
import 'package:eufemia_example/views/components/cells.dart';
import 'package:eufemia_example/views/components/input_fields.dart';
import 'package:eufemia_example/views/components/controls.dart';
import 'package:eufemia_example/views/components/snackbars.dart';
import 'package:eufemia_example/views/components/spinner.dart';
import 'package:eufemia_example/views/graphics/flags.dart';
import 'package:eufemia_example/views/graphics/graphics.dart';
import 'package:eufemia_example/views/graphics/payment_cards.dart';
import 'package:eufemia_example/views/graphics/logos.dart';
import 'package:eufemia_example/views/icons.dart';
import 'package:eufemia_example/views/system.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Eufemia',
      theme: Eufemia.lightTheme(),
      darkTheme: Eufemia.darkTheme(),
      home: HomeView(),
      routes: {
        Routes.components: (context) => ComponentView(),
        Routes.buttons: (context) => ButtonsView(),
        Routes.input_fields: (context) => InputFieldsView(),
        Routes.cards: (context) => CardsView(),
        Routes.controls: (context) => ControlsView(),
        Routes.snackbars: (context) => SnackbarsView(),
        Routes.cells: (context) => CellsView(),
        Routes.graphics: (context) => GraphicsView(),
        Routes.logos: (context) => LogosView(),
        Routes.flags: (context) => FlagsView(),
        Routes.graphics_cards: (context) => PaymentCardsView(),
        Routes.bars: (context) => BarsView(),
        Routes.icons: (context) => IconsView(),
        Routes.system: (context) => SystemView(),
        Routes.spinner: (context) => SpinnerView(),
      },
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  eufemia: ^0.5.0

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter pub get

Alternatively, your editor might support pub get or flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:eufemia/eufemia.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
35
Health:
Code health derived from static analysis. [more]
0
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
80
Overall:
Weighted score of the above. [more]
33
Learn more about scoring.

We analyzed this package on Apr 1, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health issues and suggestions

Fix lib/src/theme.dart. (-98.22 points)

Analysis of lib/src/theme.dart failed with 14 errors, including:

line 183 col 7: The named parameter 'headline4' isn't defined.

line 184 col 7: The named parameter 'headline5' isn't defined.

line 185 col 7: The named parameter 'headline6' isn't defined.

line 186 col 7: The named parameter 'subtitle1' isn't defined.

line 187 col 7: The named parameter 'bodyText2' isn't defined.

Fix lib/src/components/cell.dart. (-57.81 points)

Analysis of lib/src/components/cell.dart failed with 3 errors:

line 156 col 58: The getter 'headline6' isn't defined for the class 'TextTheme'.

line 174 col 60: The getter 'bodyText2' isn't defined for the class 'TextTheme'.

line 245 col 32: The getter 'bodyText1' isn't defined for the class 'TextTheme'.

Fix lib/src/graphics/cards/payment_card.dart. (-43.75 points)

Analysis of lib/src/graphics/cards/payment_card.dart failed with 2 errors:

line 236 col 48: The getter 'bodyText1' isn't defined for the class 'TextTheme'.

line 250 col 48: The getter 'bodyText1' isn't defined for the class 'TextTheme'.

Fix additional 4 files with analysis or formatting issues. (-100 points)

Additional issues in the following files:

  • lib/src/components/scrollable_list.dart (1 error)
  • lib/src/components/segmented_control.dart (1 error)
  • lib/src/extensions.dart (1 error)
  • lib/src/system/bottom_sheet_service.dart (1 error)

Maintenance issues and suggestions

No valid SDK. (-20 points)

The analysis could not detect a valid SDK that can use this package.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
flippable_box ^1.0.6 1.0.6
flutter 0.0.0
flutter_slidable ^0.5.4 0.5.4
flutter_svg ^0.17.3+1 0.17.3+1
meta ^1.1.8 1.1.8
recase ^3.0.0 3.0.0
shimmer ^1.1.0 1.1.0
snack ^1.0.4 1.0.4
sticky_headers ^0.1.8+1 0.1.8+1
Transitive dependencies
charcode 1.1.3
collection 1.14.11 1.14.12
convert 2.1.1
path_drawing 0.4.1
path_parsing 0.1.4
pedantic 1.9.0
petitparser 3.0.2
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
xml 3.7.0 4.1.0
Dev dependencies
flutter_test