ui_kit_skeleton

UI Kit Core Brick is a powerful tool for generating a UI Kit Core package skeleton in your Flutter project. This skeleton provides a foundation for building a custom design system, including colors, text styles, theming, utility functions, and more. It enables you to establish a consistent and efficient workflow for developing UI components and styling in your Flutter applications.

Generated by [mason][1] 🧱

Getting Started 🚀

To get started with UI Kit Core using Mason CLI, follow the steps below:

1. Installation

Before proceeding, make sure you have Mason CLI installed on your machine. To check if it is installed, run the following command:

mason version

If you encounter an error while running this command, it means that Mason CLI is not yet activated on your machine. To activate it, use the following command:

dart pub global activate mason_cli

2. Adding ui_kit_core brick

To add this brick to your mason registry, use one of the following commands based on your preference:

# Install it locally
mason add ui_kit_core

# Install it globally
mason add -g ui_kit_core

Usage

You can watch an interactive tutorial on how to use this brick by visiting my YouTube video at the following link:

Eps. 2 of Flutter UI Kit Package Development - Using Mason Bricks

In the tutorial video, I provide step-by-step instructions and demonstrations on how to effectively utilize the UI Kit Core Brick in your Flutter projects. Feel free to watch the video to gain a better understanding of the brick's usage and maximize its potential in your UI Kit development workflow.

Before using this brick, you need to create a JSON file containing all the required input variables for generating your component. The following table provides the variables needed:

IMPORTANT NOTES

• For the colors variable, it should be an array containing property items with the following structure:

/// If color is type of Color
{
  "name": "primary",  // ex. primarydark
  "isMaterialColor": false, // Determined if the color a MaterialColor or Color
  "value": "303F9F", // Hex representation of color. Ex. FFFFFF. Must be a 
}

/// If color is type of MaterialColor
{
  "name": "neutral",  // ex. primarydark
  "isMaterialColor": false, // Determined if the color a MaterialColor or Color
  "defaultColor": "AEAEAE", // Default color of your MaterialColor
  "value": [
    {
        "level": 10,
        "value": "D9D9D9"
    }
  ],
 /// List of material color object withe level and value.
 /// After generated, this color can be used like this netutral[10]
}

• For the typograhpy variable, it should be an array containing typography items with the following structure:

 {
    "name": "title", /// Name of the style
    "fontSize": 42, /// font size of the style
    "parameters": [ /// list of customizable parameter for this style.
        {
            "type": "Color?",
            "name": "color"
        },
        {
            "type": "FontWeight?",
            "name": "fontWeight",
            "default": "FontWeight.w800"
        },
        {
            "type": "TextDecoration?",
            "name": "decoration"
        }
    ]
}

• For the textTheme variable, it should be an array containing enum items with the following structure:

/// Basic configuration
{
    "name": "Display Large", /// Name of textTheme you want to override
    "style": "title", /// Name of your text style to override given theme.
}

{
    "name": "Display Medium", /// Name of textTheme you want to override
    "style": "title", /// Name of your text style to override given theme.
    "parameters": [ /// List of customizable parameter for this textTheme.
        {
            "type": "FontWeight",
            "name": "fontWeight",
            "value": "FontWeight.w600"
        }
    ]
}

Feel free to customize the values according to your needs.

If you have created your JSON file, name it based on your preference, for example, core-config.json. Then, you can run the following command to generate the UI Kit Core using Mason CLI:

mason make ui_kit_core -c core-config.json

Make sure you replace core-config.json with the actual file name and path if it's located in a different directory. This command will utilize the JSON configuration file to generate the UI Kit Core based on the specified parameters.

Example

For example, if you have the following core-config.json in your project:

