Design system flutter - A framework contains SBB (Swiss Federal Railways) UI elements for Flutter Apps

Overview

Design System Mobile for Flutter

Design System Mobile in Flutter (yes, it could be that easy...).

This framework contains SBB (Swiss Federal Railways) UI elements for Flutter Apps. It allows an easy integration of SBB theming to your app (or a custom color theming of your choice). All elements are optimized for dynamic TextSizes, VoiceOver, light & dark mode as well as for different SizeClasses.

Note: This plugin is still under development and some APIs might change. Feedback and Pull Requests are most welcome!

Usage


To use this plugin, add design_system_flutter as a dependency in your pubspec.yaml file. As this is a private plugin, you must add it as a Git dependency:

dependencies:
  design_system_flutter:
    git:
      url: https://github.com/SchweizerischeBundesbahnen/design_system_flutter.git

Getting Started


Dart/Flutter Integration

From your Dart code, you need to import the plugin and instantiate it:

import 'package:design_system_flutter/design_system_flutter.dart';

After that simply use the provided fonts, styles, colors, widgets...

SBB internal documentation

A the moment, the following documents are only available to persons internal to SBB:

Getting help

If you need help, you can reach out to us by e-mail: [email protected]

Getting involved

Generally speaking, we are welcoming contributions improving existing UI elements or fixing certain bugs. We will also consider contributions introducing new design elements, but might reject them, if they do not reflect our vision of SBB Design System.

General instructions on how to contribute can be found under Contributing.

Authors

  • Tran Hoang
  • Raab Ulrich
  • Mosberger Dominik
  • Schmucki Dominik
  • Müller Patrice

License

Code released under the MIT.

You might also like...

Implements Microsoft's Fluent Design System in Flutter.

Implements Microsoft's Fluent Design System in Flutter.

fluent_ui Design beautiful native windows apps using Flutter Unofficial implementation of Fluent UI for Flutter. It's written based on the official do

Dec 29, 2022

Flutter UI library based on IBM's Carbon Design System 💎

Flutter UI library based on IBM's Carbon Design System 💎

Flutter Carbon ‌Carbon is IBM’s open-source design system for products and experiences. With the IBM Design Language as its foundation, the system con

Jan 5, 2023

A Dart client for the NATS messaging system. Design to use with Dart and Flutter.

