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'),
);
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,
);
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.
External links
- 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.