{
    "name": "Sikerja",
    "prefix": "sk",
    "fontFamily": "montserrat",
    "githubUsername": "banua-coder",
    "repositoryName": "sikerja-ui-kit",
    "colors": [
        {
            "isMaterialColor": false,
            "name": "primary",
            "value": "303F9F"
        },
        {
            "isMaterialColor": false,
            "name": "primarySurface",
            "value": "F5F5FA"
        },
        {
            "isMaterialColor": false,
            "name": "primaryFocus",
            "value": "D6D9EC"
        },
        {
            "isMaterialColor": false,
            "name": "primaryBorder",
            "value": "BABFDF"
        },
        {
            "isMaterialColor": false,
            "name": "primaryHover",
            "value": "283584"
        },
        {
            "isMaterialColor": false,
            "name": "primaryPressed",
            "value": "182050"
        },
        {
            "name": "neutral",
            "isMaterialColor": true,
            "defaultColor": "AEAEAE",
            "value": [
                {
                    "level": 10,
                    "value": "D9D9D9"
                },
                {
                    "level": 20,
                    "value": "DCDCDC"
                },
                {
                    "level": 30,
                    "value": "D5D5D5"
                },
                {
                    "level": 40,
                    "value": "C9C9C9"
                },
                {
                    "level": 50,
                    "value": "AEAEAE"
                },
                {
                    "level": 60,
                    "value": "8E8E8E"
                },
                {
                    "level": 70,
                    "value": "696969"
                },
                {
                    "level": 80,
                    "value": "535353"
                },
                {
                    "level": 90,
                    "value": "393939"
                },
                {
                    "level": 100,
                    "value": "090909"
                }
            ]
        }
    ],
    "typography": [
        {
            "name": "title",
            "fontSize": 42,
            "parameters": [
                {
                    "type": "Color?",
                    "name": "color"
                },
                {
                    "type": "FontWeight?",
                    "name": "fontWeight",
                    "default": "FontWeight.w800"
                },
                {
                    "type": "TextDecoration?",
                    "name": "decoration"
                }
            ]
        },
        {
            "name": "heading1",
            "fontSize": 34,
            "parameters": [
                {
                    "type": "Color?",
                    "name": "color"
                },
                {
                    "type": "FontWeight?",
                    "name": "fontWeight",
                    "default": "FontWeight.w700"
                },
                {
                    "type": "TextDecoration?",
                    "name": "decoration"
                }
            ]
        },
        {
            "name": "heading2",
            "fontSize": 27,
            "parameters": [
                {
                    "type": "Color?",
                    "name": "color"
                },
                {
                    "type": "FontWeight?",
                    "name": "fontWeight",
                    "default": "FontWeight.w700"
                },
                {
                    "type": "TextDecoration?",
                    "name": "decoration"
                }
            ]
        },
        {
            "name": "heading3",
            "fontSize": 21,
            "parameters": [
                {
                    "type": "Color?",
                    "name": "color"
                },
                {
                    "type": "FontWeight?",
                    "name": "fontWeight",
                    "default": "FontWeight.w700"
                },
                {
                    "type": "TextDecoration?",
                    "name": "decoration"
                }
            ]
        },
        {
            "name": "body1",
            "fontSize": 17,
            "parameters": [
                {
                    "type": "Color?",
                    "name": "color"
                },
                {
                    "type": "FontWeight?",
                    "name": "fontWeight",
                    "default": "FontWeight.w400"
                },
                {
                    "type": "TextDecoration?",
                    "name": "decoration"
                }
            ]
        },
        {
            "name": "body2",
            "fontSize": 14,
            "parameters": [
                {
                    "type": "Color?",
                    "name": "color"
                },
                {
                    "type": "FontWeight?",
                    "name": "fontWeight",
                    "default": "FontWeight.w400"
                },
                {
                    "type": "TextDecoration?",
                    "name": "decoration"
                }
            ]
        },
        {
            "name": "caption",
            "fontSize": 11,
            "parameters": [
                {
                    "type": "Color?",
                    "name": "color"
                },
                {
                    "type": "FontWeight?",
                    "name": "fontWeight",
                    "default": "FontWeight.w400"
                },
                {
                    "type": "TextDecoration?",
                    "name": "decoration"
                }
            ]
        },
        {
            "name": "overline",
            "fontSize": 8,
            "parameters": [
                {
                    "type": "Color?",
                    "name": "color"
                },
                {
                    "type": "FontWeight?",
                    "name": "fontWeight",
                    "default": "FontWeight.w400"
                },
                {
                    "type": "TextDecoration?",
                    "name": "decoration",
                    "default": "TextDecoration.underline"
                }
            ]
        }
    ],
    "textTheme": [
        {
            "name": "Display Large",
            "style": "title"
        },
        {
            "name": "Display Medium",
            "style": "title",
            "parameters": [
                {
                    "type": "FontWeight",
                    "name": "fontWeight",
                    "value": "FontWeight.w600"
                }
            ]
        },
        {
            "name": "Display Small",
            "style": "title",
            "parameters": [
                {
                    "type": "FontWeight",
                    "name": "fontWeight",
                    "value": "FontWeight.w400"
                }
            ]
        },
        {
            "name": "Title Large",
            "style": "heading1"
        },
        {
            "name": "Title Medium",
            "style": "heading2"
        },
        {
            "name": "Title Small",
            "style": "heading3"
        },
        {
            "name": "Body Large",
            "style": "body2"
        },
        {
            "name": "Body Medium",
            "style": "body1"
        },
        {
            "name": "Body Small",
            "style": "caption"
        }
    ]
}

