mj_ui_kits 0.0.3

A collection of reusable Flutter UI widgets and components.

mj_ui_kits

A collection of reusable Flutter UI widgets and components with a unified API through the mj class.

Features

• 🎨 Unified API: Access all widgets and styles through a single mj class
• 🎯 UI Components: Pre-built widgets including buttons, badges, checkboxes, dropdowns, and more
• 🎨 Style Guide: Consistent colors, typography, spacing, and theming
• 📦 Easy to Use: Simple and intuitive API design

Getting started

Add mj_ui_kits to your pubspec.yaml:

dependencies:
  mj_ui_kits: ^0.0.1

Then run:

flutter pub get

Usage

Import the package

import 'package:mj_ui_kits/mj_ui_kits.dart';

Using UI Widgets

ActiveButton

mj.ActiveButton.single(
  onPressed: () {},
  label: 'Click me',
)

mj.ActiveButton.split(
  items: [
    SplitData(
      onPressed: () {},
      name: '취소',
      theme: ActiveButtonThemeSecondary(),
    ),
    SplitData(
      onPressed: () {},
      name: '확인',
      theme: ActiveButtonThemeSecondary(),
    ),
  ],
),

Badge

mj.Badge.primary('New')
mj.Badge.outlinedPrimary('Sale')

Checkbox

mj.Checkbox(
  value: isChecked,
  onChanged: (value) => setState(() => isChecked = value),
  label: 'Accept terms',
)

Dropdown

mj.Dropdown.outlined(
  value: selectedValue,
  list: ['Option 1', 'Option 2', 'Option 3'],
  onChanged: (value) => setState(() => selectedValue = value!),
)

Radio

mj.Radio(
  items: [
    MRadioOption(label: 'Option 1'),
    MRadioOption(label: 'Option 2'),
  ],
  selectedIndex: selectedIndex,
  onChanged: (index, label) => setState(() => selectedIndex = index),
)

Using Styles

Colors

Container(
  color: mj.colorPrimary,
  child: Text(
    'Hello',
    style: TextStyle(color: mj.colorWhite),
  ),
)

Typography

Text(
  'Heading',
  style: mj.textStyle_H1(),
)

Text(
  'Body text',
  style: mj.textStyle_Body1(color: mj.colorBlack),
)

Spacing

Container(
  padding: EdgeInsets.all(mj.inner_medium),
  margin: EdgeInsets.all(mj.inner_small),
)

Border Radius

Container(
  decoration: BoxDecoration(
    borderRadius: mj.borderRadius_normal,
  ),
)

Additional information

• Homepage: https://github.com/almj3308/mj_ui_kits
• Repository: https://github.com/almj3308/mj_ui_kits
• Package: https://pub.dev/packages/mj_ui_kits

For more information and examples, please visit the GitHub repository.