Introduction

Get started as a mobile engineer

Installing

The mobile version of the Mews Design System is distributed as a Flutter package and is available at the pub.dev.

To install and use this package in your project you need to add it to the pubspec.yaml file


                                                        
                                                        
                                                            dependencies:
                                                          optimus:
                                                        
                                                            

The code itself is open-sourced and could be found at the mobile open-sourced mono repo. This mono repo has all our opensourced packages, that are also available at pub.dev

Using the DS package

After adding the package to the list of dependencies, you can start using its components in your project and the IDE of your choice will suggest you to import it. Browsing this documentation you will find the exact name of the component. A basic rule of thumb that it starts with Optimus, for example button is OptimusButton.


                                                        
                                                        
                                                            OptimusButton(
                                                                          onPressed:
                                                                             () {
                                                                                  print('Button is pressed); 
                                                                                }
                                                                          size: OptimusWidgetSize.large,
                                                                          variant: OptimusButtonVariant.primary,
                                                                          leadingIcon: Icon(OptimusIcons.delete),
                                                                          child: Text('Button Text'),
                                                                        );
                                                        
                                                            

Example of using a primary button, with text "Button Text" , leading icon delete and some custom onPress action.

Tokens and themes

Components are using the shared tokens from the Design System Tokens repository.

Each component is designed to follow a defined look, to ensure the UX is consistent across all our products. For cases, when the default look is not sufficient you can override the token value. You can wrap the whole application with the OptimusTheme InheritedWidget that will provide tokens for its children down the widget tree. While creating the OptimusTheme instance you can override the values.


                                                        
                                                        
                                                            OptimusTheme(
                                                                          lightTheme: OptimusThemeData(
                                                                            brightness: Brightness.light,
                                                                            colors: const OptimusColors(Brightness.light), //legacy. soon to be replaced with tokens
                                                                            tokens: OptimusTokens.light.copyWith(
                                                                              textStaticInverse: Colors.red,
                                                                              borderAlertInfo: Colors.blue,
                                                                            ),
                                                                          ),
                                                                          child: child,
                                                        );
                                                        
                                                            

Example of overriding the tokens values for all child widgets that are down the widget tree inside OptimusTheme.

 

By varying the scope of the OptimusTheme you can achieve a detailed custom look. Currently, we're supporting light and dark themes and you can override both of them. Our package is open-sourced and you can easily get to the value that you need to override to achieve your desired look.

  • Storybook - a web page created for showcasing our mobile design system.
  • Design Tokens Repository - a shared repository that ensures all our design system components share the same fundamentals.

Need assistance? Contact us in our #rnd-designsystem slack channel.