If you run the command mason make ui_kit_core -c core-config.json, it will generate the following files based on the provided configuration:

• pubspec.yaml : Contains customized version of the file with all required package installed.

name: sikerja_ui_kit
description: A UI Kit package for Sikerja.
version: 0.0.1
homepage: https://github.com/banua-coder/sikerja-ui-kit.git
  
environment: 
  sdk: ">=3.0.1 <4.0.0"
  flutter: ">=1.17.0"

dependencies:
  extended_image: ^8.0.2
  flutter:
    sdk: flutter
  flutter_screenutil: ^5.8.4
  flutter_spinkit: ^5.2.0
  flutter_svg: ^2.0.7
  flutter_switch: ^0.3.2
  google_fonts: ^5.1.0
  lottie: ^2.4.0
  nil: ^1.1.1
  shimmer: ^3.0.0
  tap_debouncer: ^2.2.0

dev_dependencies: 
  dart_code_metrics: ^4.19.2
  flutter_lints: ^2.0.0
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true
  # assets:
  #   - assets/logo/
  #   - assets/images/

flutter_gen:
  output: lib/src/core/assets/gen/
  integrations:
    flutter_svg: true
    lottie: true

• analysis-option.yaml : Contains customized version of the file with some additional rules also including dart_code_metrics

include: package:flutter_lints/flutter.yaml

# Additional information about this file can be found at
# https://dart.dev/guides/language/analysis-options

analyzer:
  plugins:
    - dart_code_metrics
  exclude:
    - "build/**"

dart_code_metrics:
  metrics:
    cyclomatic-complexity: 20
    maximum-nesting-level: 5
    number-of-parameters: 4
    source-line-of-code: 50
....

• lib/sikerja_ui_kit.dart: Contains all the package export.

library sikerja_ui_kit;

// 3rd party packages
export 'package:flutter_screenutil/flutter_screenutil.dart';
export 'package:nil/nil.dart';

// components

// styles
export 'src/core/styles/sk_colors.dart';
export 'src/core/styles/sk_text_style.dart';

// themes
export 'src/core/theme/sk_color_theme.dart';
export 'src/core/theme/sk_theme.dart';

// utils
export 'src/core/utils/component_init.dart';

• lib/src/core/styles/sk_colors.dart: Contains all of the colors.

import 'package:flutter/material.dart';

class SKColors {
  const SKColors._();

