🧰 mkx_ui_kit

A ready-to-use customizable UI component kit:

✅ CustomTextField
✅ CustomPasswordField
✅ CustomButton (icon/text/floating)
✅ CustomDropdown
✅ CustomChip
✅ CustomBadge
🌙 Light/Dark theme support

🚀 Usage

import 'package:mkx_ui_kit/mkx_ui_kit.dart';

// Using text field
CustomTextField(label: "Name")

// Using password field
CustomPasswordField(label: "Password")

// Using buttons
CustomButton.text(
  text: "Click Me",
  onPressed: () => print("Button clicked")
)

CustomButton.icon(
  icon: Icons.add,
  onPressed: () => print("Icon button clicked")
)

CustomButton.floating(
  icon: Icons.add,
  onPressed: () => print("Floating button clicked")
)

// Using dropdown
CustomDropdown<String>(
  label: "Select an option",
  value: selectedValue,
  items: [
    DropdownMenuItem(value: "option1", child: Text("Option 1")),
    DropdownMenuItem(value: "option2", child: Text("Option 2")),
  ],
  onChanged: (value) => setState(() => selectedValue = value!),
)

// Using chip
CustomChip(
  label: "Flutter",
  onDeleted: () => print("Chip deleted"),
)

// Using badge
CustomBadge(
  badgeText: "3",
  child: Icon(Icons.notifications),
)

// Using bottom navigation bar
CustomBottomBar(
  selectedIndex: 0,
  handleChange: (index) => print('Selected: $index'),
  navItems: [
    NavigationItem(
      icon: Icons.home_outlined,
      selectedIcon: Icons.home,
      label: 'Home',
    ),
    NavigationItem(
      icon: Icons.search_outlined,
      selectedIcon: Icons.search,
      label: 'Search',
    ),
    NavigationItem(
      icon: Icons.notifications_outlined,
      selectedIcon: Icons.notifications,
      label: 'Alerts',
      badgeCount: 3,
    ),
  ],
)

// Using theme
MaterialApp(
  theme: MkxTheme.light,
  darkTheme: MkxTheme.dark,
  // ...
)

📦 Installation

Add this to your pubspec.yaml:

dependencies:
  mkx_ui_kit: ^0.0.1

🎨 Customizing Themes

You can customize the theme using the MkxThemeData class:

final customTheme = MkxTheme.applyCustomTheme(
  MkxTheme.light,
  MkxThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.purple),
  ),
);

MaterialApp(
  theme: customTheme,
  // ...
)

🔍 Examples

Check out the example folder for a complete sample application demonstrating all components and theme customization.

The example project includes:

• A components showcase with all available widgets
• A theme customization demo showing how to create and apply custom themes
• A launcher to navigate between the examples

To run the example:

cd example
flutter pub get
flutter run

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.