Skip to content

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

License

Notifications You must be signed in to change notification settings

a7madDelea/custom_checkbox

Repository files navigation

🧩 custom_checkbox_plus

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 →

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published