  static const Color primary = Color(0xFF303F9F);
  static const Color primarySurface = Color(0xFFF5F5FA);
  static const Color primaryFocus = Color(0xFFD6D9EC);
  static const Color primaryBorder = Color(0xFFBABFDF);
  static const Color primaryHover = Color(0xFF283584);
  static const Color primaryPressed = Color(0xFF182050);
  static const MaterialColor neutral = MaterialColor(
    0xFFAEAEAE,
    {
      10: Color(0xFFD9D9D9),
      20: Color(0xFFDCDCDC),
      30: Color(0xFFD5D5D5),
      40: Color(0xFFC9C9C9),
      50: Color(0xFFAEAEAE),
      60: Color(0xFF8E8E8E),
      70: Color(0xFF696969),
      80: Color(0xFF535353),
      90: Color(0xFF393939),
      100: Color(0xFF090909),
    },
  );
}

• lib/src/core/styles/sk_text_style.dart: Contains all of the typography.

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

import '../../../sikerja_ui_kit.dart';

class SKTextStyle {
  const SKTextStyle._();

  static TextStyle _base({
    double fontSize = 14,
    FontWeight? fontWeight = FontWeight.w400,
    double letterSpacing = 0.0,
    TextDecoration? decoration,
    Color? color,
    double? height,
  }) =>
      GoogleFonts.montserrat(
        fontSize: fontSize * 1.sp,
        fontWeight: fontWeight,
        letterSpacing: letterSpacing * 1.sp,
        height: height,
        textBaseline: TextBaseline.alphabetic,
        decoration: decoration,
        locale: const Locale('en', 'US'),
        color: color,
      );

  //TODO: Define your text style variant and your main text theme

  static TextTheme mainTextTheme = TextTheme(
    displayLarge: SKTextStyle.title(),
    displayMedium: SKTextStyle.title(),
    displaySmall: SKTextStyle.title(),
    titleLarge: SKTextStyle.heading1(),
    titleMedium: SKTextStyle.heading2(),
    titleSmall: SKTextStyle.heading3(),
    bodyLarge: SKTextStyle.body2(),
    bodyMedium: SKTextStyle.body1(),
    bodySmall: SKTextStyle.caption(),
  );

  static TextStyle title({
    Color? color,
    FontWeight? fontWeight = FontWeight.w800,
    TextDecoration? decoration,
  }) =>
      _base(
        fontSize: 42,
        color: color,
        fontWeight: fontWeight,
        decoration: decoration,
      );

  static TextStyle heading1({
    Color? color,
    FontWeight? fontWeight = FontWeight.w700,
    TextDecoration? decoration,
  }) =>
      _base(
        fontSize: 34,
        color: color,
        fontWeight: fontWeight,
        decoration: decoration,
      );

  static TextStyle heading2({
    Color? color,
    FontWeight? fontWeight = FontWeight.w700,
    TextDecoration? decoration,
  }) =>
      _base(
        fontSize: 27,
        color: color,
        fontWeight: fontWeight,
        decoration: decoration,
      );

  static TextStyle heading3({
    Color? color,
    FontWeight? fontWeight = FontWeight.w700,
    TextDecoration? decoration,
  }) =>
      _base(
        fontSize: 21,
        color: color,
        fontWeight: fontWeight,
        decoration: decoration,
      );

  static TextStyle body1({
    Color? color,
    FontWeight? fontWeight = FontWeight.w400,
    TextDecoration? decoration,
  }) =>
      _base(
        fontSize: 17,
        color: color,
        fontWeight: fontWeight,
        decoration: decoration,
      );

  static TextStyle body2({
    Color? color,
    FontWeight? fontWeight = FontWeight.w400,
    TextDecoration? decoration,
  }) =>
      _base(
        fontSize: 14,
        color: color,
        fontWeight: fontWeight,
        decoration: decoration,
      );

