custom_checkbox_plus 1.0.0 copy "custom_checkbox_plus: ^1.0.0" to clipboard
custom_checkbox_plus: ^1.0.0 copied to clipboard

A flexible, animated, and accessible Flutter checkbox widget with full control over size, shape, colors, borders, and animation.

🧩 custom_checkbox #

pub package Flutter Platform License: MIT

A fully customizable, animated, and accessible Flutter checkbox widget ✨
Designed for developers who want complete control over visuals and interactions while maintaining simplicity and accessibility β™Ώ.


🌟 Features #

βœ… Customizable Design

  • Control size, shape (rounded or circular), border, colors, and icon.
  • Use your own icons or color schemes for branding consistency.

🎞️ Smooth Animation

  • Uses AnimatedContainer & AnimatedSwitcher for clean state transitions.

β™Ώ Accessibility-Ready

  • Built-in Semantics, Tooltip, and large tap area for screen readers and better usability.

πŸ’» Web & Desktop Friendly

  • Proper mouse cursor handling, InkWell feedback, and focus support.

πŸ”” Haptic Feedback

  • Optional tactile feedback on mobile platforms.

πŸš€ Quick Start #

Add the dependency to your pubspec.yaml:

dependencies:
  custom_checkbox: ^1.0.0

Import the package:

import 'package:custom_checkbox/custom_checkbox.dart';

Use it anywhere in your widget tree:

bool isChecked = false;

CustomCheckBox(
  value: isChecked,
  onChanged: (v) => setState(() => isChecked = v),
  size: 24,
  borderRadius: 6,
  borderColor: Colors.grey,
  activeBorderColor: Colors.blue,
  fillColor: Colors.white,
  activeFillColor: Colors.blue,
  iconColor: Colors.white,
  tooltip: 'Accept terms',
)

🧱 Example Output #

CustomCheckBox Demo


πŸŽ›οΈ Properties Overview #

Property Type Default Description
value bool – Whether the checkbox is checked.
onChanged ValueChanged<bool>? – Callback when toggled. null disables the widget.
size double 24.0 Overall size of the box.
borderRadius double 6.0 Corner roundness (ignored for circles).
shape BoxShape BoxShape.rectangle Shape: rectangle or circle.
borderColor Color Colors.grey Border color when unchecked.
activeBorderColor Color Colors.blue Border color when checked.
fillColor Color Colors.white Background color when unchecked.
activeFillColor Color Colors.blue Background color when checked.
iconColor Color Colors.white Checkmark icon color.
icon Widget? Icon(Icons.check_rounded) Custom icon when checked.
iconSize double? size * 0.8 Size of the checkmark icon.
disabledOpacity double 0.5 Opacity multiplier when disabled.
tooltip String? null Optional tooltip text.
semanticsLabel String? null Accessibility label for screen readers.
animationDuration Duration 150ms Duration of the toggle animation.
curve Curve Curves.easeInOut Curve of the toggle animation.
enableHapticFeedback bool false Enables vibration feedback on tap.

πŸ§ͺ Testing #

This package includes full widget tests:

  • βœ… Toggle behavior
  • βœ… Disabled state
  • βœ… Icon rendering
  • βœ… Circular shape
  • βœ… Tooltip & Semantics
  • βœ… Animation behavior
  • βœ… Haptic feedback

Run tests:

flutter test

🧰 Example App #

Check out the example/ folder for a live demo of different checkbox styles:

flutter run example/lib/main.dart

πŸ“ Changelog #

See CHANGELOG.md for release history.


πŸ“„ License #

This package is licensed under the MIT License.
Β© 2025 Your Name. All rights reserved.


πŸ’¬ Support #

If you like this package, ⭐ star it on GitHub to support development!
GitHub Repository β†’

0
likes
160
points
50
downloads

Publisher

unverified uploader

Weekly Downloads

A flexible, animated, and accessible Flutter checkbox widget with full control over size, shape, colors, borders, and animation.

Repository (GitHub)
View/report issues

Topics

#checkbox #widget #animation #ui #accessibility

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on custom_checkbox_plus