Dart-NATS A Dart client for the NATS messaging system. Design to use with Dart and flutter. Flutter Web Support by WebSocket client.connect(Uri.parse(

Nov 18, 2022

Stacked UI design system built for Flutter.

TODO: Put a short description of the package here that helps potential users know whether this package might be useful for them. Features TODO: List w

Jan 2, 2022

Provide powerfull tools to help you build your Flutter design system.

Provide powerfull tools to help you build your Flutter design system.

Provide powerfull tools to help you build your design system. About flutter_design contains packages to help you bootstrap your design system with a w

Dec 3, 2022

Flutter implementation of the french government design system.

Flutter implementation of the french government design system.

Flutter DSFR Flutter implementation of the french government design system. The full design specifications is available here: https://gouvfr.atlassian

Dec 22, 2022

The company's design system

TODO: Put a short description of the package here that helps potential users know whether this package might be useful for them. Features TODO: List w

Nov 23, 2021

A zero-dependency web framework for writing web apps in plain Dart.

Rad Rad is a frontend framework for creating fast and interactive web apps using Dart. It's inspired from Flutter and shares same programming paradigm

Dec 13, 2022

🚗 Apple CarPlay for Flutter Apps. Aims to make it safe to use apps made with Flutter in the car by integrating with CarPlay.

🚗 Apple CarPlay for Flutter Apps. Aims to make it safe to use apps made with Flutter in the car by integrating with CarPlay.

CarPlay with Flutter 🚗 Flutter Apps now on Apple CarPlay! flutter_carplay aims to make it safe to use iPhone apps made with Flutter in the car by int

Dec 26, 2022
Comments
Releases(0.7.0)
  • 0.7.0(Nov 25, 2022)

    What's Changed

    • warning in tabBar, new segmentedButton, themeExtensions by @mosberger in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/31
    • Feature/web design 2 by @cyrillmeyer in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/34
    • Feature/sbbincl 272 by @mosberger in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/35
    • SBBINCL-352 implement landscape design of the onboarding widget by @mosberger in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/36
    • Feature/sp 7448 by @soracel in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/37
    • fix onboarding card semantics sorting by @mosberger in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/38
    • Feature/version 0.7.0 by @VanHoangTran in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/39

    New Contributors

    • @cyrillmeyer made their first contribution in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/34
    • @soracel made their first contribution in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/37

    Full Changelog: https://github.com/SchweizerischeBundesbahnen/design_system_flutter/compare/0.6.0...0.7.0

    Source code(tar.gz)
    Source code(zip)
  • 0.6.0(May 19, 2022)

    Support for Flutter 3.0.0


    • make design system fit for flutter 3 by @mosberger in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/30

    Full Changelog: https://github.com/SchweizerischeBundesbahnen/design_system_flutter/compare/0.5.0...0.6.0

    Source code(tar.gz)
    Source code(zip)
  • 0.5.0(May 19, 2022)

    Support for Web (SBB Web Lean)

    Added

    • Added SBBLeanLogo (for web)
    • Added SBBBreadcrumb (for web)
    • Added SBBWebHeader (for web)
    • Added SBBResponsive (for web)
    • Added SBBSideBar (for web)
    • Added SBBMenuButton (for web)
    • Added SBBUserMenu (for web)
    • SBBPrimaryButton: Added different theme based on hostType (for web)
    • SBBTheme:Added field hostType
    • SBBIcons: Added new icons
    • SBBThemeData: Added function allStates
    • SBBThemeData: Added function resolveStateWith
    • SBBTextField: Added field autofocus
    • SBBTextFormField: Added field autofocus
    • SBBTextField: Added field autofocus
    • SBBTextFormField: Added field autofocus
    • SBBMultiSelect: Added field selectionValidation and static function defaultSelectionValidation for custom selection validation
    • SBBSelect: Added field allowMultilineLabel
    • SBBSelect: Added field hint
    • SBBAccordion: Added field titleMaxLines (with default value null, meaning titles are now multiline by default)
    • SBBAccordion: Added constructor single for simpler usage when only one item is needed
    • SBBListHeader: Added field maxLines (with default value null, meaning list headers are now multiline by default)
    • SBBListItem: Added field titleMaxLines (with default value null, meaning titles are now multiline by default)
    • SBBListItem: Added field subtitleMaxLines (with default value null, meaning subtitles are now multiline by default)

    Changed

    • SBBThemeData: Adjusted some colors to match the current specifications
    • SBBOnboarding: Padding now defined by SBBThemeData.defaultRootContainerPadding
    • SBBSelect: Adjusted paddings to match the current specifications
    • SBBMultiSelect: Adjusted paddings to match the current specifications
    • SBBRadioButtonListItem: Adjusted paddings to match the current specifications
    • SBBSelect: Field label is now optional because there is now a variant without label
    • SBBAccordion: Adjusted paddings, text style and icon rotation to match the current specifications

    Fixed

    • SBBCheckboxListItem: Added missing bottom padding for multi line without secondary label

    • Feature/UI changes by @VanHoangTran in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/10
    • Feature/UI changes by @VanHoangTran in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/11
    • SBBMultiSelect: Added support for custom validation by @VanHoangTran in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/12
    • Feature/UI changes by @VanHoangTran in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/14
    • SBBSelect: Added field hint by @VanHoangTran in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/15
    • Feature/UI changes by @VanHoangTran in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/17
    • SBBAccordion: Adjusted paddings, text style and icon rotation to ma… by @VanHoangTran in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/18
    • SBBListHeader: Added field maxLines (with default value null, m… by @VanHoangTran in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/19
    • Feature/breadcrumb by @smallTrogdor in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/21
    • fix exception in tab bar, add glass effect behind tab bar by @mosberger in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/20
    • SBBTextField: Adjusted paddings to match the current specifications by @VanHoangTran in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/22
    • SBBThemeData: Adjusted some colors to match the current specifications by @VanHoangTran in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/23
    • improve semantics of modals by @mosberger in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/24
    • Feature/web design by @smallTrogdor in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/16
    • Updated README.md by @VanHoangTran in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/25
    • Feature/textfield autofocus by @brosnic in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/26
    • Updated CHANGELOG.md by @VanHoangTran in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/27
      • SBBListItem: Added field titleMaxLines (with default value null, meaning titles are now multiline by default) - SBBListItem: Added field subtitleMaxLines (with default value null, meaning subtitles are now multiline by default) by @brosnic in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/28

    New Contributors

    • @smallTrogdor made their first contribution in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/21
    • @brosnic made their first contribution in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/26

    Full Changelog: https://github.com/SchweizerischeBundesbahnen/design_system_flutter/compare/0.4.0...0.5.0

    Source code(tar.gz)
    Source code(zip)
  • 0.4.0(May 19, 2022)

    Added

    • Added SBBTabBar
    • Added global function showCustomSBBModalSheet
    • SBBModalSheet: Added field useRootNavigator (with default value true)
    • SBBModalSheet: Added constructor custom for header customizing
    • SBBToast: Added field bottom

    Changed

    • SBBTextStyles: Adjusted fontSize and height values to match the current specifications
    • SBBListHeader: Adjusted paddings to match the current specifications
    • SBBTextField: Adjusted paddings to match the current specifications

    Removed

    • SBBListHeader: Removed fields icon and onCallToAction to match the current specifications
    • SBBTextField: Removed field alignLabelWithHint

    Fixed

    • SBBModalSheet: Fine line that sometimes was visible below the header is now gone

    • Feature/UI changes by @VanHoangTran in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/6
    • fix ugly edge in curve when changing tab by @mosberger in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/7
    • Feature/UI changes by @VanHoangTran in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/8
    • adjusted spacing to match design specifications by @VanHoangTran in https://github.com/SchweizerischeBundesbahnen/design_system_flutter/pull/9

    Full Changelog: https://github.com/SchweizerischeBundesbahnen/design_system_flutter/compare/0.3.0...0.4.0

    Source code(tar.gz)
    Source code(zip)
  • 0.3.0(May 19, 2022)

Owner
Swiss Federal Railways (SBB)
Swiss Federal Railways (SBB)
Canton Design System elements and resources for Flutter.

Canton UI Canton UI elements and resources for Flutter. Examples in Apps Notes App News App Elisha Description This includes things such as themes (co

Carlton Aikins 10 Dec 17, 2022
It's OK to love Flutter and hate hand-coding design elements. Parabeac-Core converts design files into Flutter code.

Parabeac-Core Parabeac-Core converts design files into Flutter code driven by open-source & community. Contribute · Discord Community · Designer Proto

Parabeac 536 Jan 4, 2023
A periodic table app with 3D view of the elements built using flutter.

A flutter app which takes you on a 3d visualisation of the 118 elements of the periodic table. promo.mp4 Tech Stack Deployed using How it all began It

Shanwill Pinto 48 Nov 16, 2022
A modern app made with Flutter to track the chemical elements.

Elements A modern app to track the chemical elements. Including all 118 elements, with their weight, radiation, consistency, type, block, and electron

Kristóf Kékesi 13 Nov 28, 2021
A #Flutter package that let you draw a flow chart diagram with different kind of customizable elements

Flutter Flow Chart A package that let you draw a flow chart diagram with different kind of customizable elements. Dashboards can be saved for later us

Marco Bavagnoli 50 Jan 1, 2023
A simple widget for having UI elements that respond to taps with a spring animation.

spring_button A simple widget for having child widgets that respond to gestures with a spring animation. Media | Description | How-to-Use Media Watch

AliYigitBireroglu 73 Oct 26, 2022
This repository contains Collection of UIs made using Flutter. Original Design of all the UIs were created by someone else. I tried to recreate those UIs using Flutter

Flutter-UIs-Collection This repository contains Collection of UIs made using Flutter. Original Design of all the UIs were created by someone else. I t

Mohak Gupta 45 Nov 26, 2022
Flying Fish is full-stack Dart framework - a semi-opinionated framework for building applications exclusively using Dart and Flutter

Flying Fish is full-stack Dart framework - a semi-opinionated framework for building applications exclusively using Dart and Flutter.

Flutter Fish 3 Dec 27, 2022
Intel Corporation 238 Dec 24, 2022
The ROHD Verification Framework is a hardware verification framework built upon ROHD for building testbenches.

ROHD Verification Framework The ROHD Verification Framework (ROHD-VF) is a verification framework built upon the Rapid Open Hardware Development (ROHD

Intel Corporation 18 Dec 20, 2022