This Flutter package contains official UI elements of the SBB (Swiss Federal Railways) Design System Mobile. It allows an easy integration of SBB theming to your Flutter app (with the possibility of a custom color theming). Elements are optimized for dynamic TextSizes, VoiceOver, light & dark mode.

Table of Contents

Click to expand

• Table of Contents
• Getting Started
  • Supported platforms
  • In code usage
  • Example App
• Documentation
  • Design System Mobile specification
  • SBB internal documentation
  • Read on
• License
• Contributing
  • Testing
  • Coding Standards
  • Code of Conduct
  • Releasing
• Maintainer
• Credits

Getting Started

Supported platforms

In code usage

In order for the Theming to work, you need to add the SBBTheme.light / SBBTheme.dark to your app root. For a MaterialApp:

import 'package:sbb_design_system_mobile/sbb_design_system_mobile.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SBB DSM',
      theme: SBBTheme.light(),
      darkTheme: SBBTheme.dark(),
      home: const MyHomePage(),
    );
  }
}

Example App

The Flutter DSM demo application is currently only available in the SBB Enterprise Playstore (Android).

Documentation

Design System Mobile specification

The elements follow the design specifications found in Design System Mobile as closely as possible.

The pixel exact specifications can be found in the Figma (view only).

SBB internal documentation

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

• AppBakery libraries

Read on

• CODING_STANDARDS.md
• CONTRIBUTING.md
• LICENSE
• Getting Started SBB Design System
• Accessibility
• Colors
• Principles

License

This project is licensed under MIT.

Contributing

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.

Testing

This project is built and tested using Github Actions. On every PR request, a test workflow is triggered, which does the following:

• running all tests in the .\test\ dir. Failed golden tests will be uploaded to the job artifacts. The tests run on a macos runner.
• parse the CHANGELOG.md file and compare against the Keep A Changelog schema. This allows for automatic release notes from our Changelog.
• Build the example app in example for the minimum and latest supported Flutter SDK for both iOS and Android.

Coding Standards

See CODING_STANDARDS.md.

Code of Conduct

See CODE_OF_CONDUCT.md.

Releasing

See Release.md.

Maintainer

• Hoang Tran
• Nico Vidoni

Credits

In addition to the contributors on GitHub, we thank the following authors for their previous work:

• Patrice Müller
• Dominik Schmucki