custom_checkbox_plus 1.0.0
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 #
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&AnimatedSwitcherfor 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 #

๐๏ธ 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 โ