ui_kit_component

UI Kit Component is a versatile and reusable component generator designed for building beautiful user interfaces in Flutter UI Kit Packages. It provides a skeleton to built a collection of commonly used UI elements, such as buttons, cards, forms, and more, that can be easily integrated into your Flutter projects.

Generated by [mason][1] 🧱

Getting Started 🚀

To get started with UI Kit Component 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_component 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_component

# Install it globally
mason add -g ui_kit_component

Usage

Before proceeding with the generation of a component, please ensure that you have already installed and built the skeleton of your UI Kit Package using the ui_kit_core brick. This is necessary as the ui_kit_component brick relies on the core package to function properly. Once you have successfully set up the UI Kit Package with ui_kit_core, you can proceed with generating the component using the provided instructions.

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 Component 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:

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

{
  "name": "propertyName",
  "type": "propertyType", // Type according to flutter (ex. String)
  "isRequired": true,
  "default": "defaultValue"
}

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

{
  "name": "enum name", //ex. Button Size
  "values": [
    "small",
    "medium",
    "large"
  ],
}

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, component-config.json. Then, you can run the following command to generate the UI Kit Component using Mason CLI:

mason make ui_kit_component -c component-config.json

Make sure you replace component-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 Component based on the specified parameters.

Example

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

{
    "name": "button",
    "isStateful": false,
    "hasEnum": true,
    "prefix": "sk",
    "properties": [
        {
            "name": "label",
            "type": "String",
            "isRequired": true
        },
        {
            "name": "onpressed",
            "type": "Future Function()",
            "isRequired": true
        },
        {
            "name": "size",
            "type": "SKButtonSize",
            "default": "SKButtonSize.small"
        },
        {
            "name": "variant",
            "type": "SKButtonVariant",
            "default": "SKButtonVariant.primary"
        },
        {
            "name": "enabled",
            "type": "bool",
            "default": true
        }
    ],
    "enums": [
        {
            "name": "button variant",
            "values": [
                "primary",
                "outlined",
                "ghost"
            ]
        },
        {
            "name": "button size",
            "values": [
                "large",
                "medium",
                "regular",
                "small"
            ]
        }
    ]
}

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

• test/components/button/sk_button_test.dart: Contains the widget test for SKButton component.

import 'package:flutter/foundation.dart';
import 'package:flutter_test/flutter_test.dart';

import 'sk_button_test_scenario.dart';

void main() {
  group(
    'Button Test',
    () {
      testWidgets(
        buttonTestScenario[0].title,
        (WidgetTester tester) async {
          debugDefaultTargetPlatformOverride = TargetPlatform.android;

          await tester.pumpWidget(buttonTestScenario[0].widget);

          ///expect(find.text('Text'), findsOneWidget);
          debugDefaultTargetPlatformOverride = null;
        },
      );
    },
  );
}

• test/components/button/sk_button_test_scenario.dart: Contains all widget test scenario for SKButton component.

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

import '../../util/sk_component_init_test.dart';
import '../../util/widget_test_scenario_model.dart';

List<WidgetTestScenarioModel> buttonTestScenario = [
  WidgetTestScenarioModel(
    title: 'has label set to Save',
    widget: SKComponentInitTest(
      child: SKButton(label: 'Save', onpressed: () async {}),
    ),
  ),
];

• example/lib/pages/button_page.dart: Contains a page for previewing SKButton component in example app.

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

class ButtonPage extends StatelessWidget {
  const ButtonPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Button'),
      ),
      body: Padding(
        padding: EdgeInsets.all(20.r),
        child: SKButton(label: 'Save', onpressed: () async {}),
      ),
    );
  }
}

• lib/sikerja_ui_kit.dart: Append export for SKButton component into you ui kit package.

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';

export 'src/components/button/enums/sk_button_enums.dart';
export 'src/components/button/sk_button.dart';

• lib/src/components/buttons/enums/sk_button_enums.dart: Contains all enums that you have been define before.

enum SKButtonVariant {
  primary,
  outlined,
  ghost,
}

enum SKButtonSize {
  large,
  medium,
  regular,
  small,
}

• lib/src/components/button/sk_button.dart: Contains implementation of the component.

import 'package:flutter/material.dart';

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

class SKButton extends StatelessWidget {
  const SKButton({
    super.key,
    required this.label,
    required this.onpressed,
    this.size = SKButtonSize.small,
    this.variant = SKButtonVariant.primary,
    this.enabled = true,
  });

  final String label;

  final Future Function() onpressed;

  final SKButtonSize size;

  final SKButtonVariant variant;

  final bool enabled;

  @override
  Widget build(BuildContext context) => Container();
}

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_component

# Install globally
mason add -g ui_kit_component

Usage 🚀

mason make ui_kit_component

Variables ✨

Hooks 🪝

• ✅   Pre-Gen
• ✅   Post-Gen

Environment 🌎

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

0.4.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.
• Fix some bugs and minor errors after generating code.

0.3.0+3

• Added a check for enum property in pre-gen hooks. If there are no enums and hasEnum is set to true, prompt the user for the enums value.

0.2.0+2

• Improved prompts during component generation:
  • Added prompt for the number of properties to be generated.
  • Added prompt for the number of enums to be generated (if the component has enums).
  • Prompt users to provide information about each property and enum item.
• 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.1.0+1

• Initial release of ui_kit_component brick.

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of the UI Kit Component 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.