Customizing UI with Dyte’s Flutter UI Kit

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:

  1. Passing a Single Color: Individual colors like backgroundColor and brandColor can be directly set to impact the UI's appearance.

  2. Using a Color Swatch: Define a DyteColorSwatch with 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

https://docs.dyte.io/flutter/design-token

React Native UI Kitten: A Comprehensive UI Solution

UI Kitten is a feature-rich React Native UI library designed for creating impressive cross-platform mobile applications. It leverages the Eva Design System to promote design consistency and scalability. The library provides a collection of general-purpose UI components which are styled uniformly. One of the key features is its dynamic theming capability, allowing for theme changes at runtime without the necessity to reload the application.

Key Features and Components

UI Kitten offers over 25 general-purpose components, including:

  • Theming System: Allows customization and real-time changes.
  • SVG Eva Icons support: Provides integration with Eva Icons.
  • Eva Design System Support: Ensures design coherence and scalability.
  • Comprehensive documentation: Guides users through the library's features.
  • Starter App: A Kitten Tricks react-native starter kit with over 40 screens in dark and light themes.

Getting Started

Start from Scratch

To start using UI Kitten in a new app, you can initialize your app with the UI Kitten template:

For JavaScript:

npx react-native init MyApp --template @ui-kitten/template-js

For TypeScript:

npx react-native init MyApp --template @ui-kitten/template-ts

Documentation and Support

Extensive documentation is available to help developers understand and implement UI Kitten's components and features. Additionally, UI Bakery, a platform designed to aid in building applications, further supports the use of UI Kitten.

Community Engagement

Developers can support the UI Kitten project through several avenues:

  • Star the GitHub repository.
  • Contribute to the project by creating pull requests, reporting bugs, and suggesting new features or documentation improvements.
  • Engage with the developers and community through social platforms such as Medium, Twitter, and Facebook.

Licensing

UI Kitten is 100% free and open-source, distributed under the MIT license.

More from Akveo

Beyond UI Kitten, Akveo provides Eva Icons and actively engages with the developer community through social media channels such as Twitter.

Conclusion

UI Kitten is an open-source library that simplifies the development of visually cohesive mobile applications. With its emphasis on a theming system, icon support, and comprehensive documentation, it empowers developers to build applications with a consistent design quickly. Its dynamic theming feature enhances the user experience by enabling theme changes without reloading the app. The active community and easy-to-follow documentation make UI Kitten an accessible and valuable tool for React Native developers.


Tags

  • #UIKitten
  • #ReactNative
  • #EvaDesignSystem
  • #MobileDevelopment

https://github.com/akveo/react-native-ui-kitten