Dyte's UI kit embraces the Atomic design principle to ensure a seamless and adaptable user interface across different devices. The UI kit is built on the concept of design tokens, which are fundamental values like fonts, colors, spacing, and borders that maintain the design's consistency and flexibility.
Understanding Design Tokens
What are Design Tokens?
Design tokens act as a single source of truth in a design system, storing crucial design decisions. By having a clear, centralized set of values, design tokens provide an efficient way to apply and manage design principles across various platforms.
The Role of ThemeData and DyteDesignToken
ThemeData is a concept in Flutter which allows customization of the UI appearance. DyteDesignToken builds on this and brings specific customizable properties such as backgroundColor, textOnBackground, and different swatches for brand-related colors.
Customization Options
To customize the UI Kit, you have two primary methods:
-
Passing a Single Color: Individual colors like
backgroundColorandbrandColorcan be directly set to impact the UI's appearance. -
Using a Color Swatch: Define a
DyteColorSwatchwith specific color values at different keys (like 300, 400, etc.) to create a range of tones for elements like the brand color or background.
Example of Creating a Color Swatch
final primarySwatch = DyteColorSwatch(
500,
{
300: Colors.blue.shade300,
400: Colors.blue.shade400,
500: Colors.blue.shade500,
600: Colors.blue.shade600,
700: Colors.blue.shade700,
},
);
Border Styles and Widths
DyteBorderRadius
DyteBorderRadius tokens define the corner rounding of UI components, allowing for values such as sharp, rounded, extraRounded, or circular.
DyteBorderWidth
Likewise, DyteBorderWidth tokens offer a way to specify the thickness of borders with options like none, thin, or fat.
Example of UI Customization
Customizing the Flutter UI Kit with design tokens is done by creating an instance of DyteUIKitInfo and passing in custom values for each token. For instance:
final uikitInfo = DyteUIKitInfo(
meetingInfo,
designToken: DyteDesignToken(
colorToken: DyteColorToken(
borderRadius: DyteBorderRadius.circular,
borderWidth: DyteBorderWidth.fat,
backgroundColor: Colors.black,
textOnBrand: Colors.white,
textOnBackground: Colors.white,
danger: Colors.red,
success: Colors.green,
warning: Colors.yellow,
brandColorSwatch: DyteColorSwatch(
500,
{
300: Colors.blue.shade300,
400: Colors.blue.shade400,
500: Colors.blue.shade500,
600: Colors.blue.shade600,
700: Colors.blue.shade700,
},
)
),
)
);
In this example, a complete DyteDesignToken is built, demonstrating how a combination of border radius, border width, background color, and text color on brand and background can be customized. Additionally, it shows how a brand color swatch is implemented to give depth and variety to the brand-related UI elements.
Through these design tokens and customization techniques, Dyte's Flutter UI Kit enables developers to adapt the user interface to align with branding requirements while ensuring a consistent user experience across different platforms.
Tags: #DyteDesignSystem, #FlutterCustomization, #UIKit, #DesignTokens