premium_ui_kit 0.0.1

A comprehensive collection of premium, highly customizable, and theme-aware common Flutter widgets including text fields, pickers, dropdowns, and more.

Flutter Custom Widgets

A comprehensive collection of premium, highly customizable, and theme-aware common Flutter widgets. This package provides everything from standard text fields and complex pickers to dropdowns, completely responsive and beautifully styled out of the box.

🚀 Live Preview

Click Here to view the Live Web Preview

📸 Screenshots

[Package Preview] (Note: A full-page screenshot of your widgets is saved in the screenshots folder of this repository. When you publish to pub.dev, it will display automatically!)

Features

• CustomTextField: A premium text field with built-in validation (using form_validator), password strength checking, and obscure toggles.
• CustomPhoneField: An international phone number field with country code picker.
• CustomDropdown: A beautiful, highly customizable dropdown menu.
• CustomDatePickers: A suite of pickers for Date, Time, DateTime, Month, and Year.
• Selection Widgets: Premium Animated Checkboxes, Glassmorphic Track Switches, High-Fidelity Radio Groups, Linear Scales, and OTP PIN Inputs.
• Location Picker: Built-in Google Maps location picker.
• Theme Aware: Globally control the look and feel using CommonWidgetsTheme.

Getting started

In your pubspec.yaml file, add:

dependencies:
  premium_ui_kit: ^0.0.1

Import the package in your Dart code:

import 'package:premium_ui_kit/premium_ui_kit.dart';

Usage & Examples

1. Global Theme Configuration (Optional)

You can set a global theme for all your common widgets at the start of your application:

void main() {
  CommonWidgetsConfig.setTheme(const CommonWidgetsTheme(
    primaryColor: Colors.blue,
    backgroundColor: Colors.white,
    borderRadius: 8.0,
  ));
  runApp(MyApp());
}

2. CustomTextField (with Password Strength)

CustomTextField(
  fieldId: 'passwordField',
  labelText: 'Choose Password',
  prefixIcon: Icon(Icons.lock_outline),
  isPassword: true,
  showPasswordStrengthChecker: true,
  isRequired: true,
  minLength: 8,
)

3. CustomPhoneField

CustomPhoneField(
  fieldId: 'phone',
  labelText: 'Phone Number',
  isRequired: true,
  pickerMode: PhoneCountryPickerMode.bottomSheet,
  showMaxLength: true,
  limitInputToMaxLength: true,
  onChanged: (phoneNumber) => print(phoneNumber),
)

4. CustomDropdown

CustomDropdown(
  fieldId: 'country',
  labelText: 'Select Country',
  items: const ['USA', 'Canada', 'UK'],
  isRequired: true,
  onChanged: (val) => print(val),
)

5. CustomDatePicker

CustomDatePicker(
  fieldId: 'dob',
  labelText: 'Date of Birth',
  isRequired: true,
  onChanged: (date) => print(date),
)

6. CustomSwitch (Glassmorphic)

CustomSwitch(
  fieldId: 'notifications',
  labelText: 'Push Notifications',
  value: true,
  activeTrackText: 'YES',
  inactiveTrackText: 'NO',
  activeThumbIcon: Icons.notifications_active,
  onChanged: (val) => print(val),
)

7. CustomOtpPinField

CustomOtpPinField(
  fieldId: 'otp',
  labelText: 'Enter Verification Code',
  maxLength: 4,
  pinStyle: OtpPinStyle.box,
  obscureText: false,
  isRequired: true,
  onChanged: (pin) => print(pin),
)

8. CustomRadioGroup & CheckboxGroup

CustomRadioGroup(
  fieldId: 'payment',
  labelText: 'Payment Method',
  options: const ['Card', 'PayPal'],
  selectedValue: 'Card',
  isCardMode: true,
  onChanged: (val) => print(val),
)

CustomCheckboxGroup(
  fieldId: 'hobbies',
  labelText: 'Hobbies',
  options: const ['Reading', 'Gaming'],
  selectedValues: const ['Reading'],
  isCardMode: true,
  onChanged: (list) => print(list),
)

Check the example/ folder in the repository for a complete preview app demonstrating all widgets!

Additional information

For more information, please visit our GitHub Repository. Feel free to open issues or contribute via pull requests.