omjo_captcha 0.0.10
omjo_captcha: ^0.0.10 copied to clipboard
A customizable text-based CAPTCHA widget for Flutter with randomized colorful characters and lines. No backend required.
omjo_captcha #
A customizable, client-side CAPTCHA widget for Flutter with randomized colorful characters and noise lines.
No backend required โ perfect for login forms, guestbooks, or simple human verification needs.
โจ Features #
- ๐จ Randomized colored characters
- ๐ Noise/disturbance lines for bot resistance
- ๐ Easy CAPTCHA refresh
- โ Custom validation logic
- ๐ซ Works entirely offline (no server needed)
๐ Live Demo #
๐งช Try it directly in your browser (no installation needed):
๐ https://omjocaptcha.netlify.app
๐ฆ Installation #
Add this to your pubspec.yaml
:
dependencies:
omjo_captcha: ^0.0.1
Then run:
flutter pub get
๐ Usage #
Here's a simple example:
import 'package:flutter/material.dart';
import 'package:omjo_captcha/omjo_captcha.dart';
import 'dart:math';
class CaptchaPreview extends StatefulWidget {
const CaptchaPreview({super.key});
@override
State<CaptchaPreview> createState() => _CaptchaPreviewState();
}
class _CaptchaPreviewState extends State<CaptchaPreview> {
late List<CaptchaChar> characters;
late List<CaptchaLine> lines;
@override
void initState() {
super.initState();
_generateCaptcha();
}
void _generateCaptcha() {
final random = Random();
const text = 'A7B2X';
characters = text.split('').map((char) {
return CaptchaChar(
char: char,
color: _randomColor(random),
yOffset: 10 + random.nextDouble() * 10,
rotation: (random.nextDouble() - 0.5) * 0.3,
);
}).toList();
lines = List.generate(5, (_) {
return CaptchaLine(
start: Offset(random.nextDouble() * 120, random.nextDouble() * 50),
end: Offset(random.nextDouble() * 120, random.nextDouble() * 50),
color: _randomColor(random),
);
});
setState(() {});
}
Color _randomColor(Random random) {
return Color.fromARGB(
255,
100 + random.nextInt(156),
100 + random.nextInt(156),
100 + random.nextInt(156),
);
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CustomPaint(
size: const Size(150, 50),
painter: CaptchaPainter(characters, lines),
),
const SizedBox(height: 10),
ElevatedButton(
onPressed: _generateCaptcha,
child: const Text('Refresh Captcha'),
),
],
);
}
}
๐ Folder Structure #
lib/
โโโ omjo_captcha.dart
โโโ src/
โโโ captcha_painter.dart
โโโ models/
โ โโโ captcha_char.dart
โ โโโ captcha_line.dart
๐งช Example App #
Clone this repo and run the example:
cd example
flutter run
๐ก Tips #
- You can wrap this CAPTCHA in a
TextFormField
widget for login forms. - Combine with your auth logic to validate user input against
captchaText
.
๐ ๏ธ Contributing #
Contributions are welcome!
If you found a bug or want a new feature, please open an issue or submit a pull request.
Support the Project #
If you find this plugin helpful, consider supporting its development:
Your support is greatly appreciated!
๐ License #
MIT ยฉ Abu Khoerul Iskandar Ali (Omjo)
See LICENSE for details.
๐ Credits #
Built with ๐ using Flutter.