  static TextStyle caption({
    Color? color,
    FontWeight? fontWeight = FontWeight.w400,
    TextDecoration? decoration,
  }) =>
      _base(
        fontSize: 11,
        color: color,
        fontWeight: fontWeight,
        decoration: decoration,
      );

  static TextStyle overline({
    Color? color,
    FontWeight? fontWeight = FontWeight.w400,
    TextDecoration? decoration = TextDecoration.underline,
  }) =>
      _base(
        fontSize: 8,
        color: color,
        fontWeight: fontWeight,
        decoration: decoration,
      );
}

• lib/src/core/theme/sk_color_theme.dart: Contains all colors in ThemeExtension version.

import 'package:flutter/material.dart';

import '../../../sikerja_ui_kit.dart';

class SKColorTheme extends ThemeExtension<SKColorTheme> {
  const SKColorTheme({
    this.primary,
    this.primarySurface,
    this.primaryFocus,
    this.primaryBorder,
    this.primaryHover,
    this.primaryPressed,
    this.neutral10,
    this.neutral20,
    this.neutral30,
    this.neutral40,
    this.neutral50,
    this.neutral60,
    this.neutral70,
    this.neutral80,
    this.neutral90,
    this.neutral100,
  });

  final Color? primary;
  final Color? primarySurface;
  final Color? primaryFocus;
  final Color? primaryBorder;
  final Color? primaryHover;
  final Color? primaryPressed;
  final Color? neutral10;
  final Color? neutral20;
  final Color? neutral30;
  final Color? neutral40;
  final Color? neutral50;
  final Color? neutral60;
  final Color? neutral70;
  final Color? neutral80;
  final Color? neutral90;
  final Color? neutral100;

  @override
  ThemeExtension<SKColorTheme> copyWith({
    Color? primary,
    Color? primarySurface,
    Color? primaryFocus,
    Color? primaryBorder,
    Color? primaryHover,
    Color? primaryPressed,
    Color? neutral10,
    Color? neutral20,
    Color? neutral30,
    Color? neutral40,
    Color? neutral50,
    Color? neutral60,
    Color? neutral70,
    Color? neutral80,
    Color? neutral90,
    Color? neutral100,
  }) =>
      SKColorTheme(
        primary: primary ?? this.primary,
        primarySurface: primarySurface ?? this.primarySurface,
        primaryFocus: primaryFocus ?? this.primaryFocus,
        primaryBorder: primaryBorder ?? this.primaryBorder,
        primaryHover: primaryHover ?? this.primaryHover,
        primaryPressed: primaryPressed ?? this.primaryPressed,
        neutral10: neutral10 ?? this.neutral10,
        neutral20: neutral20 ?? this.neutral20,
        neutral30: neutral30 ?? this.neutral30,
        neutral40: neutral40 ?? this.neutral40,
        neutral50: neutral50 ?? this.neutral50,
        neutral60: neutral60 ?? this.neutral60,
        neutral70: neutral70 ?? this.neutral70,
        neutral80: neutral80 ?? this.neutral80,
        neutral90: neutral90 ?? this.neutral90,
        neutral100: neutral100 ?? this.neutral100,
      );

  @override
  ThemeExtension<SKColorTheme> lerp(
    covariant ThemeExtension<SKColorTheme>? other,
    double t,
  ) {
    if (other is! SKColorTheme) {
      return this;
    }

    return SKColorTheme(
      primary: Color.lerp(primary, other.primary, t),
      primarySurface: Color.lerp(primarySurface, other.primarySurface, t),
      primaryFocus: Color.lerp(primaryFocus, other.primaryFocus, t),
      primaryBorder: Color.lerp(primaryBorder, other.primaryBorder, t),
      primaryHover: Color.lerp(primaryHover, other.primaryHover, t),
      primaryPressed: Color.lerp(primaryPressed, other.primaryPressed, t),
      neutral10: Color.lerp(neutral10, other.neutral10, t),
      neutral20: Color.lerp(neutral20, other.neutral20, t),
      neutral30: Color.lerp(neutral30, other.neutral30, t),
      neutral40: Color.lerp(neutral40, other.neutral40, t),
      neutral50: Color.lerp(neutral50, other.neutral50, t),
      neutral60: Color.lerp(neutral60, other.neutral60, t),
      neutral70: Color.lerp(neutral70, other.neutral70, t),
      neutral80: Color.lerp(neutral80, other.neutral80, t),
      neutral90: Color.lerp(neutral90, other.neutral90, t),
      neutral100: Color.lerp(neutral100, other.neutral100, t),
    );
  }

