The definitive guide to implementing a Design System in Flutter apps
Tampa, Florida
Gabriel Araujo
Software Engineer @ Revelo
Open source contributor:
Dev since 2021
2 production apps - Revelo Go and Revelo Jobs
Tampa, Florida
Tampa, Florida
A design system is a comprehensive collection of design principles, guidelines, and reusable components that form the foundation of your application's user interface.
Material Design
Source: https://flutter.github.io/samples/material_3.html
A real life example: Revelo's Everest
Why, though?
Material and other Design Systems allow developers to focus on the most important problem they should be solving: generating value for their businesses as fast as possible.
Tampa, Florida
Design tokens are the building blocks of a design system, its atomic units.
Color
tokens
Color
tokens
Typography
tokens
Typography
tokens
Tampa, Florida
Components are the reusable building blocks that make up your app's interface like widgets, buttons, cards, and other UI elements that users interact with.
Components
Components
Source: https://flutter.github.io/samples/material_3.html
Real life example
Tampa, Florida
Flutter uses Material
by default
Can you customize Material?
50%
Use more than
of this large number slide
50%
Use more than
of this large number slide
50%
Material is excellent if you follow it by the book.
However, it is also complex.
If Material is so powerful, when does it stop being the best solution?
of this large number slide
How would you solve this problem of using both primary and secondary colors in your app?
x2
We thought that this would not be ideal, so we came up with our own way to do theming.
Meet ThemeXpert
Tampa, Florida
ThemeXpert was built to be fully customizable and flexible to fit your needs
APP THEME
SECONDARY THEME
It makes changing look & feel as easy as pie
It does not depend on any components
You can set it up in 4 simple steps
AppTheme
2. Add ThemeXConfiguration to the top of your widget tree
ThemeXConfiguration
3. Wrap your app or widgets with ThemeXWrapper
ThemeXWrapper
4. Apply theme tokens in your UI
Apply tokens in the UI
Let's see how it works, together!
What we'll do:�1- Implement themes with ThemeXpert
2- Implement dark mode
3- (Bonus) Rebrand an app
Our app for today
Github repository
Thank you!
Tampa, Florida
Q&A
Tampa, Florida