  /// Light color scheme
  static final SKColorTheme light = SKColorTheme(
    primary: SKColors.primary,
    primarySurface: SKColors.primarySurface,
    primaryFocus: SKColors.primaryFocus,
    primaryBorder: SKColors.primaryBorder,
    primaryHover: SKColors.primaryHover,
    primaryPressed: SKColors.primaryPressed,
    neutral10: SKColors.neutral[10],
    neutral20: SKColors.neutral[20],
    neutral30: SKColors.neutral[30],
    neutral40: SKColors.neutral[40],
    neutral50: SKColors.neutral[50],
    neutral60: SKColors.neutral[60],
    neutral70: SKColors.neutral[70],
    neutral80: SKColors.neutral[80],
    neutral90: SKColors.neutral[90],
    neutral100: SKColors.neutral[100],
  );

  /// Dark color scheme
  static final SKColorTheme dark = SKColorTheme(
    primary: SKColors.primary,
    primarySurface: SKColors.primarySurface,
    primaryFocus: SKColors.primaryFocus,
    primaryBorder: SKColors.primaryBorder,
    primaryHover: SKColors.primaryHover,
    primaryPressed: SKColors.primaryPressed,
    neutral10: SKColors.neutral[10],
    neutral20: SKColors.neutral[20],
    neutral30: SKColors.neutral[30],
    neutral40: SKColors.neutral[40],
    neutral50: SKColors.neutral[50],
    neutral60: SKColors.neutral[60],
    neutral70: SKColors.neutral[70],
    neutral80: SKColors.neutral[80],
    neutral90: SKColors.neutral[90],
    neutral100: SKColors.neutral[100],
  );

  @override
  String toString() {
    return 'SKColorTheme('
        'primary: $primary, '
        'primarySurface: $primarySurface, '
        'primaryFocus: $primaryFocus, '
        'primaryBorder: $primaryBorder, '
        'primaryHover: $primaryHover, '
        'primaryPressed: $primaryPressed, '
        'neutral10: $neutral10, '
        'neutral20: $neutral20, '
        'neutral30: $neutral30, '
        'neutral40: $neutral40, '
        'neutral50: $neutral50, '
        'neutral60: $neutral60, '
        'neutral70: $neutral70, '
        'neutral80: $neutral80, '
        'neutral90: $neutral90, '
        'neutral100: $neutral100, '
        ')';
  }
}

• lib/src/core/theme/sk_theme.dart: Contains all theme configuration.

import 'package:flutter/material.dart';

import '../../../sikerja_ui_kit.dart';

class SKTheme {
  static ThemeData main() => ThemeData(
    primaryColor: SKColors.primary,
    textTheme: SKTextStyle.mainTextTheme,
  );
}

• lib/src/core/utils/component_init.dart: Contains component initialization for ScreenUtil.

import 'package:flutter/material.dart';


import '../../../sikerja_ui_kit.dart';

class SKComponentInit extends StatelessWidget {
  const SKComponentInit({super.key, required this.builder});

  final Widget Function(BuildContext context) builder;

  @override
  Widget build(BuildContext context) => MediaQuery(
    data: MediaQueryData.fromView(View.of(context)),
    child: LayoutBuilder(
      builder: (_, constraints) {
        if(constraints.maxWidth != 0) {
          ScreenUtil.init(
            _, 
            designSize: Size(
              constraints.maxWidth,
              constraints.maxHeight,
            ),
          );

          return builder(context);
        }

        return nil;
      },
    ),
  );
}

• test/util/sk_component_init_test.dart: Contains component initialization for widget test.
• test/util/widget_test_scenario_model.dart : Model for widget test scenario.
• example/pubspec.yaml: Contains all pubspec configuration for the example app.
• example/analysis-options.yaml: Contains all linter rule for the example app.
• example/lib/pages/home_page.dart: Home page of example app.
• example/lib/pages/color_page.dart: Page to preview all UI Kit Colors.
• example/lib/pages/typography_page.dart: Page to preview all UI Kit typography.
• example/lib/app.dart: Main app of the example page. Contains an example of how to initialize the component.
• example/lib/main.dart: Main entry of the example app.

Support

Please support me in continuously developing useful bricks and packages like this by liking and subscribing. Feel free to provide your feedback and suggestions through the comments.

Help Banua Coder continue to provide valuable content:

• Support on Saweria

Connect with Banua Coder:

• Instagram: Banua Coder
• Website: Banua Coder
• GitHub: Banua Coder

For my personal social media accounts:

• Instagram: ryanaidilp
• GitHub: ryanaidilp
• LinkedIn: ryanaidilp
• Twitter: ryanaidilp

Setup 🧑‍💻

Ensure you have the mason_cli installed.

# 🎯 Activate from https://pub.dev
dart pub global activate mason_cli

# 🍺 Or install from https://brew.sh
brew tap felangel/mason
brew install mason

Installation ☁️

# Install locally
mason add ui_kit_core

# Install globally
mason add -g ui_kit_core

Usage 🚀

mason make ui_kit_core

Variables ✨

Hooks 🪝

• ✅   Pre-Gen
• ✅   Post-Gen

Environment 🌎

mason: ">=0.1.0-dev.50 <0.1.0"

0.5.0

• Added support for flutter 3.13.
• Update some packages.
• Add check for flutter version management for running flutter/dart related commmands in the hooks.
• Replace my personal analysis_options.yaml with very_good_analysis
• Add very good github templates and workflows
• Add component_x.dart whcih add skeletonize() extension method to skeletonize a widget/component.

0.4.0+4

• Added a prompt for users to select whether they want to use a custom text theme or the default text theme from the selected font family.
• Added darkTextTheme.

0.3.0+3

• Improved prompts during skeleton generation:
  • Added prompt for the number of colors to be generated.
  • Added prompt for the number of text styles to be generated.
  • Prompt users to provide information about each color and text style item.
• Fixed an issue with the change_app_package_name process, which was not updating the app package name and bundle id correctly.
• Renamed the example config files to config.json and removed the unnecessary example prefix.
• Added a new component-config.json file that users can use to generate components using the UI Kit component brick with the command mason make ui_kit_component -c component-config.json. Users can customize the content of component-config.json according to their needs.
• Implemented a post-generation process to fix code violations using dart fix --apply.
• Added a final congratulatory message when the component is generated successfully.

0.2.0+2

• Remove dart_code_metrics as it discontinued by the maintainer.
• Add change_app_package_name to update example app bundle id.
• Replace shimmer with skeletonizer
• Add pre_gen hooks to remove test/app_name_ui_kit_test.dart flle.
• Add post_gen hooks to do some task automatically after the code generated successfully.
  • Fix example project by running flutter create . command inside example directory.
  • Install & upgrade all example project package.
  • Update bundle id to com.app_name_ui_kit.example.app
  • Check if rename package is installed. If not, then it will run dart pub global activate rename
  • Run rename to update app name to "App Name UI Kit".
  • Remove all unused files.

0.1.0+1

• Initial release of ui_kit_core brick.

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of the UI Kit Core bricks and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.